Il logo sotto la palla da demolizione
Intro, Fisica, SVG, Testo
NuovaGratis
Torna alla libreria
La parola appesa al filo
Nello stile minimal: una parola sola appesa a un filo sottilissimo, un pendolo vero con il suo centro di massa. Il puntatore la spinge, presa si lancia, un clic taglia il filo: cade, rimbalza schiacciandosi nella larghezza del carattere e si posa, poi scende un filo nuovo e la riporta su dondolando.
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>Plumb</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>
<!-- the whole room is the button that cuts the thread; the word inside it can be pushed, grabbed and thrown -->
<main class="stage" data-stage data-autoclic tabindex="0" role="button" aria-label="A word hanging from a thread. Press to cut the thread.">
<svg class="lines" data-lines aria-hidden="true">
<path class="ceiling" data-ceiling d="" />
<path class="floor" data-floor d="" />
<path class="thread" data-upper d="" />
<path class="thread" data-lower d="" />
<path class="thread" data-thread d="" />
<g data-mount><rect class="clamp" data-clamp x="-9" y="-1" width="18" height="4" rx="1" /></g>
<g data-snip-at><g data-snip opacity="0"><path class="snip" d="M-9 0H9" /></g></g>
</svg>
<div class="word" data-word aria-hidden="true"><span class="word__ink" data-ink></span></div>
<p class="hint" data-hint>Push it, throw it, click to cut the thread.</p>
<p class="read" data-readout><span class="read__label">Thread</span> <b class="read__value" data-read>+0.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.
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 appesa al filo» da Animorio e adattala al mio sitoCosa fa
Una stanza nera con due righe sottili, il soffitto e il pavimento. Il soffitto si disegna dal centro verso i lati, compare un piccolo morsetto e da lì scende un filo arancio, sottile come un capello. Le lettere di Plumb salgono una dopo l’altra con un rimbalzo, tenute un poco più in alto e storte, col filo lento che fa la pancia; poi la parola viene lasciata: cade, il filo si tende di colpo, cede appena come un filo vero, il soffitto si piega un pelo sotto lo strappo e la parola dondola come un pendolo finché si ferma diritta. Passandoci sopra col puntatore la si spinge, e oscilla tanto quanto è stata spinta, girando anche su sé stessa; presa col mouse o col dito la si porta dove si vuole, il filo si allenta e fa la curva, e lasciata va per conto suo, sbatte contro le pareti e il soffitto e torna a dondolare. Un clic taglia il filo all’altezza del clic, con un piccolo segno di taglio: il pezzo di sopra scatta verso il soffitto e poi ricade e si ritira nel morsetto, il pezzo di sotto resta attaccato alla parola. La parola parte girando, tocca il pavimento con un angolo, si schiaccia (le lettere si allargano e ingrassano per un attimo, sull’asse della larghezza e del peso del carattere), il pavimento si piega sotto il colpo e torna con un fremito, e la parola rimbalza e si posa. Dopo un momento il morsetto corre sul soffitto un po’ di lato, un filo nuovo scende in diagonale e si annoda alla parola, la tira su di sbieco staccandola da terra, e il morsetto torna al centro mentre la parola dondola fino a fermarsi dov’era. In basso a destra un piccolo strumento dice l’angolo del filo in gradi, oppure che il filo è tagliato o sta arrivando.
Come funziona
Il peso vero delle lettere
La parola si disegna una volta su una canvas nascosta, lettera per lettera nel punto in cui l’ha messa la pagina (offsetLeft), con lo stesso carattere e lo stesso peso. Dai pixel pieni si ricavano il riquadro stretto dell’inchiostro, il centro di massa e il momento d’inerzia (la media delle distanze al quadrato), così una parola con le lettere grosse da un lato pende davvero come pende. Il filo si lega in cima alla colonna d’inchiostro più vicina al centro di massa, e il centro di massa si sposta su quella colonna, come farebbe chi appende un’insegna: la parola sta diritta.
Un corpo rigido e un filo morbido
La parola è un corpo solo con posizione, angolo, velocità e velocità di rotazione, mosso a passi fissi di un duecentoquarantesimo di secondo dentro gsap.ticker. Il filo è un vincolo che tira e non spinge mai: quando la distanza fra il morsetto e il nodo supera la lunghezza, un impulso nel punto del nodo la riporta indietro. È un vincolo morbido (frequenza e smorzamento, come in Box2D), quindi non esplode mai e cede appena: il colpo quando si tende è elastico, e la forza che misura piega il soffitto, solo nel disegno, per non far entrare energia nel pendolo.
Pareti, pavimento e il colpo
I quattro angoli dell’inchiostro si controllano contro il pavimento, il soffitto e le due pareti; i contatti di un passo si risolvono insieme, sei giri di impulsi con i totali tenuti (spingono e non tirano, l’attrito resta dentro il suo cono), e il rimbalzo vale solo per un urto vero: così a terra la parola si ferma senza tremare. L’urto più forte del passo comanda l’effetto: il pavimento si piega in quel punto e torna con elastic.out, e le lettere si schiacciano dal lato che ha toccato, con scaleX e scaleY e con le variabili che muovono font-stretch e font-weight, poi tornano con un elastico.
Fili che si disegnano da soli
Ogni filo che si vede è una catena di punti (Verlet) con le estremità attaccate al morsetto e al nodo, disegnata come una curva liscia. I vincoli fra i punti tirano e non spingono, quindi il filo lento si affloscia e fa la pancia; quando è teso la catena viene tirata dritta, perché da sola ci metterebbe troppi passi. Al taglio la catena si divide nel punto più vicino all’altezza del clic: il pezzo di sopra riceve una velocità verso il morsetto e scatta su, quello di sotto parte con la parola.
La regia del filo nuovo
Quando la parola resta ferma a terra per un attimo si addormenta, e un gsap.delayedCall fa partire una timeline: il morsetto corre sul soffitto un po’ di lato, il filo nuovo scende in diagonale fino al nodo, si annoda (la parola fa un piccolo cenno sull’asse della larghezza), la lunghezza del filo si accorcia con power2.inOut e la tira su, e il morsetto torna al centro. Appesa e ferma, la parola si addormenta di nuovo e scivola invisibile al suo punto esatto, così torna sempre identica. Con il movimento ridotto la stessa storia è fatta di dissolvenze.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD | script.js | 'Plumb' | La parola appesa al filo (fino a 24 lettere: se è lunga si rimpicciolisce per starci). |
THREAD | script.js | 0.4 | Quanto è lungo il filo, in parte dello spazio fra soffitto e pavimento: più lungo dondola più piano. |
GRAVITY | script.js | 2600 | Quanto forte cade tutto, in pixel al secondo al quadrato: poca è un pendolo lento e sognante, tanta un peso di piombo. |
BOUNCE | script.js | 0.36 | Quanto rimbalza la parola sul pavimento e sulle pareti: 0 non rimbalza, 0.8 è una palla. |
AIR | script.js | 1.7 | Quanto presto si spegne un’oscillazione: 0.3 dondola a lungo, 4 si ferma quasi subito. |
SPRING | script.js | 9 | Quanto è elastico il filo, in hertz: 4 è un elastico che molleggia, 18 un filo d’acciaio. |
PUSH | script.js | 1 | Quanto forte il puntatore spinge la parola quando ci passa sopra (0 = non la tocca). |
REHANG | script.js | 0.7 | Quanti secondi la parola resta a terra prima che scenda il filo nuovo. |
--weight | style.css | 680 | Il peso del carattere della parola, da 100 a 900: più pesa, più l’urto la fa ingrassare. |
Quando usarla
Per un titolo che si lascia toccare: l’apertura di un portfolio, la pagina 404 o la pagina vuota di un’app, la copertina di un progetto di tipografia o di fisica, un momento di gioco in una landing page. Funziona con qualunque parola corta, anche il nome di un marchio.
Sul telefono
La stessa fisica con le misure adattate: la parola è più grande rispetto allo schermo, il filo è lungo quanto la stessa parte della stanza. La si spinge e la si trascina col dito, un tocco taglia il filo.
Con il movimento ridotto
Niente si muove: la stanza, il filo e la parola compaiono in dissolvenza e la parola pende ferma. Il clic fa sparire filo e parola e la parola ricompare distesa sul pavimento; dopo un poco svanisce e ricompare appesa al filo nuovo.
Trappole
- Appesa in cima alla u, a pochi pixel di lato dal centro di massa e poco sopra di esso, la parola pendeva storta di sette gradi: era fisica giusta, ma sembrava un errore. Il centro di massa si sposta sulla colonna del nodo.
- La piega del soffitto all’inizio spostava davvero il morsetto: la tensione piegava il soffitto, il soffitto tirava il filo, e il pendolo non si fermava mai, con la parola che vibrava di un pixel per sempre. Ora la piega è solo disegnata.
- Con i contatti risolti un angolo alla volta, a terra la parola saltellava di qualche pixel al secondo e non si addormentava mai, quindi il filo nuovo non scendeva: i contatti di un passo si risolvono insieme, con i totali e un margine di mezzo pixel.
- I vincoli della catena che spingono oltre a tirare tenevano il pezzo tagliato rigido come un bastone, e lo scatto verso il soffitto non si vedeva: un filo vero si affloscia, quindi i vincoli lavorano solo in trazione.
- Un filo teso disegnato come catena si piegava a S nelle oscillazioni veloci, perché la catena raggiunge la linea dritta solo dopo molti passi: quando la distanza arriva alla lunghezza del filo, i punti vengono tirati sulla retta.
- Il video della scheda si ferma quando l’immagine resta uguale per un secondo senza animazioni GSAP in programma: l’attesa a terra prima del filo nuovo è un gsap.delayedCall, non un timer, e la parola appesa scivola al punto esatto, così il video finisce quando torna com’era.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 12 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.
