La parola sulla riga elastica

Hover, Testo, FisicaGSAPMediaPeso compresso: Demo 8,3 KBGSAP 28 KBGratisScarica lo zip

Nello stile minimal: una parola grande su una riga sottile, con ogni lettera legata alla riga da un elastico invisibile. Il puntatore aggancia la lettera che tocca e la tira fuori dalla riga, le vicine la seguono un poco, la lettera si assottiglia e si arrossa e la riga si piega sotto di lei. Troppo lontano l'elastico cede: la lettera torna in riga con un colpo secco e un piccolo tremolio.

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.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tensile</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>
  <!-- one word on one hairline: every letter is tied to the line by an invisible rubber band -->
  <main class="stage" data-stage>
    <svg class="lines" data-lines aria-hidden="true">
      <path class="line" data-line d="" />
    </svg>
    <h1 class="word" data-word aria-label="Tensile"></h1>
    <p class="hint" data-hint>Catch a letter and pull it off the line.</p>
    <p class="read" data-readout aria-hidden="true"><span class="read__label">Tension</span> <span class="read__win"><b class="read__value" data-read>slack</b></span></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.

19 valori da cambiare

Apri il Playground

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 sulla riga elastica» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo color carta c'è una riga sottile grigia e sopra la parola Tensile, grande, in un carattere variabile. All'inizio la riga si disegna dal centro verso i lati e le lettere arrivano dall'alto una dopo l'altra, sbiadite e un po' storte: ognuna batte sulla riga con un colpo secco, si schiaccia per un attimo (più larga e più pesante) e la riga sotto di lei si piega e vibra come una corda. Passando col puntatore su una lettera la si aggancia: allontanandosi la lettera viene tirata fuori dalla riga verso il puntatore, sempre un po' più indietro di lui perché l'elastico si fa più duro quanto più è lungo; si inclina dalla parte del tiro, diventa più stretta e più leggera come una gomma tirata e si colora di rosso, mentre le due vicine la seguono di poco e la riga si alza in una gobba morbida e diventa rossa anche lei. Andando oltre una lettera e mezza di distanza, l'elastico cede: la lettera torna giù di colpo, sbatte sulla riga che le fa da pavimento, si schiaccia, trema per un istante insieme alle vicine e si rimette dritta, e la riga oscilla ancora un poco. Passando su un'altra lettera, la prima viene lasciata andare. In basso a destra una scritta piccola dice la tensione: «slack» a riposo, il valore da 0 a 1 mentre si tira, «snap» quando l'elastico cede. Se nessuno tocca la pagina, una mano invisibile pizzica una lettera ogni tanto.

Come funziona

Una scatola ferma e una lettera libera

Ogni lettera è una scatola con la sua larghezza a riposo, misurata una volta e poi fissata in pixel, e dentro un secondo elemento con la lettera vera. Lo script muove e deforma solo quello dentro: così quando una lettera si stringe o si allarga sugli assi del carattere variabile (font-stretch e font-weight, guidati da due variabili CSS) la parola non si ricompone e le vicine non si spostano. La scatola è un flex centrato, quindi la lettera che si allarga esce dai due lati in modo uguale.

L'aggancio e la rottura

A ogni fotogramma si cerca la lettera sotto il puntatore, dentro un ovale alto come la lettera intorno al suo punto di riposo: quella è la lettera agganciata, e una nuova presa lascia andare la vecchia. Il bersaglio della lettera agganciata è la distanza dal puntatore moltiplicata per PULL, un po' meno quando la distanza cresce (l'elastico si indurisce); le vicine ricevono lo stesso tiro moltiplicato per NEIGHBOURS una volta per ogni lettera di distanza. Quando il puntatore va oltre REACH altezze di lettera dal punto di riposo, l'aggancio si rompe.

Due molle per ogni lettera

Ogni lettera ha posizione, inclinazione e allungamento, mossi da molle con frequenza e smorzamento, a passi fissi di un duecentoquarantesimo di secondo dentro gsap.ticker. Mentre è tirata usa una molla morbida quasi critica che insegue la mano; lasciata, una molla dura (SNAP, in hertz) poco smorzata (TREMBLE), che è il colpo secco. Sotto la riga la lettera trova un pavimento nove volte più duro dell'elastico: non affonda, batte. Nell'attimo del colpo l'allungamento riceve una spinta all'indietro, quindi la lettera si schiaccia larga e pesante e torna, e l'inclinazione riceve un calcio che fa il tremolio.

La riga che fa da corda

