Pagină internă · nu e în meniu
Gimmicks 3
Fundaluri din aceeași familie cu norul de lavă: un gradient doar din CSS, o lampă cu lavă, râuri de scântei, cerneală topită și o lupă de sticlă. Fiecare reacționează la telefon: îl înclini, îl scuturi, derulezi.
Fiecare efect desenează doar cât timp e pe ecran și se oprește când schimbi tabul. Eticheta din colțul lui arată cât costă pe procesor, în milisecunde pe cadru. Cu „Reduce motion” vezi o singură imagine, fără animație.
← /gimmicks2Norul de lavă: /lava →Metal topit, fără JavaScript
Animated gradient · CSS @property + conic-gradient() + radial-gradient()
Trei gradienți suprapuși se rotesc și curg încet, ca metalul topit într-un creuzet. Animația e scrisă numai în CSS: @property spune browserului că o variabilă e un unghi sau un procent, așa că o poate anima. JavaScript doar mută pata de lumină după înclinarea telefonului. Fără el, efectul merge la fel.
Lampa cu lavă
Metaballs · fragment shader, câmp Σ r²/d², randat la jumătate de rezoluție
Nouă picături de ceară se încălzesc jos, urcă, se răcesc sus și coboară din nou. Când se apropie, se lipesc una de alta. Gravitația urmează telefonul: îl înclini și lampa „cade” în partea aceea. Scuturi și picăturile se împrăștie. Shaderul desenează la jumătate de rezoluție, iar browserul mărește imaginea; la forme moi nu se vede diferența.
Râuri de scântei
Curl-noise flow field · WebGL2 transform feedback, particule pe GPU + urme
Zeci de mii de scântei curg pe niște râuri invizibile care se schimbă încet. Râurile vin din „curl noise”: un câmp de curgere fără scurgeri, deci scânteile se rotesc, dar nu se adună grămadă. Placa video mută toate particulele dintr-un singur apel; procesorul trimite doar câteva numere pe cadru. Înclinarea bate ca un vânt, scuturarea le aruncă din centru, derularea le împinge.
Cerneală topită
Stable fluids · advecție + vorticitate + presiune Jacobi, texturi half-float
Un fluid adevărat, simulat pe placa video. Cerneala grea cade spre partea în care înclini telefonul, un izvor fierbinte o împinge înapoi, iar degetul (sau mouse-ul) o amestecă. Scuturi și țâșnește cerneală nouă. Simularea rulează pe o grilă foarte mică (64 de pixeli pe latura scurtă, pe telefon); doar culoarea are rezoluție mai mare.
Lupa de sticlă
Refraction shader · lentilă emisferică, aberație cromatică, Fresnel, 3 citiri de textură/pixel
O lentilă de sticlă caldă alunecă peste titlu. Înclini telefonul și ea se rostogolește, ca o bilă; pe calculator urmează mouse-ul. Mijlocul mărește, marginea îndoaie liniile și desparte puțin roșul de albastru, ca o lentilă reală. Scuturi și sticla tremură. Titlul e desenat o singură dată într-o textură; când lupa stă pe loc, nu se mai desenează nimic.
Site-ul care se mișcă