Le lettere infilate sul filo

Fisica, TestoGSAPImpegnativaPeso compresso: Demo 11 KBGSAP 28 KBGratisScarica lo zip

Nello stile minimal: le lettere di una parola infilate come perline su un filo sottilissimo, teso fra due pirolini, che pende come una catenaria vera. Il puntatore tira giù il filo e le lettere scivolano verso il punto più basso; un clic lo allenta e le lettere si ammucchiano in mezzo, il clic dopo lo tende di colpo, il filo vibra e le lettere tornano in riga.

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>Strand</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/standard.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- one thread between two pegs, the letters of one word threaded on it like beads; the whole room is the button -->
  <main class="stage" data-stage data-autoclic tabindex="0" role="button" aria-label="The letters of a word threaded on a thread. Press to let the thread go slack or pull it tight.">
    <svg class="lines" data-lines aria-hidden="true">
      <path class="chord" data-chord d="" />
      <path class="ext" data-ext d="" />
      <path class="dim" data-dim d="" />
      <path class="thread" data-thread d="" />
      <g class="letters" data-letters></g>
      <g class="peg" data-peg-a><circle r="4.5" /><path class="peg__slot" d="M-2.8 0H2.8" /></g>
      <g class="peg" data-peg-b><circle r="4.5" /><path class="peg__slot" data-slot d="M-2.8 0H2.8" /></g>
    </svg>
    <p class="hint" data-hint>Pull the thread down. Click to let it go slack, again to pull it tight.</p>
    <p class="read" data-readout><span class="read__label">Sag</span> <b class="read__value" data-read>0 px</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

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 «Le lettere infilate sul filo» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Un foglio color carta con due pirolini neri ai lati, a un terzo dell’altezza. In mezzo si disegna una guida tratteggiata, i pirolini compaiono con un piccolo rimbalzo e un filo nero sottile corre dritto dal primo al secondo; appena teso viene lasciato e cade nella sua curva, una catenaria vera, con un’oscillazione che si spegne. Poi le lettere di STRAND vengono infilate dal pirolino di sinistra, l’ultima per prima: ognuna corre lungo il filo stretta sull’asse della larghezza, rallenta, arriva al suo posto allargandosi e fa un piccolo cenno di peso, e il filo trema appena sotto di lei. A riposo la parola è spaziata lungo tutto il filo e ogni lettera è girata come la curva nel punto in cui sta. A destra, fuori dal filo, una quota sottile color vermiglio misura quanto pende, e in basso a destra lo stesso numero in pixel. Con il mouse, scendendo sul filo lo si aggancia e lo si tira giù: il filo fa una V con due catenarie che si incontrano sotto il puntatore, le lettere scivolano verso il fondo, si urtano e si schiacciano per un attimo, e le vicine sentono il colpo. Tirato troppo il filo scappa dal puntatore e vibra; tornando sopra il filo lo si lascia. Col dito lo si prende e lo si trascina. Un clic fa girare il pirolino di destra, che lascia andare il filo: pende molto più in basso e le lettere, che lì non tengono più, scivolano in mezzo e si ammucchiano in una parola stretta. Il clic dopo fa girare il pirolino all’indietro e tende il filo di colpo: il filo scatta dritto e vibra, le lettere volano tutte insieme ai loro posti e atterrano dal centro verso i lati con un piccolo schiacciamento, poi il filo torna piano alla sua curva di riposo.

Come funziona

Una catenaria calcolata, non disegnata

La curva del filo è quella vera di una catena appesa, y = a·cosh(x/a): dalla distanza fra i pirolini e dalla lunghezza del filo si ricava il parametro a con una bisezione (la lunghezza vale 2a·sinh(D/2a)), e il resto viene da sé. Il valore SAG dice quanto pende a riposo, e da quello si calcola la lunghezza; il clic che allenta il filo allunga solo la lunghezza, e la curva si rifà a ogni fotogramma. La differenza fra cosh scritta con due sinh tiene il calcolo preciso anche quando il filo è quasi dritto.

Il puntatore fa due catenarie

Quando il puntatore preme il filo, il filo diventa due tratti di catenaria, dal pirolino al puntatore e dal puntatore all’altro pirolino. Il puntatore spinge solo in giù e il filo ci scorre sopra, quindi la tensione orizzontale è la stessa dalle due parti: un solo parametro a per i due tratti, cercato con una bisezione finché le due lunghezze sommate fanno quella del filo. Se i due tratti dritti sono già più lunghi del filo, il filo è teso e si allunga; oltre STRETCH scappa via.

Il filo che vibra

Sopra la curva di riposo il filo può vibrare nelle sue forme naturali, dodici seni fra i due pirolini, ognuno una molla smorzata con la sua frequenza (TWANG per la prima, il doppio per la seconda e così via). Quando la curva di riposo cambia di colpo (il filo scappa dal puntatore, il clic lo tende) la differenza fra la vecchia e la nuova si scompone in quei seni: il filo parte da dov’era e oscilla verso la forma nuova. Una lettera che atterra o due che si urtano danno un piccolo colpo nel loro punto.

