Quando togliere un effetto: da three.js a una griglia di punti in CSS

Nella hero di questo sito per qualche giorno c’è stato un reticolo 3D: 216 nodi collegati da linee che, scorrendo, passavano da una sfera a tre livelli sovrapposti e poi a una griglia di sensori. Era costruito con three.js, ruotava piano e seguiva il mouse. Sulla carta era giusto per il tema (IoT, API, dati). In pratica non funzionava, e l’ho tolto.

Cosa non andava

• Troppi strati in competizione. Dietro il ritratto c’erano già gli anelli orbitali, l’alone lime e le parentesi di rilevamento sul viso. Il reticolo aggiungeva un quarto elemento circolare e l’occhio non sapeva dove fermarsi.
• Troppo contrasto e troppo movimento. Linee e punti nel colore d’accento pieno ruotavano di continuo in una pagina altrimenti calma e tipografica.
• Passava dietro il testo. Nelle sezioni successive le linee attraversavano i paragrafi e riducevano la leggibilità.
• Su mobile era troppo luminoso. All’inizio della pagina occupava buona parte dello schermo e illuminava tutto.

Il costo tecnico

three.js viveva in un file separato, caricato dopo il primo rendering: circa 133 KB compressi, contro i circa 75 KB del bundle principale. Essendo caricato in lazy non rallentava la prima vista, ma pesava comunque e teneva attivo un ciclo di rendering continuo.

Cosa c’è al suo posto

Una griglia di punti da 1 px, in CSS, visibile solo attorno al ritratto grazie a una maschera radiale. Ogni 11 secondi circa una fascia di punti nel colore d’accento la attraversa dall’alto in basso, come una scansione, e richiama le parentesi di rilevamento e la linea del battito. In più una parallasse leggera, con il mouse e con lo scroll, a profondità diverse: la griglia è la più lontana, gli anelli stanno in mezzo, il ritratto è il più vicino.

Sono poche decine di righe di CSS e un piccolo gestore del mouse. Con «riduci movimento» attivo la scansione sparisce e la griglia resta ferma.

Cosa mi porto via

• Un effetto decorativo va giudicato come il resto della pagina: ha un costo (byte, CPU, attenzione) e deve rafforzare un’idea già presente, non aggiungerne una nuova.
• Se serve spiegare perché c’è, probabilmente è troppo.
• Si misura anche sul telefono: la stessa intensità che sul desktop è una finezza, su mobile diventa rumore.
• Togliere è una modifica di design come le altre. Il codice cancellato non va conservato per affetto.