Il rilievo a trattini

Un disegno fatto di migliaia di trattini, come un’incisione ma in rilievo: cambia forma volando in una nuvola di polvere, gira quando lo trascini e si gonfia se lo lanci.

WebGL, 3D, HoverWebGL, Canvas, GSAPImpegnativaA vita

Il codice

Una cartella che funziona da sola: index.html, style.css, script.js e le librerie da CDN.

/* Il rilievo a trattini
   Un disegno fatto di decine di migliaia di trattini orizzontali, come un'incisione, ma in rilievo:
   le parti chiare stanno più avanti delle scure. Passando sui quattro angoli ogni trattino vola dalla
   forma di prima a quella nuova, ognuno con il suo ritardo e con una curva sua, e per un momento il
   disegno è una nuvola di polvere. Trascinandolo il rilievo gira, e visto di taglio è un foglio sottile;
   lanciato forte si gonfia un poco. Il mouse, passando, spinge via i trattini vicini.
   I disegni nascono in una tela 2D in toni di grigio e diventano trattini con un dither ordinato
   (la matrice di Bayer 4x4): più un punto è chiaro, più è facile che lì ci sia un trattino.
   Un solo triangolo di quattro vertici, ripetuto per ogni trattino (drawArraysInstanced). */

/* ---- valori da cambiare ---- */
const TOCCO = matchMedia('(hover: none), (pointer: coarse)').matches;
const COLONNE = TOCCO ? 112 : 168;   /* celle del disegno in larghezza (le righe sono 5/4) */
const TRASFORMA = 1.15;              /* secondi di un cambio di forma */
const SFASA = 0.45;                  /* quanto partono sfasati i trattini (0 = tutti insieme) */
const VIAGGIO = 1;                   /* quanto i trattini curvano lontano dalla strada dritta */
const RILIEVO = 42;                  /* profondità del rilievo, in unità del disegno */
const LARGO = 1.5;                   /* spessore di un trattino, in pixel */
const RAMPA = ['#1B5C54', '#2E8F80', '#FF8A3D', '#FFBF80', '#FFF3E0']; /* dal tono più basso al più alto */

const RIDOTTO = matchMedia('(prefers-reduced-motion: reduce)').matches;
const DENTRO = window.self !== window.top;
const MOUSE = matchMedia('(hover: hover) and (pointer: fine)').matches;
const palco = document.querySelector('[data-palco]');
const tela = document.querySelector('[data-tela]');
const bottoni = [...document.querySelectorAll('[data-forma]')];

Il codice di questa animazione è nell’accesso a vita.

L’anteprima resta libera: guardala, rallentala, provala sul telefono.

Accesso a vita

Cosa fa

Al centro c’è un disegno, per esempio una sfera, fatto solo di trattini orizzontali: dove è chiaro i trattini sono fitti e stanno più avanti, dove è scuro sono radi e più indietro. Passando su uno dei quattro nomi agli angoli ogni trattino parte per conto suo verso il posto che ha nel disegno nuovo, curvando di lato e in profondità: a metà strada il disegno è una nuvola, poi si ricompone. Trascinandolo il rilievo gira (visto di taglio è un foglio sottile), lanciandolo continua a girare e si gonfia un poco; il mouse, passando, scosta i trattini vicini.

Come funziona

Dal grigio ai trattini

Ogni disegno nasce in una tela 2D piccola, 168 x 210 celle, in toni di grigio. Per ogni cella si guarda quanto è chiara e se sta su un bordo; se il valore supera la soglia della matrice di Bayer 4 x 4 di quella cella, lì nasce un trattino orizzontale lungo il 72% della cella. La profondità viene dallo stesso valore: le parti chiare stanno fino a 42 unità più avanti.

Un quadrilatero ripetuto

I trattini sono un solo quadrilatero di quattro vertici disegnato migliaia di volte con drawArraysInstanced. Ogni copia porta con sé dove comincia e finisce nella forma di partenza e in quella d’arrivo, il tono, un seme a caso e la curva del viaggio: lo shader fa tutto il resto, giro e prospettiva compresi.

Il cambio di forma

Un solo numero va da 0 a 1 in 1,15 secondi (power2.inOut), ma ogni trattino lo legge sfasato del suo seme: t = uMix × 1,45 − seme × 0,45. A metà del suo tragitto si allontana dalla linea dritta di un arco, sin(π t), di lato e in profondità. I trattini vivi prendono i posti nuovi a caso; quelli in più si stringono fino a un punto.

Girare, lanciare, gonfiare

Trascinando, la rotazione cresce di 0,0075 radianti per pixel e l’inclinazione di 0,005; lasciando, la velocità perde e^(−2,6 × dt) e l’inclinazione torna al suo posto in 0,9 secondi. Da fermo oscilla piano (sin(t × 0,32) × 0,2). Più gira in fretta, più ogni trattino si allontana dal centro, fino al 32% in più.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`COLONNE`	script.js	`168 (112 al tocco)`	Celle del disegno in larghezza: più alto, trattini più fini e più numerosi.
`TRASFORMA`	script.js	`1.15`	Secondi di un cambio di forma.
`SFASA`	script.js	`0.45`	Quanto partono sfasati i trattini. Con 0 partono tutti insieme.
`RILIEVO`	script.js	`42`	Profondità del rilievo, in unità del disegno (che è largo 380).
`RAMPA`	script.js	`5 colori`	I colori dal tono più basso al più alto: tutto il disegno si ricolora cambiando questa lista.

Quando usarla

Per un ritratto, un logo o un oggetto nella prima schermata di un portfolio: lo stesso disegno diventa materia, e cambiarlo è un gesto che si ricorda.

Sul telefono

Meno celle (112 x 140) e densità della tela al massimo 1,5. I nomi stanno in una griglia sotto il disegno e si toccano; il dito di lato gira il rilievo, in verticale resta alla pagina. Niente spinta del puntatore.

Con il movimento ridotto

Niente nuvola, niente oscillazione, niente inerzia e niente gonfiore: il disegno cambia di colpo e gira solo mentre lo trascini.

Trappole

Per cambiare forma a metà di un cambio, prima calcola dove si trova davvero ogni trattino (con la stessa formula dello shader) e usalo come nuova partenza: altrimenti il disegno salta.
I trattini che non servono non si cancellano: diventano lunghi zero e lo shader li scarta (discard). La lunghezza va misurata nel disegno, non sullo schermo: visto di taglio ogni trattino è cortissimo, e scartandolo sparirebbe tutto il rilievo.
Lo spessore di un trattino è una frazione di pixel: il bordo va sfumato nel frammento (copertura), altrimenti metà dei trattini sparisce a seconda di dove cadono.
Nell’iframe al telefono il dito in verticale deve restare alla pagina: touch-action: pan-y e rotazione solo di lato.

Librerie

GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.

Peso: 27 KB dei nostri file.

Collaudo

Provata il 27 settembre 2026

Computer: Fatto
Telefono: Fatto
Movimento ridotto: Fatto
Safari su iPhone: Fatto

Licenza d’uso

Puoi usarla nei tuoi progetti e in quelli dei tuoi clienti. Non puoi rivenderla né ridistribuirla così com’è. GSAP resta sotto la sua licenza Standard. Licenza completa.

Della stessa famiglia

L’inchiostro che scopre

WebGL, Hover

NuovaA vita

La luce radente