L’inchiostro che scopre
WebGL, Hover
Gratis
Torna alla libreria
La parola di particelle
Animazione WebGL nello stile minimal: una parola grande fatta di qualche migliaio di puntini d’inchiostro su un bianco caldo. Arrivano da una nuvola sparsa e si posano sulla parola; il puntatore li soffia via e loro tornano al loro posto su una molla, e quelli portati più lontano si accendono per un attimo di vermiglio.
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>Flock</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a word made of a few thousand specks of ink, drawn by WebGL in one draw call: they fly in from a loose cloud
and settle on the word; the pointer blows them aside like a breath, and they spring back to their place -->
<main class="pagina" data-pagina>
<canvas class="tela" aria-hidden="true" data-tela></canvas>
<header class="testa">
<p class="marchio" data-entra>Flock</p>
<p class="testa__nota" data-entra>A motion studio</p>
</header>
<h1 class="parola" data-parola>Flock</h1>
<p class="nota" data-entra data-nota>Move through the word, click to scatter</p>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script 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 «La parola di particelle» da Animorio e adattala al mio sitoCosa fa
Una pagina bianco caldo con poche scritte piccole: in alto a sinistra il nome di uno studio di animazione inventato, Flock, a destra «A motion studio», in basso l’invito a passare sulla parola. All’apertura qualche migliaio di puntini d’inchiostro, minuscoli e tondi, galleggiano in una nuvola larga quasi quanto lo schermo; poi, da sinistra a destra e con un po’ di disordine, ognuno parte verso il suo posto e la parola «Flock» si compone lettera dopo lettera, in un Archivo pieno, con i puntini che arrivano su una molla misurata e si posano con un piccolo overshoot. A parola composta il puntatore diventa un soffio: i puntini vicini si aprono intorno a lui lasciando un buco nella parola e, appena il puntatore passa oltre, tornano al loro posto oscillando appena; più il puntatore corre, più largo e forte è il soffio. I puntini portati più lontano dal loro posto si accendono di vermiglio, l’unico colore, e tornano d’inchiostro mentre si posano. Un clic o un tocco li sparpaglia tutti in ogni direzione e la parola si ricompone da sola. Quando nessuno muove il puntatore, un puntatore invisibile passa sopra la parola disegnando un otto, in un giro che torna uguale ogni dieci secondi.
Come funziona
La parola in un canvas nascosto
La parola si scrive in un canvas grande quanto la pagina, mai mostrato, con il corpo che la fa stare nell’80% della larghezza (88% sul telefono) e nel 42% dell’altezza. getImageData dà i pixel pieni: contandoli si trova il passo di una griglia che dà circa COUNT puntini su ogni schermo, e ogni punto della griglia, spostato un poco a caso, diventa un puntino se cade su un pixel pieno. Il caso ha un seme fisso, così la grana è sempre la stessa.
Le molle e il soffio
Ogni puntino ha la sua casa, la sua posizione e la sua velocità in Float32Array. A ogni fotogramma, in sottopassi di 1/120 di secondo, una molla lo tira verso casa (SPRING) e lo frena (DAMPING); il puntatore lo spinge via con una forza che cala col quadrato della distanza dentro un raggio che si allarga con la velocità del puntatore. Prima di partire, i puntini della nuvola galleggiano appena.
L’arrivo sfalsato
Ogni puntino ha un ritardo fra 0 e 1, fatto per due terzi dalla sua posizione orizzontale e per un terzo dal caso; un solo numero, animato da GSAP da 0 a 2 in due volte ARRIVAL, dice chi è già partito. Il soffio si accende solo quando il numero passa 1,4, cioè a parola composta.
Un solo disegno in WebGL
Tutti i puntini sono un unico buffer di tre numeri ciascuno (x, y e quanto è caldo) disegnato con gl.POINTS: il vertex shader passa da pixel a coordinate dello schermo e il fragment shader ritaglia un tondo e mescola l’inchiostro con l’accento secondo il caldo. Il caldo sale con la distanza da casa e scende in modo esponenziale. Senza WebGL gli stessi puntini si disegnano in un canvas 2D in due passate.
Il puntatore finto e il resto
Una timeline GSAP con repeat -1 porta un numero da 0 a 1 in dieci secondi: è la posizione su un otto disegnato sopra la parola, che fa da puntatore quando quello vero è fermo da più di 2,4 secondi. Un clic, un tocco, Invio o lo spazio danno a ogni puntino una spinta in una direzione a caso. Al resize la parola si ricampiona e i puntini tengono la posizione di prima, così tornano a casa con la molla. Con il movimento ridotto la parola è già composta e ferma.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD | script.js | 'Flock' | La parola fatta di puntini: corta, sta in una riga. |
COUNT | script.js | 6000 | Quanti puntini, più o meno (sul telefono poco più della metà). |
DOT | script.js | 2 | Il diametro di un puntino, in px. |
WEIGHT | script.js | 820 | Il peso della parola: Archivo va da 100 a 900, più pieno vuol dire più puntini nelle aste. |
PUSH | script.js | 1 | Quanto soffia il puntatore (0 non soffia). |
REACH | script.js | 110 | Fin dove arriva il soffio, in px: si allarga se il puntatore corre. |
SPRING | script.js | 60 | Quanto è rigida la molla che riporta i puntini al loro posto. |
DAMPING | script.js | 9 | Quanto è frenata la molla: più bassa, più overshoot e oscillazioni. |
ARRIVAL | script.js | 2.4 | In quanti secondi la nuvola si posa sulla parola. |
Quando usarla
Come apertura di uno studio di animazione, di un’agenzia creativa o di un prodotto che parla di dati, di reti o di folle; come titolo di una conferenza o di un festival; ovunque una parola sola deve sembrare viva e reagire alla mano.
Sul telefono
Uguale col dito: trascinando si soffia, toccando si sparpaglia. La parola sta nell’88% della larghezza, i puntini sono poco più della metà e il soffio è un po’ più stretto.
Con il movimento ridotto
La parola è già composta e ferma, compare in dissolvenza; il puntatore e il clic non spostano niente.
Trappole
- Il corpo della parola va misurato con actualBoundingBox e non con la larghezza di avanzamento: centrata sull’avanzamento, la parola stava storta.
- Il passo della griglia si calcola contando i pixel pieni: con un passo fisso, sul telefono i puntini erano pochissimi e sul grande schermo troppi.
- Il soffio non deve partire durante l’arrivo, se no il puntatore finto scompiglia la nuvola prima che la parola si legga: si accende quando il contatore dell’arrivo supera 1,4.
- Niente glow né bagliori: i puntini sono tondi e pieni, d’inchiostro; l’accento è solo per chi è lontano da casa.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,3 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 21 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.
