Il logo sotto la palla da demolizione
Intro, Fisica, SVG, Testo
NuovaGratis
Torna alla libreria
La culla di Newton delle lettere
Nello stile minimal: le cinque lettere di FORCE appese ognuna a due fili paralleli sottilissimi, come le sfere di una culla di Newton, con fisica vera. Si tira fuori la prima lettera col mouse o col dito e la si lascia: il colpo attraversa le tre ferme e fa partire l’ultima, avanti e indietro finché si spegne; a ogni urto le lettere si schiacciano un filo sull’asse della larghezza.
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>Force</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 lifts the first letter; every letter can also be pulled by hand -->
<main class="stage" data-stage data-autoclic tabindex="0" role="button" aria-label="A word hung as a Newton's cradle. Press to lift the first letter and let it go.">
<svg class="cradle" data-svg aria-hidden="true">
<path class="bar" data-bar d="" />
<g data-ends></g>
<g data-gauge opacity="0">
<path class="gauge__plumb" data-plumb d="" />
<path class="gauge__arc" data-arc d="" />
<text class="gauge__deg" data-deg x="0" y="0">0°</text>
</g>
<g data-bobs></g>
<g data-clamps></g>
</svg>
<p class="hint" data-hint>Pull a letter out and let go, or click.</p>
<p class="read" data-readout><span class="read__label">Knocks</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.
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 culla di Newton delle lettere» da Animorio e adattala al mio sitoCosa fa
Una stanza bianca calda con una riga sottile in alto, la sbarra della culla, che si disegna dal centro verso i lati; spuntano piccoli morsetti a coppie e da ogni coppia viene calata una lettera di FORCE su due fili paralleli sottili come un capello, come un’altalena: la lettera corre sul suo arco e resta sempre diritta. Le lettere scendono una dopo l’altra, i fili la prendono con un pixel di troppo e la riportano su, e la lettera prende peso per un attimo. Appese, stanno a un capello l’una dall’altra, come le sfere d’acciaio della culla. Un clic solleva la prima lettera lungo il suo arco (ogni secondo clic ne solleva due): compare un filo a piombo tratteggiato con un arco e i gradi del sollevamento, la lettera si ferma un pelo più in alto e poi viene lasciata. Cade, colpisce la seconda e si ferma di colpo; le tre in mezzo tremano appena e l’ultima vola fuori dall’altra parte, torna, colpisce, e la prima riparte. I fili della lettera che porta il colpo si accendono di vermiglio e si raffreddano piano. A ogni urto le due lettere che si toccano si stringono per un istante sull’asse della larghezza del carattere e ingrassano di poco, poi tornano con un piccolo elastico: il colpo si vede attraversare la parola. Con l’attrito dell’aria e un soffio d’attrito ai nodi il dondolio si spegne in una decina di secondi, l’energia passa un po’ anche alle lettere di mezzo, come in una culla vera, e alla fine tutte tornano ferme al loro posto. Ogni lettera si può anche prendere e tirare col mouse o col dito, anche una di quelle in mezzo, che spinge le vicine; lasciata, parte. In basso a destra un contatore dice quante volte il colpo ha fatto partire una lettera dall’altra parte.
Come funziona
L’inchiostro di ogni lettera
Ogni lettera si disegna una volta su una canvas nascosta, centrata come la disegnerà l’SVG (text-anchor middle), con lo stesso carattere e lo stesso peso. Dai pixel pieni si ricavano il riquadro stretto dell’inchiostro e i due punti in cima dove si legano i fili: a un quarto dell’inchiostro da ogni lato, sulla colonna più vicina che ha inchiostro vicino alla riga alta. I perni sulla sbarra si mettono in modo che gli inchiostri stiano a un capello l’uno dall’altro (l’1,4 per cento del corpo), e la grandezza del carattere si sceglie perché la parola occupi una parte della larghezza e le maiuscole non superino un quinto dell’altezza.
Cinque pendoli e i loro urti
Ogni lettera è un pendolo con il suo angolo e la sua velocità, appeso a due fili paralleli: si sposta sull’arco senza girare, quindi la si disegna con un solo translate, mosso a passi fissi di un milleduecentesimo di secondo dentro gsap.ticker, con la legge del pendolo vero (il seno dell’angolo, non l’angolo) e un periodo scelto in secondi, così su ogni schermo dondola allo stesso ritmo. Quando gli inchiostri di due vicine si toccano e si vengono incontro, un impulso fra masse uguali con un coefficiente di restituzione scambia le velocità: con 0,99 la prima si ferma quasi del tutto e la seconda parte. Siccome le lettere stanno a un capello, il colpo attraversa la fila come una catena di urti velocissimi, ed è per questo che parte solo l’ultima.
Attrito, sicurezza e sonno
L’aria toglie un poco di velocità a ogni passo e un soffio d’attrito ai nodi spegne le ultime oscillazioni piccole, invece di lasciarle tremare per sempre. Nessuna lettera può portare più energia del sollevamento più alto, quindi nessuna esce dalla stanza nemmeno lanciata con forza; l’angolo massimo si calcola a ogni misura, perché l’angolo esterno dell’ultima lettera resti dentro lo schermo. Quando tutto è quasi fermo le lettere scivolano invisibili al loro posto esatto e il ciclo si addormenta; mentre è sveglio c’è sempre un gsap.delayedCall in programma, così chi registra aspetta che la culla si fermi.
Lo schiacciamento sull’asse wdth
L’urto più forte di ogni coppia, in un fotogramma, comanda l’effetto: le due lettere si stringono sull’asse della larghezza (font-stretch, fino al 13 per cento in meno) e prendono peso, poi tornano con un piccolo elastico. Il ritorno non deve mai allargarle più di un pixel: con elastic.out pieno le lettere si allargavano dell’8 per cento e si sovrapponevano alle vicine, che stanno a un capello. I fili di una lettera che si muove si colorano con gsap.utils.interpolate fra il grigio e il vermiglio, in fretta quando si scalda e piano quando si raffredda.
La mano: il clic e il trascinamento
Il clic è una timeline GSAP: la prima lettera (ogni secondo clic le prime due) diventa guidata e sale lungo l’arco con power2.inOut fino a un pelo oltre il segno, si ferma, e viene lasciata con velocità zero. Trascinando, la lettera presa segue il puntatore di lato, e l’angolo è quello che porta il punto afferrato sotto il dito; guidata, ha massa infinita e spinge le vicine. Lasciata, porta la velocità che aveva, tagliata se supera quella del sollevamento più alto. Un filo a piombo tratteggiato e un arco con i gradi accompagnano la mano. Con il movimento ridotto la stessa storia è fatta di dissolvenze.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD | script.js | 'FORCE' | La parola della culla: un pendolo per lettera, da 3 a 7 lettere. Rende meglio con maiuscole che hanno inchiostro in cima al centro (O, C, E, F, T, A, S). |
PERIOD | script.js | 1.5 | Quanti secondi dura un’oscillazione intera di un pendolo piccolo: di più è più lento e sognante, di meno è una culla da scrivania. |
THREAD | script.js | 0.36 | Quanto sono lunghi i fili, in parte dell’altezza della stanza. |
LIFT | script.js | 34 | Di quanti gradi il clic solleva la prima lettera (su uno schermo stretto di meno, perché l’ultima non esca dalla stanza). |
ELASTIC | script.js | 0.99 | Quanto di ogni colpo passa alla lettera dopo: 1 è acciaio perfetto, 0.6 è stucco e presto dondolano tutte insieme. |
AIR | script.js | 0.3 | Quanto presto si spegne il dondolio: 0.05 va avanti a lungo, 1.5 si ferma quasi subito. |
SQUASH | script.js | 1 | Quanto si schiacciano le lettere sull’asse della larghezza a ogni urto (0 = per niente). |
--accent | style.css | #e5432a | Il colore dei fili che portano il colpo. |
--weight | style.css | 760 | Il peso del carattere delle lettere, da 100 a 900. |
Quando usarla
Per un titolo che si lascia toccare e spiega una cosa sola: l’apertura di un portfolio, la pagina 404, la copertina di un progetto di fisica o di tipografia, un momento di gioco in una landing page, la pagina «chi siamo» di uno studio che lavora sul movimento. Funziona con qualunque parola corta, anche il nome di un marchio.
Sul telefono
La stessa fisica con le misure adattate: la parola occupa una parte più grande della larghezza, i fili sono più corti, e l’angolo del sollevamento si riduce perché l’ultima lettera non esca dallo schermo. Si tira una lettera col dito, un tocco solleva la prima.
Con il movimento ridotto
Niente si muove: la sbarra, i fili e le lettere compaiono in dissolvenza. Il clic fa sparire le lettere e le fa ricomparire con l’ultima (o le ultime due) già fuori dall’altra parte, il contatore sale di uno, e dopo un poco tornano tutte appese ferme.
Trappole
- Con un filo solo le lettere giravano insieme al filo, come un’insegna: due lettere sollevate insieme ruotavano attorno a perni diversi e i loro angoli entravano nella vicina di una ventina di pixel. Con due fili paralleli la lettera resta diritta e la distanza fra le vicine resta orizzontale, com’è nella fisica degli urti.
- Con un’aria troppo forte (0,7) metà dell’energia se ne andava fra il sollevamento e il primo colpo, e l’ultima lettera saliva a 24 gradi invece che a 34: sembrava un errore, non attrito. Ora l’aria è leggera, e le ultime oscillazioni le spegne un soffio d’attrito ai nodi, che tocca appena quelle grandi.
- Con una restituzione di 0,97 la culla perdeva il suo trucco già al primo colpo: la prima lettera restava a dondolare di dieci gradi mentre l’ultima partiva, e le due andavano insieme in senso opposto. Con 0,99 il colpo pulito, una dentro e una fuori, dura quasi fino alla fine.
- L’attrito ai nodi teneva ferme le lettere di mezzo a tre decimi di grado, proprio sulla soglia del sonno, e la culla rischiava di non addormentarsi mai: la soglia è a sei decimi, e la scivolata finale le rimette a zero.
- Lo schiacciamento tornava con elastic.out pieno e nel rimbalzo le lettere si allargavano dell’8 per cento, entrando nelle vicine che stanno a un capello: il ritorno passa per un massimo di un pixel e poi si assesta stretto.
- Il clic del collaudo cade in mezzo alla parola, sopra una lettera: premere su una lettera la prende solo dopo cinque pixel di movimento, altrimenti è un clic e solleva la prima.
- Il video della scheda si ferma quando l’immagine resta uguale per un secondo senza animazioni GSAP in programma: finché la culla è sveglia c’è sempre un gsap.delayedCall che aspetta, e l’ultima scivolata al posto esatto è un tween.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 10 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 16 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.
