Il logo sotto la palla da demolizione
Intro, Fisica, SVG, Testo
NuovaGratis
Torna alla libreria
Il colpo che attraversa la frase
Nello stile minimal, con fisica vera: una frase dove ogni lettera è un peso legato alle vicine da molle, chiusa fra due pareti sottili. Una parete batte e un’onda di compressione corre lungo la frase come il suono nell’aria, rimbalza sull’altra parete e torna, sempre più debole: dove passa le lettere si stringono, ingrassano e diventano blu sugli assi del carattere variabile, e sotto una traccia sottile disegna la pressione.
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>Hall acoustics</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-flex@5.3.0/full.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the whole room is the button: a click knocks the sentence from the nearer end; a letter can be pulled and let go -->
<main class="stage" data-stage tabindex="0" role="button" aria-label="A sentence made of letters on springs. Press to knock it from one end and watch the push travel along it.">
<header class="top">
<span class="top__brand">Hall</span>
<span class="top__note">Acoustics for rooms that carry a voice</span>
</header>
<!-- the sentence: the script splits it into letters, each one a weight on a spring between its neighbours -->
<h1 class="line" data-line>a push, passed along</h1>
<svg class="scope" data-svg aria-hidden="true">
<path class="wall" data-wall-l d="" />
<path class="wall" data-wall-r d="" />
<path class="axis" data-axis d="" />
<path class="marks" data-marks d="" />
<path class="trace" data-trace d="" />
</svg>
<p class="hint" data-hint>Click near an end to knock the sentence, or pull a letter.</p>
<p class="read" data-readout><span class="read__label">Compression</span> <b class="read__value" data-read>0%</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.
16 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 «Il colpo che attraversa la frase» da Animorio e adattala al mio sitoCosa fa
Una pagina bianca calda, in alto il nome di uno studio di acustica inventato, Hall. Al centro, grande, la frase «a push, passed along»: le lettere salgono al loro posto una dopo l’altra con un pelo di slancio, poi ai due capi della frase si disegnano due pareti sottili, e sotto una riga tratteggiata con una tacca sotto ogni lettera. La parete di sinistra si accende di blu e batte, entrando di colpo e uscendo piano: le prime lettere si stringono, il colpo passa alle successive e una fascia di lettere compresse corre lungo la frase. Dove passa le lettere diventano strette e pesanti sugli assi della larghezza e del peso del carattere, e blu tanto più quanto sono schiacciate; dietro, dove le molle si allungano, diventano un poco più larghe e leggere. Sotto, una linea sottile disegna la pressione lettera per lettera e si vede la gobba viaggiare. L’onda batte sulla parete di destra, torna indietro, ripassa, sempre più bassa, finché la frase si ferma. Dopo qualche secondo batte la parete di destra, poi di nuovo quella di sinistra. In basso a destra si legge la compressione più forte del momento. Un clic batte dalla parete più vicina; una lettera si può prendere col mouse o col dito e tirare di lato, e lasciata manda due onde, una per parte.
Come funziona
Un mezzo uniforme fatto di lettere
La frase si divide in lettere, ognuna in uno span messo dallo script attorno al suo centro. Ogni lettera ha una massa proporzionale alla sua larghezza e ogni molla fra due lettere è tanto più rigida quanto più è corta: così, come in un materiale uniforme, l’onda corre alla stessa velocità dappertutto, e la velocità è la larghezza della frase divisa per CROSS secondi. Altre due molle legano la prima e l’ultima lettera alle pareti.
La parete che batte
Il colpo non è un’animazione delle lettere: è la parete che si muove, entrando con mezzo coseno in un tempo breve e uscendo otto volte più piano, e il moto della parete tira la prima molla. La durata del colpo è quella che serve all’onda per attraversare cinque lettere: più corta, le molle fra lettere singole la sbriciolavano in increspature (un reticolo di molle disperde le onde che hanno la lunghezza di pochi passi).
Il passo e lo smorzamento
La fisica gira a passi fissi di un milleduecentesimo di secondo dentro gsap.ticker, e il tempo di ogni fotogramma non supera un trentesimo di secondo. L’aria toglie velocità perché l’onda si spenga in circa ECHOES traversate; un poco di attrito dentro le molle (proporzionale alla differenza di velocità fra vicine) calma il tremolio fine senza toccare l’onda grande. Quando tutto è fermo la frase si addormenta e non si ridisegna più.
La compressione nel carattere
Per ogni lettera la compressione è uno meno l’allungamento delle sue due molle. Compressa, la lettera si stringe sull’asse wdth e prende peso su wght (font-variation-settings di Roboto Flex) e passa al blu con gsap.utils.interpolate; tirata, si allarga e si alleggerisce. Il peso cresce meno della larghezza che si perde: con troppo peso le lettere compresse si toccavano. La traccia sotto passa per la compressione di ogni lettera con una curva di Catmull-Rom.
Il giro da solo e la mano
Un gsap.delayedCall fa battere una parete ogni EVERY secondi, prima una e poi l’altra; un clic batte subito dalla parete più vicina e rimette in fila il giro. Una lettera presa segue il puntatore di lato, guidata, e tira le molle; lasciata, manda un’onda per parte. Ogni colpo riparte dalla frase ferma (quello che resta del colpo prima, un pixel o due, si lascia andare), quindi il giro torna sempre uguale.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
CROSS | script.js | 1.1 | Quanti secondi impiega il colpo per andare da un capo all’altro della frase. |
KNOCK | script.js | 1 | Quanto forte batte la parete: 0.5 è un tocco, 1.6 è un colpo secco. |
ECHOES | script.js | 3 | Circa quante volte il colpo attraversa la frase prima di spegnersi. |
SQUEEZE | script.js | 1 | Quanto le lettere rispondono sugli assi della larghezza e del peso (0 = per niente). |
EVERY | script.js | 4.5 | Ogni quanti secondi batte una parete quando la pagina è lasciata sola, prima una e poi l’altra. |
--accent | style.css | #2b4cff | Il colore della parete che batte e delle lettere più compresse. |
--weight | style.css | 380 | Il peso del carattere della frase a riposo, da 100 a 900. |
Quando usarla
Per una frase che deve far sentire qualcosa che passa di mano in mano: lo studio di acustica, un’etichetta musicale, un podcast, la pagina di un servizio di consegne o di un passaparola, il titolo di una landing page che spiega come una cosa si propaga. Funziona con qualunque frase di una riga, fino a quaranta caratteri.
Sul telefono
La stessa fisica: la frase occupa quasi tutta la larghezza e il colpo è sempre lungo cinque lettere, quindi l’onda si legge uguale. Un tocco batte dalla parete più vicina, una lettera si tira col dito.
Con il movimento ridotto
Niente si muove: la frase compare in dissolvenza. Il clic la fa sparire e ricomparire nel momento in cui l’onda è a metà, calcolato in silenzio (lettere compresse in blu, la traccia con la sua gobba), e dopo un poco torna ferma, sempre in dissolvenza.
Trappole
- Con un colpo breve (un decimo di secondo) l’onda era lunga una lettera e mezza e il reticolo di molle la disperdeva: dopo una traversata restavano increspature di pochi pixel. Il colpo dura ora il tempo di cinque lettere, e la gobba arriva intera dall’altra parte.
- La parete che entrava e usciva alla stessa velocità mandava una compressione seguita da una trazione uguale: le lettere dietro l’onda diventavano sottilissime. Ora esce otto volte più piano, e la trazione è una coda leggera.
- Con il peso che cresceva molto (fino a 1000) le lettere compresse si allargavano più di quanto si avvicinassero, e la s, la e e la d di passed si sovrapponevano: ora la larghezza scende di più e il peso di meno.
- Nel movimento ridotto la foto dell’onda a metà si disegnava con le pareti al loro posto, mentre la parete era ancora dentro: l’ultima lettera risultava tirata e la g diventava un filo. La foto ora si porta dietro anche le pareti.
- Il video della scheda si ferma quando l’immagine resta uguale senza GSAP in programma: mentre la frase si muove c’è sempre un gsap.delayedCall che aspetta, e il colpo dopo è un delayedCall anche lui.
Librerie
GSAP 3.15.0, Roboto Flex (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,4 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.
