La parola di vetro
WebGL, 3D, Scroll, Testo
Gratis
Torna alla libreria
Le parole da un punto di vista
Un’anamorfosi in 3D, nello stile minimal: migliaia di fili neri sottili sospesi nello spazio sembrano pioggia da ogni parte, tranne che da tre punti. Da ognuno di quei punti i fili si allineano e si legge una parola: Seen, from, here. La camera gira intorno alla nuvola, sale un poco fra un punto e l’altro, supera il punto di un capello e si posa: la pioggia scatta in una parola che si riempie d’inchiostro da sinistra a destra. Si può anche girarle intorno trascinando.
Il codice
Una cartella che funziona da sola: index.html, style.css, script.js e le librerie da CDN. Nelle schede React e Vue la stessa demo è già un componente, che spegne le sue animazioni quando esce dalla pagina.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Seen from here</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
<script type="importmap">
{ "imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.178.0/build/three.module.min.js"
} }
</script>
</head>
<body>
<!-- an anamorphosis: thousands of thin threads hang in space and look like rain from everywhere but three points.
From each of those points the threads line up into one word. The camera goes round the cloud and stops on
each point; drag to look round it yourself. The script cuts the words into threads and places them in 3D -->
<main class="stage" data-stage>
<canvas class="canvas" data-canvas aria-hidden="true"></canvas>
<h1 class="sr" data-sr>Seen from here</h1>
<div class="dial" aria-hidden="true">
<svg class="dial__face" viewBox="-20 -20 40 40" data-dial>
<circle class="dial__ring" r="15" />
<g data-ticks></g>
<line class="dial__needle" x1="0" y1="0" x2="0" y2="-15" data-needle />
</svg>
<span class="dial__angle" data-angle>0°</span>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script type="module" src="script.js"></script>
</body>
</html>Playground
Cambia valori, colori e testi con le manopole e guarda l’animazione rispondere dal vivo. Oppure scrivi tu nel codice. Poi scarica la cartella con le tue modifiche.
17 valori da cambiare
Oppure chiedila a Claude Code
Col connettore di Animorio, Claude Code la prende da qui con tutta la sua guida e la adatta al tuo progetto. Incolla questa richiesta:
Prendi «Le parole da un punto di vista» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco caldo, dal nulla, crescono migliaia di trattini neri sottili, sospesi a profondità diverse: guardati dall’alto sembrano una pioggia ferma nell’aria. La camera scende e gira intorno alla nuvola; man mano che si avvicina al primo punto i trattini si avvicinano fra loro, finché la camera lo supera di un capello, torna indietro e si posa: in quell’istante i fili si allineano in righe orizzontali e si legge «Seen», tratteggiata come un’incisione. La parola si riempie d’inchiostro da sinistra a destra, le righe si fanno un poco più spesse e il resto della nuvola sbiadisce. Resta ferma, poi si scioglie e la camera riparte, sale sopra la nuvola, gira di un terzo e si posa sul punto dopo: «from». Poi «here». Intanto i fili respirano: scivolano piano avanti e indietro lungo la loro linea di vista, così la nuvola è viva mentre la parola, vista dal suo punto, resta perfettamente immobile. Dopo l’ultima parola la camera risale e i fili si ritirano nel nulla, e tutto ricomincia. In basso un quadrante piccolo con l’ago vermiglio dice da che angolo si guarda; la tacca del punto su cui si sta si accende. Col mouse la camera si sposta di poco seguendo il puntatore, e la parola si incrina; trascinando si gira intorno alla nuvola come si vuole, e lasciando la camera si posa con una molla sulla parola più vicina.
Come funziona
Le parole tagliate in fili
Ogni parola si scrive in nero su un canvas nascosto, a 300 pixel, e si legge riga per riga: ROWS righe per l’altezza di una maiuscola, partendo dalla linea di base, così tutte le parole hanno le righe negli stessi posti. Dove la riga attraversa l’inchiostro nasce un tratto; ogni tratto si taglia in pezzi di lunghezza a caso, i fili, che combaciano esattamente l’uno con l’altro. Tutte le parole stanno sullo stesso piano, quello che passa per il centro della nuvola, con la stessa scala.
L’anamorfosi
Ogni parola ha il suo punto di vista, su un cerchio intorno al centro (360 gradi diviso il numero di parole). Ogni filo si sposta lungo il raggio che va dal punto di vista al filo, più vicino o più lontano di un fattore a caso (fra 1 - SPREAD e 1 + SPREAD), e si rimpicciolisce o si ingrandisce dello stesso fattore: dalla camera messa esattamente in quel punto la proiezione non cambia, quindi la parola si legge intatta; da qualunque altro punto i fili sono sparsi in una nuvola profonda. Un segmento proiettato resta un segmento, per questo i fili restano dritti e combaciano.
Fili in uno shader
Tutti i fili sono una mesh sola di Three.js con l’instancing: un rettangolo di quattro vertici ripetuto una volta per filo, con i suoi dati (inizio e fine sul piano, fattore di profondità, fase, parola, posizione nella parola). Il vertex shader calcola la posizione nello spazio, proietta i due capi, e allarga il rettangolo di WIDTH pixel di schermo perpendicolarmente al filo, quindi le linee hanno lo stesso spessore a ogni distanza; il fragment shader smussa i bordi a mano. I fili lontani schiariscono. Il respiro è un seno sul fattore di profondità: sposta i fili lungo la loro linea di vista e dal punto giusto non si vede.
La camera
La camera sta su una sfera intorno al centro e guarda sempre lì. Fra un punto e l’altro una timeline GSAP porta l’angolo oltre il punto di OVERSHOOT gradi con power3.inOut, e intanto la fa salire di RISE gradi e riscendere; poi la riporta indietro sul punto esatto in 0,7 secondi. Un attimo prima che si fermi la parola si accende: uno sweep da sinistra a destra nello shader rende pieni i fili già passati, li ingrossa e toglie loro lo sbiadimento della distanza, mentre le altre parole scendono al 10 per cento.
La mano
Il giro è una timeline che si ripete. Premendo si ferma, le parole tornano neutre e il trascinamento muove l’angolo e l’altezza; lasciando si calcola dove porterebbe il lancio, si sceglie il punto più vicino e la camera ci arriva con back.out. La parola si accende come nel giro e la timeline riparte dal momento in cui quella parola è piena, con seek: i valori combaciano e non si vede il salto. Col mouse, senza premere, la camera segue il puntatore di poco più di due gradi.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORDS | script.js | ['Seen', 'from', 'here'] | Una parola per ogni punto di vista, da 1 a 4: meglio corte e di lunghezza simile. |
SPREAD | script.js | 0.45 | Quanto è profonda la nuvola: 0 è una pagina piatta, 0.7 una nuvola molto profonda. |
ROWS | script.js | 44 | Quante righe di tratteggio per l’altezza di una maiuscola: più righe, parola più piena e più fili. |
TRAVEL | script.js | 3.0 | Quanti secondi impiega la camera da un punto di vista al successivo. |
HOLD | script.js | 1.6 | Quanti secondi la camera resta ferma su una parola. |
RISE | script.js | 16 | Di quanti gradi sale la camera a metà strada fra due punti, per far vedere la nuvola dall’alto. |
OVERSHOOT | script.js | 1.4 | Di quanti gradi la camera supera il punto prima di tornare indietro e posarsi. |
BREATH | script.js | 0.05 | Quanto respirano i fili lungo la loro linea di vista: dal punto giusto non si vede, da fuori sì. |
WIDTH | script.js | 1.4 | Lo spessore di un filo, in pixel. |
Quando usarla
Per l’apertura di una mostra d’arte o di design, di uno studio di architettura, di un fotografo o di un’agenzia che parla di punti di vista; per una campagna che dice «guarda meglio»; per il sito di un evento in uno spazio da attraversare. Funziona con due, tre o quattro parole, anche una frase spezzata.
Sul telefono
La stessa animazione con le misure adattate: la parola prende quasi tutta la larghezza, la camera ha un angolo più largo e i fili si fanno più sottili quando le righe si stringono. Col dito si trascina intorno alla nuvola come col mouse.
Con il movimento ridotto
La camera non si muove e i fili non respirano: si vede una parola alla volta, già composta e piena d’inchiostro, che sfuma nella successiva. Un clic ricomincia.
Trappole
- Le linee di WebGL sono sempre spesse un pixel del dispositivo (mezzo pixel su uno schermo retina) e senza bordi morbidi: ogni filo è un rettangolo allargato nel vertex shader di WIDTH pixel di schermo, con mezzo pixel in più a ogni capo perché due fili vicini non lascino una fessura, e il bordo smussato nel fragment shader.
- Riprendendo il giro dopo un trascinamento con seek al momento in cui la parola si accende, la camera stava ancora tornando dall’overshoot e saltava di un grado e mezzo: ora la parola si accende fuori dalla timeline, come nel giro, e la timeline riparte dal momento in cui la parola è già piena, dove tutti i valori sono uguali.
- Sul telefono le righe del tratteggio sono a due o tre pixel l’una dall’altra e con lo stesso spessore del computer diventavano una macchia: lo spessore si calcola a ogni ridimensionamento dalla distanza fra le righe sullo schermo.
- La nuvola nasce da un generatore di numeri a caso col suo seme, così è la stessa ogni volta che si apre la pagina, e il poster e il video combaciano con la demo.
- Il carattere si aspetta con document.fonts.load prima di tagliare le parole: con quello di riserva i fili disegnavano un altro carattere.
Librerie
Three.js 0.178.0, GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,2 KB; le librerie: GSAP 28 KB, Three.js 174 KB.
Collaudo
Provata il 16 ottobre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Da fare
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.
