Poate ai observat vopseaua. Pe fiecare margine de cerneală de pe site cresc picături care se umplu, se îngreunează, se întind într-un fir și se desprind, la fel și pe fiecare logo din banda cu brandurile pentru care lucrăm. Picăturile cad pe ce e sub ele (o poză, un card, un buton) și se fac fleașcă. Pe o suprafață plată stau pe loc. Pe una înclinată alunecă, trec peste margine, se scurg pe lateral și picură mai departe. Totul ajunge într-o baltă deasupra footerului, care tot crește cât timp stai pe pagină.
Logoul nostru e o picătură, așa că și site-ul trebuia să picure. Nu un video pus pe repeat: vopsea adevărată, calculată live în browserul tău. L-am construit cu Claude Code, cum te-ai aștepta de la o agenție care și-a scris AI-ul pe firmă. Să punem picături pe ecran a fost partea ușoară. Să le facem destul de bune încât să le lăsăm să ruleze pe un site live a fost munca adevărată, și despre asta e nota de față.
Vopsea care știe unde e
Fiecare picătură e o mică jucărie de fizică. Vopseaua se adună jos, în burta picăturii, care se îngreunează și, cu cât e mai grea, cu atât se scurge mai repede, până se subțiază la gât și se desprinde. O picătură în cădere citește conturul real al lucrului pe care îl lovește, cu tot cu colțuri rotunjite și poze înclinate, așa că vopseaua de pe un buton rotund îmbrățișează butonul. Simte și pagina. Dă scroll brusc și picăturile care atârnă se scutură și cad. Treci cu mouse-ul peste un logo de pe pagina principală și se ridică, iar vopseaua de pe el se ridică odată cu el.
Înainte să aibă voie pe site-ul live, totul trebuia să respecte patru reguli:
- Niciodată în cale. Nu are voie să blocheze un click, să acopere text sau să încetinească pagina.
- Stă cuminte când i se cere. Dacă dispozitivul tău cere mișcare redusă sau JavaScript e oprit, primești pagina în repaus, cu picăturile pictate pe ea.
- Culoare plină. Margini clare și același mic luciu ca logoul. Fără blur, fără degradeuri.
- Doarme când nu se mișcă nimic.
Unde s-a complicat treaba
Întâi, lucrurile rotunde. Majoritatea logourilor stau în butoane în formă de capsulă, iar vopselei îi place la nebunie să se strecoare pe capetele lor rotunjite. Fix acolo au început picăturile să facă țepi ascuțiți, de parcă le-ar fi tăiat cineva cu foarfeca. Codul care desena o picătură atârnată presupunea că suprafața de deasupra e plată. Pe fundul unei capsule, chiar e. Pe curbă, desena o pană în sus pe pantă și o fâșie de vopsea peste buton. Soluția a fost să lăsăm vopseaua să întâlnească curba reală pe ambele părți, cum ar atinge-o o bilă rostogolită între picătură și suprafață.
Apoi a venit partea în care aproape a topit browserul. Cu cât stăteai mai mult, cu atât pagina devenea mai grea. Vopseaua se strângea pe fiecare poză și card pe lângă care dădeai scroll, iar când treceai cu mouse-ul peste un logo, banda începea să sacadeze. Prima versiune urma o idee la care majoritatea developerilor ar da aprobator din cap: desenezi vopseaua pe multe canvasuri mici și redesenezi doar bucățile mici care se schimbă. S-a dovedit invers. Fiecare canvas îl costă ceva pe procesorul grafic doar pentru că există și e redesenat, oricât de mic ar fi, iar după o vizită lungă se ajungea la vreo 250. Mai puține canvasuri, dar mai mari, plus renunțarea la a picta ce nu vede nimeni, le-au redus la vreo 80. Într-un test care dă scroll prin toată pagina și trece peste o duzină de logouri, munca procesorului grafic a scăzut cu 39%, iar sacadările lungi au scăzut de la unsprezece la una.
Și măsurătoarea a avut capcana ei. Prima citire spunea că pagina pierde 19 cadre pe secundă. Nu pierdea. Picăturile rulează intenționat la 60 de cadre pe secundă, pe un ecran care se reîmprospătează de 120 de ori pe secundă, iar browserul a numărat fiecare cadru sărit ca pe un eșec. Puteam pierde lejer o zi optimizând după cifra aia. Verifică ce înseamnă o cifră înainte să alergi după ea.
Un site poate avea personalitate și să fie totuși rapid. Șmecheria e să tratezi partea jucăușă cu aceeași disciplină ca pe cele plictisitoare: o testezi într-un browser adevărat, îi respecți pe cei care nu vor animații și o ții departe de ce a venit vizitatorul să facă.
Vrei și tu un site care să pară un pic mai viu?