La riga è un path SVG ridisegnato a ogni fotogramma: due capi fermi e un punto sotto ogni lettera, uniti da una curva liscia (Catmull-Rom trasformata in curve di Bezier). Ogni punto è una molla leggera e poco smorzata che segue una parte (LINE) dello spostamento della sua lettera, così la riga si alza sotto la lettera tirata e, quando la lettera batte, prende il colpo e vibra come una corda. Il colore e lo spessore della riga e il colore della lettera vengono da color-mix con una variabile di tensione, quindi le tinte restano in :root.

La regia: l'entrata, la scritta e la mano invisibile

L'entrata è una timeline GSAP: la riga si disegna con expo.out, poi ogni lettera, tenuta in alto e già allungata, viene lasciata con un ritardo sfalsato e la stessa fisica la fa battere in riga. La scritta della tensione cambia parola scorrendo in una finestrella (back.out per «snap», con una scossa di pochi pixel). Dopo IDLE secondi senza puntatore una timeline muove una mano invisibile: tira piano una lettera, la tiene un respiro, dà l'ultimo strappo e l'elastico cede; un puntatore vero la manda via.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`WORD`	script.js	`'Tensile'`	La parola sulla riga (fino a 16 lettere; meglio corta, così resta grande).
`PULL`	script.js	`0.62`	Quanto la lettera agganciata segue il puntatore: 0.3 è un elastico duro, 0.9 uno lento.
`REACH`	script.js	`1.25`	Quanto lontano può andare il puntatore, in altezze di lettera, prima che l'elastico ceda.
`NEIGHBOURS`	script.js	`0.36`	Quanto le lettere vicine vengono trascinate con quella agganciata (0 = per niente).
`SNAP`	script.js	`6.5`	Quanto forte la lettera torna in riga, in hertz: 3 è un elastico morbido, 12 una molla d'acciaio.
`TREMBLE`	script.js	`0.13`	Quanto dura il tremolio dopo il colpo: 0.05 un brivido lungo, 0.6 quasi niente.
`LINE`	script.js	`0.34`	Quanto la riga si piega con le lettere (0 = resta dritta e cambia solo colore).
`THIN`	script.js	`1`	Quanto una lettera tirata si assottiglia sugli assi di larghezza e peso del carattere.
`IDLE`	script.js	`2.2`	Dopo quanti secondi senza puntatore la mano invisibile pizzica una lettera (0 = mai).
`--taut`	style.css	`#e0462a`	Il colore della tensione, sulla riga e sulla lettera tirata.
`--weight`	style.css	`640`	Il peso del carattere della parola, da 100 a 900.
`--width`	style.css	`112`	La larghezza del carattere della parola, in percentuale (da 60 a 140).

Provali nel Playground

Quando usarla

Per un titolo che si lascia toccare: l'apertura di un portfolio o di uno studio, il nome di un marchio in una landing page, la pagina 404, la copertina di un progetto di tipografia. Funziona con qualunque parola corta.

Sul telefono

La stessa fisica con le misure adattate: la parola occupa quasi tutta la larghezza e la distanza a cui l'elastico cede si misura in altezze di lettera, quindi vale anche in piccolo. Si aggancia una lettera col dito e la si trascina; alzando il dito l'elastico cede. La scritta d'aiuto cambia in «Drag a letter off the line.» e, se non c'è posto accanto alla tensione, si nasconde.

Con il movimento ridotto

Niente si muove: la riga e le lettere compaiono in dissolvenza e restano ferme. La lettera agganciata e la riga cambiano solo colore, sfumando verso il rosso quanto più si tira, e tornano grigie in dissolvenza quando l'elastico cede.

Trappole

Con la larghezza del carattere cambiata sulla lettera intera, una lettera che si assottigliava tirava a sé tutte le altre e la parola ballava: la scatola di ogni lettera ha la sua larghezza fissata in pixel e si deforma solo la lettera dentro.
Lasciata con la sola molla poco smorzata, una lettera tirata in alto tornava giù e passava sotto la riga di mezza lettera, e la riga faceva un'onda enorme: sotto il punto di riposo c'è un pavimento molto più duro, e il colpo diventa secco invece di un rimbalzo lungo.
Nell'entrata le lettere tenute in alto tiravano la riga con loro e la riga faceva una gobba prima ancora che arrivassero: finché una lettera non tocca la riga per la prima volta, la riga non la segue.
Con il colore dato a ogni lettera in base al suo allungamento, le vicine diventavano marroni: il rosso va solo all'ultima lettera agganciata, le altre ne prendono un quinto.
La scritta della tensione passava da «snap» a un numero piccolo e poi a «slack», due cambi di fila che sembravano uno sfarfallio: dopo la rottura si torna direttamente a «slack».
Il transform di GSAP sulla scritta della tensione (la scossa) cancellava il translate che la metteva al suo posto: la posizione si dà con left e top, il transform resta tutto a GSAP.

Librerie

GSAP 3.15.0, Anybody (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 8,3 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 14 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.