lucsal.it, com’è fatto: un portfolio che si muove come un cartone animato

lucsal.it è il portfolio di Luca Salvemini, uno sviluppatore web che lavora a Brescia e promette, con tre adesivi storti accanto al titolo, siti fatti a mano e senza template. Il sito è nero e crema, con quattro colori sparati: lime, rosa, blu e verde. I titoli sono in un grottesco nero corsivo, il testo in un sans rotondo, e ovunque ci sono adesivi.

La cosa che lo distingue è il carattere del movimento. Quasi niente scivola e basta: le cose si schiacciano, rimbalzano, pesano, si possono prendere in mano. È la fisica dei cartoni animati applicata a un sito.

Sotto non c’è un framework: una pagina sola in HTML, CSS e un file di JavaScript di 36 KB. Il lavoro lo fanno GSAP 3.13 con ScrollTrigger, SplitText, Draggable e Inertia, Lenis per lo scorrimento morbido e Matter.js per la fisica.

Qui lo smontiamo in tre momenti. Per ognuno c’è una demo rifatta da zero con grafica nostra: dal sito abbiamo preso l’idea e il ritmo, mai il codice o le immagini.

La stella che esplode e le lettere che saltano

Il sito si apre con una stella a otto punte fatta di sei stelle una dentro l’altra, una per colore, più una stellina crema al centro. Gli strati crescono da zero girando di quarantacinque gradi, si attorcigliano, poi la stella esplode: si ingrandisce di sedici volte girando, riempie lo schermo e il sipario si dissolve. Da sotto salgono le lettere del titolo, arriva la barra in alto, gli adesivi entrano con uno schiaffo e sotto il titolo compaiono due occhioni.

Il titolo è la parte migliore. Passando col mouse sopra una lettera, questa fa il salto dei cartoni: si schiaccia e si allarga, sale di un quinto della sua altezza, si inclina fino a dodici gradi e prende un colore a caso della tavolozza; poi ricade con una curva elastica e torna crema. Le due lettere vicine per lato si alzano appena, cinquanta e cento millesimi dopo, come un’onda.

La nostra versione funziona anche col dito. Nel sito il salto risponde solo al mouse; da noi basta strisciare di lato sul titolo, e la lettera sotto il dito salta. Il trucco è cercarla con elementFromPoint a ogni movimento, perché sui telefoni il tocco resta attaccato al primo elemento toccato.

Gli attrezzi che cadono

Nella sezione del metodo c’è una cassetta color crema. Quando entra nello schermo, diciassette pillole con i nomi degli strumenti che l’autore usa ogni giorno cadono dall’alto, rimbalzano sul fondo e si ammucchiano storte. Si prendono col mouse o col dito e si lanciano. È Matter.js: ogni pillola ha un corpo invisibile con la stessa forma, e a ogni fotogramma la pillola ne copia posizione e rotazione.

Un dettaglio da mestiere: l’inerzia di ogni corpo è moltiplicata per due e mezzo. Le pillole si inclinano ma si capovolgono di rado, così restano leggibili anche in un mucchio.

Da noi gli attrezzi sono le parole dell’animazione (easing, stagger, scrub, morph) e abbiamo aggiunto un pulsante che scuote la cassetta. La fisica avanza a passi fissi di un sessantesimo di secondo, indipendenti dai fotogrammi, e si ferma quando la cassetta esce dallo schermo.

Le carte che si impilano

Il metodo è raccontato da quattro carte colorate: lime, rosa, blu e verde. Sono carte sticky, ognuna si ferma sedici pixel più in basso della precedente. Mentre la carta dopo sale, quella sotto rimpicciolisce a 0,93, si storce di un grado e mezzo e si scurisce, come un foglio che finisce sotto la pila. Quando una carta arriva, la sua illustrazione si anima: fumetti che scoppiano, una matita che traccia un’interfaccia, righe di codice che si scrivono, una stella con la scritta «online».

Nel codice c’è una precauzione che vale la pena copiare: i trigger non sono agganciati alle carte, ma a un elemento alto zero messo prima di ognuna. Una carta sticky cambia posizione mentre è ferma, e i calcoli basati su di lei sbaglierebbero.

Le nostre carte raccontano come nasce un’animazione e hanno disegni a tratto che si tracciano da soli: ogni linea parte nascosta dal suo stroke-dashoffset e si disegna quando la carta arriva al suo posto.

Gli altri dettagli

Il resto del sito è pieno di personaggi. Il cursore è un guanto da cartone animato che punta: si inclina con la velocità, cresce sugli elementi cliccabili e si schiaccia al clic, e compare solo con un mouse vero. Gli occhioni sotto il titolo seguono il puntatore e sbattono le palpebre a caso, ogni due-sei secondi; sul telefono si guardano intorno da soli.

I numeri dell’introduzione arrivano come adesivi schiaffati sul tavolo e contano da zero. I progetti sono un elenco di nomi giganti: col mouse, una bolla rotonda con l’anteprima del sito segue il puntatore. Due nastri di pillole colorate accelerano quando scorri e ogni pillola si gira su sé stessa al passaggio. Nei contatti una macchina da scrivere scrive una frase, aspetta, la cancella e ne scrive un’altra, mai la stessa due volte di fila; accanto, una pila di adesivi si trascina e si lancia anche col dito.

Dove inciampa

Il caricamento dura circa tre secondi e torna a ogni visita, anche ricaricando la pagina. La prima volta è una presentazione, la quinta è un’attesa: basterebbe ricordarsi che l’hai già visto.

La pagina vera è leggera: al primo caricamento HTML, stili, script, immagini e caratteri pesano circa 330 KB. Però i servizi hanno tre video che partono da soli, circa venti megabyte in tutto, e il browser li comincia a scaricare subito. Nelle prove, nei primi dieci secondi e senza scorrere, la pagina ha già scaricato quasi tre megabyte di video. I caratteri arrivano da Google Fonts: in Europa è meglio servirli dal proprio dominio.

Sul telefono si perde qualcosa. La bolla con le anteprime dei progetti esiste solo col mouse, quindi la vetrina dei lavori diventa un elenco di nomi senza immagini. Le lettere del titolo non saltano. E la pila di adesivi dei contatti, pensata per uno schermo largo, diventa un mucchio stretto dove gli adesivi si coprono a vicenda.

Cosa ci portiamo via

La lezione è il carattere. Ogni gesto qui segue i principi dei cartoni animati: schiacciamento e allungamento, rimbalzo oltre il punto d’arrivo, peso, inerzia. Messi insieme danno a un sito una personalità che si ricorda. E bastano trucchi piccoli, un colore o un’inclinazione a caso, perché la stessa interazione non sia mai identica due volte.