Lettere in piedi con l'ombra lunga
Testo, Scroll, 3D
NuovaGratis
Torna alla libreria
La parola che va a capo
Una colonna di giornale stretta fra due fili sottili, nello stile minimal: la colonna si stringe e si allarga piano e il testo si ricompone a ogni pixel. Quando una sillaba della parola lunga non ci sta più, cade dalla fine della riga e atterra sulla riga sotto con una molla, mentre un trattino vermiglio resta appeso nel margine e dondola un poco. Col puntatore i fili si spostano a mano.
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>The word that wraps</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/opsz.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<!-- a newspaper column between two hairline guides: the script sets the article inside, piece by piece, and sets
it again every time the column changes its measure -->
<i class="guide" data-guide aria-hidden="true"></i>
<i class="guide" data-guide aria-hidden="true"></i>
<i class="dim" data-dim aria-hidden="true"></i>
<i class="dim" data-dim aria-hidden="true"></i>
<p class="read" data-read aria-hidden="true"><b data-chars>24</b> characters a line</p>
<p class="mast" data-mast>Brinemoor</p>
<p class="col" data-col></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 «La parola che va a capo» da Animorio e adattala al mio sitoCosa fa
Su una carta color avorio due fili sottili scendono dall’alto e segnano i bordi di una colonna; in cima un filo orizzontale si allunga dal centro e porta la misura, «21 characters a line», e sopra c’è la testata, Brinemoor. Dentro arriva l’articolo, una parola dopo l’altra: «The mayor called the old tide clock extraordinarily sensible.» La parola lunga è già spezzata: «extraor-» a fine riga, con il trattino rosso appeso fuori dal testo, e «dinarily» sotto. Poi la colonna comincia a stringersi. Ogni volta che il filo arriva addosso a una parola, la parola cade dalla fine della riga e atterra all’inizio di quella sotto, sottile, e prende peso mentre si posa con un piccolo schiacciamento; le parole che restano scivolano per farle posto e la riga sotto sente il colpo. Le righe si ricompongono una dopo l’altra, dall’alto in basso. La parola lunga si spezza in sillabe sempre più indietro, «extraor-», «extra-», «ex-»: a ogni taglio il trattino si aggancia e dondola come appeso a un chiodo, poi si ferma. Il numero dei caratteri per riga scende con la colonna. Poi la colonna si allarga fino in fondo, le sillabe risalgono e la parola torna intera; infine torna a metà, l’articolo si solleva e svanisce, i fili si ritirano e tutto ricomincia. Muovendo il mouse sulla pagina (o trascinando il dito sul telefono) i fili seguono il puntatore e diventano scuri: la colonna è larga quanto la distanza del puntatore dal centro.
Come funziona
Ogni pezzo per conto suo
Il testo è scritto in TEXT con una sbarra verticale dove una parola si può spezzare (ex|tra|or|di|nar|ily). Ogni parola senza sbarre, e ogni sillaba delle altre, è uno span messo con un transform, e ogni sillaba che si può spezzare ha il suo trattino, uno span con il carattere «-» nel colore d’accento. Le larghezze si misurano una volta sola, col carattere caricato e la grandezza ottica fissata (opsz uguale alla grandezza del testo, così le misure non cambiano col peso dell’animazione).
Comporre la colonna a ogni fotogramma
A ogni fotogramma la larghezza della colonna dice come va il testo: una parola che non ci sta si spezza dopo l’ultima sillaba che ci sta (il trattino resta fuori, appeso nel margine, quindi non conta), e se non ci sta nemmeno la prima va a capo intera. Il risultato è un elenco di righe, una per pezzo. Per non farlo tremare quando la colonna sta proprio sul confine, la composizione vecchia resta finché ci sta ancora entro 2,5 pixel.
Chi esce, chi scivola, chi atterra
Quando l’elenco cambia, per ogni pezzo si guarda dov’era e dove va. Se resta sulla sua riga riceve la differenza come spostamento e torna a zero con una molla. Se cambia riga, una copia esce dal bordo (a destra scendendo, a sinistra salendo) e svanisce, e il pezzo vero cade sul posto nuovo dall’alto con una molla smorzata scritta come easing (BOUNCE decide quanto passa la riga), più sottile (wght 230) e poi col suo peso, con uno schiacciamento e un piccolo colpo alle parole vicine.
Un’onda, non un mucchio
Quando una parola va a capo, tutte le righe sotto si ricompongono. Animate insieme si accavallavano; ora vanno a tempo: ogni riga parte un decimo di secondo dopo quella sopra, e dentro una riga prima escono le parole che se ne vanno, poi scivolano quelle che restano, poi atterrano le nuove, una parola dopo l’altra. Le sillabe della stessa parola viaggiano insieme.
Il trattino appeso
Il trattino sta alla fine della sua sillaba e ruota intorno al suo capo sinistro, all’altezza misurata su un canvas (il centro del carattere «-» rispetto alla linea di base). È un pendolo smorzato calcolato a ogni fotogramma: quando si aggancia riceve una spinta (SWING), e sente anche l’accelerazione della sillaba che rimbalza. Così dondola di una decina di gradi e si ferma in meno di un secondo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TEXT | script.js | 'The mayor called the old tide clock ex|tra|or|di|nar|ily sensible.' | L’articolo. Una sbarra verticale | segna dove una parola si può spezzare: lì compare il trattino. Testi corti, con una parola lunga verso la fine, danno le cadute più chiare. |
NARROW | script.js | 5.4 | La colonna più stretta, in em del testo. Tienila più stretta della parola lunga, così a colonna stretta la parola è sempre spezzata. |
WIDE | script.js | 12.5 | La colonna più larga, in em. Al telefono si ferma prima del bordo dello schermo. |
DRIFT | script.js | 5.5 | I secondi che la colonna impiega per chiudersi: più alto è più lento, e le cadute arrivano una alla volta. |
BOUNCE | script.js | 0.4 | Quanto una sillaba che atterra passa la riga prima di posarsi: 0 si ferma secca, 1 rimbalza molto. |
SWING | script.js | 1 | Quanto dondola il trattino quando si aggancia: 0 sta fermo, 2 dondola il doppio. |
JUSTIFY | script.js | false | Con true le righe vanno da un filo all’altro come in un giornale (e gli spazi fra le parole si allargano); con false sono a bandiera, allineate a sinistra. |
SPEED | script.js | 1 | La velocità del giro: 2 è il doppio, 0.5 la metà. |
Quando usarla
Per un blog, una rivista o il sito di un giornale, accanto a un articolo o in apertura, quando si vuole far vedere che la tipografia è curata; per una fonderia di caratteri o uno studio grafico che parla di misura e sillabazione; per la pagina «chi siamo» di una casa editrice. Funziona con frasi brevi e una sola parola lunga.
Sul telefono
La stessa animazione: il testo è un po’ più piccolo e la colonna più larga si ferma prima del bordo dello schermo. Trascinando il dito di lato sulla pagina si spostano i fili; staccandolo la colonna torna al suo giro. Lo scorrimento in verticale resta libero.
Con il movimento ridotto
Niente scivola né cade: la colonna compare in dissolvenza a tre larghezze, una dopo l’altra (a metà, stretta, larga), con il testo già composto e il trattino fermo al suo posto, e fra una larghezza e l’altra svanisce. Il puntatore sposta ancora i fili, ma le righe si ricompongono subito, senza movimento.
Trappole
- Una variabile chiamata top in cima allo script dava «Identifier 'top' has already been declared»: top è già window.top. Si chiama topY.
- gsap.killTweensOf(pezzo) nel reset all’inizio del giro uccideva anche le tween della timeline sullo stesso oggetto, e il testo non compariva mai. Il reset ferma solo le proprietà delle cadute (ox, ay, ao, lift, sq, th).
- Quando una parola va a capo si ricompongono tutte le righe sotto: animate tutte insieme, uscite e arrivi si accavallavano e la colonna diventava un mucchio di parole. Serve l’ordine: riga per riga, e dentro la riga prima chi esce, poi chi scivola, poi chi atterra.
- Con la colonna stretta 6,6 em la parola lunga (6,4 em) ci stava intera, e il trattino spariva proprio quando la colonna era più stretta. NARROW va tenuto sotto la larghezza della parola lunga.
- Una colonna ferma proprio sul confine di un a capo tremava fra due composizioni. La composizione vecchia resta finché ci sta ancora entro 2,5 pixel (con il puntatore che trema di un pixel succede subito).
- Le sillabe della stessa parola, scivolando ognuna con il suo spostamento, si sovrapponevano col puntatore veloce: le sillabe che restano sulla stessa riga prendono lo spostamento della sillaba prima e scivolano come un pezzo solo.
Librerie
GSAP 3.15.0, Newsreader (font variabile, assi opsz e wght) 5.3.0.
Compressi con gzip, i tre file della demo pesano 9,3 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.