Lettere che scivolano come perline

Ogni lettera è una perlina: ha solo una posizione lungo il filo e una velocità, mosse a passi di un duecentoquarantesimo di secondo. La pendenza del filo dove sta dà la spinta della gravità e la forza che preme sul filo dà l’attrito: finché la pendenza resta sotto FRICTION la lettera tiene, poi scivola con un attrito un po’ più basso. Le lettere non si passano mai: i contatti si risolvono a coppie, con un piccolo rimbalzo solo negli urti forti, e la distanza cresce quando due lettere vicine sono girate in modo diverso, così non si toccano col fondo. Ogni lettera si disegna girata come il filo, e si stringe sull’asse wdth quando corre.

La regia dei due clic

Il primo clic è una timeline GSAP che allunga il filo (il pirolino gira di quanto filo lascia andare) e mette le lettere in mano alla fisica. Il secondo accorcia il filo di colpo, passa il salto alla vibrazione, porta tutte le lettere al loro posto con un solo tween expo.out, uguale per tutte, così nessuna supera l’altra; poi i cenni dal centro verso i lati e il filo che torna alla sua curva con power2.inOut. Alla fine tutto è identico a prima. Col movimento ridotto le due scene si scambiano in dissolvenza.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`WORD`	script.js	`'STRAND'`	La parola infilata sul filo (fino a 12 lettere; le maiuscole stanno meglio, perché il filo passa a metà della loro altezza).
`SAG`	script.js	`0.05`	Quanto pende il filo a riposo, in parte della distanza fra i pirolini: 0 è tirato dritto.
`SLACK`	script.js	`0.2`	Quanto pende quando un clic lo allenta: più pende, più in fretta le lettere scivolano in mezzo.
`SPREAD`	script.js	`0.78`	Quanta parte del filo occupa la parola a riposo: più è alta, più le lettere sono spaziate e più strada fanno scivolando.
`GRAVITY`	script.js	`2400`	Quanto forte le lettere scivolano in giù, in pixel al secondo al quadrato.
`FRICTION`	script.js	`0.16`	Quanto le lettere fanno presa sul filo: 0.04 scivolano subito, 0.5 restano quasi ferme anche sul filo molto inclinato.
`STRETCH`	script.js	`0.1`	Di quanto il filo si allunga sotto il puntatore prima di scappare via e vibrare (0.1 = un decimo).
`TWANG`	script.js	`3`	Il tono della vibrazione, in oscillazioni al secondo: basso è un elastico molle, alto una corda di chitarra.
`--weight`	style.css	`640`	Il peso delle lettere, da 200 a 800.

Provali nel Playground

Quando usarla

Per un titolo o un marchio che si lascia toccare: l’apertura di un portfolio o di un sito di design, la copertina di una collezione (gioielli, filati, perline), una pagina vuota o la 404 di un’app, un momento di gioco in una landing page. Funziona con ogni parola corta.

Sul telefono

La stessa fisica con le misure adattate: le lettere occupano una parte più grande del filo, i pirolini stanno a pochi pixel dai bordi. Il filo si prende e si trascina col dito, un tocco lo allenta e il tocco dopo lo tende.

Con il movimento ridotto

Niente si muove: filo, pirolini e parola compaiono in dissolvenza, e il puntatore non tira il filo. Il clic fa svanire filo e lettere e li fa ricomparire col filo che pende in basso e le lettere ammucchiate in mezzo; il clic dopo li riporta, sempre in dissolvenza, alla parola spaziata sul filo di riposo.

Trappole

Con le lettere strette come in un titolo, il filo allentato non cambiava quasi niente: erano già tutte vicine al fondo. La parola a riposo è spaziata lungo il filo (SPREAD), così scivolando fa strada e ammucchiata diventa una parola stretta.
Col dito il filo si sganciava subito: si tocca un po’ sopra il filo, e il controllo che lascia andare il filo quando il puntatore torna sopra la curva scattava al primo fotogramma. Col dito il filo resta preso e al massimo torna alla sua curva; il controllo vale solo per il mouse che ci passa sopra.
Tornando al loro posto con una partenza sfalsata le lettere si sorpassavano attraversandosi. Partono tutte insieme con lo stesso tween: fra due posizioni senza sovrapposizioni, la stessa curva di tempo non ne crea mai; lo sfalsamento resta nei cenni d’arrivo.
Due lettere vicine girate in modo diverso (in fondo alla V) si toccavano col piede anche se i centri erano lontani quanto basta: la distanza minima cresce col seno dell’angolo fra le due.
Il salto del filo passato tutto alla vibrazione, quando il clic lo tende, lo faceva schizzare sopra i pirolini come un elastico: ne passa solo una parte, abbastanza per sentire lo scatto.
Il video della scheda si ferma quando l’immagine resta uguale per un secondo: la vibrazione sotto un trentesimo di pixel viene spenta del tutto, e dopo il secondo clic filo, pirolino e lettere tornano esattamente come prima, così il video finisce lì.

Librerie

GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 11 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.