Forse hai notato la vernice. Su ogni bordo d’inchiostro di questo sito crescono colature che si riempiono, si appesantiscono, si allungano in un filo e si staccano, e lo stesso succede a ogni logo nella striscia dei brand per cui lavoriamo. Le gocce cadono su qualunque cosa ci sia sotto (una foto, una card, un pulsante) e fanno splat. Su un piano orizzontale restano ferme. Su uno inclinato scivolano, traboccano dal bordo, colano lungo il lato e continuano a gocciolare. Tutto finisce in una pozza sopra il footer, che continua a salire finché resti.
Il nostro logo è una colatura, quindi il sito doveva colare. Non un video in loop: vernice vera, calcolata in diretta nel tuo browser. L’abbiamo costruito con Claude Code, come ti aspetteresti da un’agenzia che mette l’AI sull’insegna. Mettere le colature a schermo è stata la parte facile. Il vero lavoro è stato renderle abbastanza buone da lasciarle girare su un sito online, ed è di questo che parla questa nota.
Vernice che sa dove si trova
Ogni colatura è un piccolo giocattolo di fisica. La vernice si raccoglie nel bulbo, il bulbo si appesantisce, e più pesa più la colatura scende veloce, finché si strozza e si stacca. Una goccia che cade legge il contorno reale di ciò che colpisce, angoli arrotondati e foto inclinate compresi, così la vernice su un pulsante tondo abbraccia il pulsante. E sente anche la pagina. Dai uno scatto mentre scrolli e le gocce appese si staccano. Passa sopra un logo nella home e si solleva, e la vernice si solleva con lui.
Prima di arrivare sul sito online, doveva rispettare quattro regole:
- Mai tra i piedi. Non può bloccare un clic, coprire il testo o rallentare la pagina.
- Ferma, se lo chiedi. Se il tuo dispositivo chiede movimento ridotto, o JavaScript è disattivato, vedi la pagina a riposo con le colature dipinte sopra.
- Vernice piatta. Bordi netti e lo stesso piccolo riflesso del logo. Niente sfocature, niente sfumature.
- Dorme quando niente si muove.
Dove le cose si sono complicate
Prima di tutto, le cose rotonde. Quasi tutti quei loghi stanno in pulsanti a pillola, e la vernice adora insinuarsi attorno alle loro estremità tonde. È proprio lì che sulle colature hanno cominciato a spuntare punte aguzze, come se qualcuno le avesse rifilate con le forbici. Il codice che disegnava una goccia appesa dava per scontato che la superficie sopra fosse piatta. Sul fondo di una pillola lo è. Sulla curva, invece, disegnava un cuneo su per il pendio e una scheggia di vernice sopra il pulsante stesso. La soluzione è stata far incontrare alla vernice la curva reale da entrambi i lati, come farebbe una pallina fatta rotolare tra la goccia e la superficie, toccandole tutte e due.
Poi è arrivata la parte in cui ha quasi fuso il browser. Più restavi, più la pagina diventava pesante. La vernice si accumulava su ogni foto e card che scrollavi, e passare sopra un logo faceva scattare la striscia. La prima versione seguiva un’idea che quasi ogni sviluppatore approverebbe a occhi chiusi: disegnare la vernice su tanti piccoli canvas e ridisegnare solo i pezzetti che cambiano. Era l’esatto contrario di quello che serviva. Ogni canvas costa qualcosa al chip grafico solo per il fatto di esistere e di essere ridisegnato, per quanto piccolo sia, e dopo una visita lunga ce n’erano circa 250. Meno canvas, più grandi, e niente pittura dove nessuno può vederla: così sono scesi a circa 80. In un test che scrolla tutta la pagina e passa sopra una dozzina di loghi, il lavoro grafico è calato del 39% e gli scatti lunghi sono passati da undici a uno.
Anche misurare aveva la sua trappola. La prima lettura diceva che la pagina perdeva 19 fotogrammi al secondo. Non era vero. Le colature girano a 60 fotogrammi al secondo apposta, su uno schermo che si aggiorna 120 volte al secondo, e il browser contava come errore ogni fotogramma che saltavamo. Avremmo potuto benissimo passare una giornata a ottimizzare per abbassare quel numero. Prima di inseguire un numero, controlla cosa significa.
Un sito può avere personalità ed essere comunque veloce. Il trucco è trattare la parte giocosa con la stessa disciplina delle parti noiose: testarla in un browser vero, rispettare chi non vuole animazioni e tenerla lontana da quello che chi visita è venuto a fare.
Vuoi che anche il tuo sito sembri un po’ più vivo?