Il logo sotto la palla da demolizione
Intro, Fisica, SVG, Testo
NuovaGratis
Torna alla libreria
La parola a domino
Nello stile minimal, con fisica vera: le lettere di CHAIN stanno in piedi su una riga sottile come tessere del domino, ognuna in un rettangolo alto disegnato con una linea sola. Una spinta vermiglia fa cadere la prima, che urta la seconda e ci si appoggia: il colpo attraversa la parola finché l’ultima è distesa e le altre riposano una sull’altra. A ogni colpo la lettera si stringe sull’asse della larghezza e si scalda di vermiglio; poi le tessere si rialzano una dopo l’altra.
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>Chain</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/anybody@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the whole room is the button: a click pushes the first letter, or the one under the pointer -->
<main class="stage" data-stage tabindex="0" role="button" aria-label="The word CHAIN set up as dominoes. Press to push the first letter.">
<header class="top">
<span class="top__brand">Chain</span>
<span class="top__note">Automations that run themselves</span>
</header>
<svg class="room" data-svg aria-hidden="true">
<path class="floor" data-floor d="" />
<g data-ticks></g>
<g data-tiles></g>
<path class="finger" data-finger d="" />
</svg>
<p class="hint" data-hint>Click to push the first letter.</p>
<p class="read" data-readout><span class="read__label">Chain</span> <b class="read__value" data-read>0.00 s</b></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 a domino» da Animorio e adattala al mio sitoCosa fa
Una stanza bianca calda, in alto il nome di un servizio di automazioni inventato, Chain. Una riga sottile, il pavimento, si disegna dal centro verso i lati e sotto compaiono piccole tacche; poi le cinque lettere di CHAIN vengono posate una dopo l’altra, ognuna dentro una tessera alta disegnata con una linea sola: arriva un poco inclinata all’indietro, tocca il pavimento, oscilla di un pelo e resta diritta, e la lettera prende peso per un attimo. Dopo un respiro, da sinistra entra un tratto corto vermiglio, la mano, che tocca la prima tessera vicino alla cima e la spinge. La tessera passa il suo punto di equilibrio e cade sullo spigolo davanti, colpisce la seconda vicino alla cima e ci si appoggia; la seconda parte, colpisce la terza, e così via: il colpo attraversa la parola sempre più deciso finché l’ultima tessera si distende sul pavimento con un piccolo rimbalzo, e le altre restano appoggiate l’una all’altra in una fila inclinata, come un domino vero. Ogni tessera colpita si accende di vermiglio e si raffredda piano, e la sua lettera si stringe sull’asse della larghezza e ingrassa per un istante. In basso a destra un cronometro conta il tempo della catena, dalla spinta all’ultima tessera distesa. Dopo una pausa le tessere si rialzano una dopo l’altra, da sinistra, si posano sulla base con un dondolio di un pixel, e la mano torna. Un clic spinge la prima tessera, o quella che si tocca (le precedenti restano in piedi); a tessere cadute, un clic le rialza.
Come funziona
Una tessera è un corpo rigido
Ogni tessera è una lastra che gira sul suo spigolo davanti, con un angolo e una velocità angolare. La gravità agisce sul suo centro: finché il centro sta dietro lo spigolo la tiene in piedi, appena lo passa la tira giù. Il momento d’inerzia è quello di una lastra attorno a un angolo, (spessore² + altezza²) / 3. Tutto è misurato in altezze di tessera, quindi la caduta ha lo stesso ritmo su ogni schermo. Il passo della fisica è di un milleduecentesimo di secondo, dentro gsap.ticker, e il tempo di ogni fotogramma non supera mai un trentesimo di secondo.
Lo spigolo contro la faccia
A ogni passo si guarda dove sta lo spigolo in cima a una tessera nel riferimento della tessera dopo: se è entrato nella sua faccia di dietro, c’è un contatto. Lungo la normale della faccia si calcola la velocità relativa dei due punti e si dà un impulso che la annulla (con un rimbalzo piccolo, 0,12, solo per gli urti veri), poi si toglie la compenetrazione girando le due tessere in proporzione alle loro leve. Otto giri per passo bastano perché una fila di tessere appoggiate stia ferma senza tremare.
La distanza giusta
La distanza fra le tessere è stretta da due limiti: abbastanza larga perché la tessera arrivi sulla vicina quando ha già passato il punto di equilibrio (sopra il seno dell’angolo critico), abbastanza stretta perché la penultima trovi ancora la faccia dell’ultima quando quella è distesa. Con una distanza di 0,42 la prima tessera toccava la seconda appena passato l’equilibrio, senza slancio, e tornava indietro: ora le tessere sono più sottili (0,3) e più distanti (0,55).
Il colpo nella lettera
Un urto vero, sopra una soglia di velocità, accende la tessera colpita: il contorno e la lettera passano al vermiglio con gsap.utils.interpolate e si raffreddano in un secondo; la lettera si stringe sull’asse wdth (font-stretch) e prende peso, poi torna con un elastico. Il pavimento ferma la tessera distesa con un rimbalzo piccolo; l’ultima che tocca terra ferma il cronometro.
La regia: spinta, sonno, risalita
La mano è una timeline GSAP: un tratto vermiglio arriva da dietro con power2.in e al contatto dà alla tessera la velocità angolare che le serve per passare l’equilibrio, moltiplicata per PUSH. Quando tutto è fermo la fisica si addormenta e il disegno si ferma: niente si ridisegna finché qualcosa non si muove. Le tessere si rialzano con un’altra timeline, una dopo l’altra, passando di un pelo oltre la verticale sull’altro spigolo e tornando con back.out. Il giro è sempre uguale, perché ogni spinta riparte con l’orologio della fisica azzerato.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD | script.js | 'CHAIN' | La parola: una tessera per lettera, da 3 a 7 lettere. |
GRAVITY | script.js | 22 | Quanto in fretta cade una tessera, in altezze di tessera al secondo quadrato: 10 è il rallentatore, 40 è secco. |
SPACING | script.js | 0.55 | La distanza fra due tessere, in parte della loro altezza (da 0.5 a 0.6). |
SLAB | script.js | 0.3 | Lo spessore di una tessera, in parte della sua altezza. |
PUSH | script.js | 1.4 | Quanto forte spinge la mano: 1.4 è una spinta decisa, 2.5 uno spintone. |
HOLD | script.js | 1.6 | Quanti secondi la parola resta a terra prima di rialzarsi. |
SQUASH | script.js | 1 | Quanto un colpo stringe la lettera sull’asse della larghezza (0 = per niente). |
--accent | style.css | #e5432a | Il colore della mano e del colpo che attraversa la parola. |
--weight | style.css | 720 | Il peso del carattere delle lettere, da 100 a 900. |
Quando usarla
Per il titolo di un prodotto che fa partire le cose da sole: un servizio di automazioni, un’app di flussi di lavoro, la pagina «come funziona» di una landing page, la copertina di un progetto di fisica o di tipografia. Funziona con qualunque parola corta in maiuscolo, anche il nome di un marchio.
Sul telefono
La stessa fisica, misurata in altezze di tessera: le tessere sono più piccole perché la fila intera, compresa l’ultima distesa, stia nella larghezza. Un tocco spinge la prima tessera, o quella toccata; a tessere cadute, un tocco le rialza.
Con il movimento ridotto
Niente cade davanti agli occhi: le tessere compaiono in dissolvenza, in piedi. Il clic le fa sparire e ricomparire già cadute, nella posizione esatta che trova la fisica (calcolata in silenzio fino alla fine), col tempo della catena; un altro clic le rimette in piedi allo stesso modo.
Trappole
- Con tessere spesse (0,4) e vicine (0,42) la prima toccava la seconda a 25 gradi, appena oltre l’angolo critico di 22: arrivava senza slancio, la seconda si spostava di due gradi e la rimandava indietro. Più sottili e più distanti, ogni tessera arriva sulla vicina con l’energia di trenta gradi di caduta.
- Il pavimento rimandava indietro ogni tessera distesa con un quinto della sua velocità anche quando era già quasi ferma: la penultima, appoggiata sull’ultima, tremava di due gradi per secondi interi. Il rimbalzo vale solo sopra una soglia di velocità; sotto, la tessera resta giù.
- Il contorno di ogni tessera ha il fondo pieno del colore della stanza: così la tessera dopo copre lo spigolo di quella appoggiata e si legge davanti, come succede col domino vero.
- Su un telefono la fila intera, con l’ultima distesa, era centrata: in piedi la parola stava tutta a sinistra. Ora il centro è a metà fra la parola in piedi e la fila caduta.
- Con la gravità bassa (8) l’aria, fissa a 0,8 al secondo, si mangiava lo slancio della prima tessera prima che arrivasse sulla seconda, e la catena si fermava al primo colpo; con una spinta sotto 1,4 e una distanza sotto 0,5 succedeva lo stesso. Ora l’aria va al passo della caduta (cresce con la radice della gravità) e spinta e distanza hanno un minimo: provate tutte le combinazioni agli estremi, la catena arriva sempre in fondo.
- Il video della scheda si ferma quando l’immagine resta uguale senza GSAP in programma: mentre le tessere si muovono c’è sempre un gsap.delayedCall che aspetta, e la pausa a terra e quella in piedi sono delayedCall anche loro.
Librerie
GSAP 3.15.0, Anybody (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,2 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 19 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.
