Lettere in piedi con l'ombra lunga
Testo, Scroll, 3D
NuovaGratis
Torna alla libreria
La parola sola che risale
Un breve paragrafo a bandiera, nello stile minimal, con l’ultima parola rimasta da sola sull’ultima riga: la riga sopra si stringe di un soffio sull’asse della larghezza del carattere, la parola scivola sotto il suo posto, risale a fine riga e il suo punto cade sul bordo della colonna, nel colore d’accento.
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 lone word that climbs back</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-serif@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<!-- the column: two hairlines mark its edges; the script sets the paragraph inside, ragged right, with the last
word left alone on its own line. Then the line above tightens on the width axis and the word climbs back -->
<div class="measure" data-measure>
<i class="guide" data-guide aria-hidden="true"></i>
<i class="guide guide--right" data-guide aria-hidden="true"></i>
<p class="para" data-para></p>
<i class="span" data-span aria-hidden="true"></i>
<p class="foot" data-foot>
<span class="foot__brand">Quoin Press</span>
<span class="foot__axis" aria-hidden="true">wdth <b data-wd>100</b></span>
</p>
</div>
</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
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 sola che risale» da Animorio e adattala al mio sitoCosa fa
Su una carta color avorio due righe sottilissime si disegnano dall’alto e segnano i bordi di una colonna. Dentro, una riga dopo l’altra, si compone un paragrafo a bandiera in un carattere con le grazie: ogni parola arriva stretta, sale di poco e si allarga fino alla sua larghezza normale con una molla, così il margine destro irregolare cresce e si posa. L’ultima parola, «alone.», resta da sola sull’ultima riga e accanto a lei una quota sottile misura il vuoto fino al bordo. Poi la riga sopra si stringe, parola dopo parola, sull’asse della larghezza (lo spazio fra le parole resta lo stesso) e sotto, a destra, il valore wdth conta da 100 a 91. La parola sola si stringe anch’essa, scivola lungo la sua riga vuota inclinandosi appena nella corsa mentre la quota si ritira davanti a lei, poi salta su nello spazio liberato a fine riga, atterra un pixel oltre il suo posto con un piccolo schiacciamento e torna; le parole della riga sentono il colpo e arretrano di un pixel, dall’ultima alla prima. Per ultimo il punto fa un saltello, diventa rosso in aria e cade esattamente sul bordo destro della colonna, che trema di un pixel. La colonna si accorcia di una riga, il paragrafo riposa, poi le parole si stringono e se ne vanno nell’ordine di lettura, i fili si ritirano e tutto ricomincia.
Come funziona
Un carattere con le grazie che si stringe
Roboto Serif ha l’asse della larghezza da 50 a 150 e il peso da 100 a 900: il file «wdth» di Fontsource li tiene tutti e due ed è leggero. Ogni parola è uno span inline-block con la sua variabile CSS --wd, e il CSS la porta nell’asse con font-variation-settings: 'wdth' var(--wd), 'wght' var(--wg). GSAP anima direttamente la variabile ('--wd' in un tween), parola per parola.
Le righe le decide chi scrive
La bandiera non è lasciata al browser: ogni riga del paragrafo è una voce di LINES, una riga flex che non va a capo, con lo spazio fra le parole misurato una volta («n n» meno «nn»). Così l’ultima parola resta sola sempre, a ogni larghezza di finestra, e al telefono il paragrafo è lo stesso, solo più piccolo.
La colonna nasce dal testo
La larghezza della colonna si ricava dalle righe: la riga più lunga ne occupa il 95,5% e la penultima con la parola sola, a larghezza normale, la supera del 3,5%. Poi il carattere si ingrandisce finché la colonna sta nella finestra (al massimo 40 px, 30 al telefono) e tutto si misura di nuovo alla grandezza vera.
La larghezza che ripara la riga
Una ricerca binaria sull’asse wdth (sedici passi, misurando le righe vere con getBoundingClientRect) trova il valore che porta la penultima riga più la parola sola esattamente fino al bordo. Al bordo deve arrivare l’inchiostro del punto, non la sua scatola: il margine destro del punto si legge su un canvas nello stesso carattere (measureText, width meno actualBoundingBoxRight) e si lascia fuori.
La regia
Una timeline GSAP sola, che ricomincia: le parole entrano con una molla smorzata scritta come funzione di easing (BOUNCE), la riga sopra si stringe con uno stagger, la parola sola scivola con power3.inOut e salta con power2.out e power2.in, poi l’overshoot di un pixel e il ritorno; il punto ha i suoi tween di salto, colore e schiacciamento, e il filo destro un colpetto di un pixel. Le altezze dei fili e la nota sotto si accorciano di una riga con una molla morbida.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LINES | script.js | ['Set the measure, mind the rag,', 'give each line the same quiet', 'colour, and when the text', 'runs short, never leave a word'] | Il paragrafo, riga per riga, a bandiera. La riga più lunga decide la colonna; l’ultima riga è quella dove risale la parola sola. |
LAST | script.js | 'alone.' | La parola rimasta da sola sull’ultima riga: risale alla riga sopra e il suo ultimo carattere cade nel colore d’accento. |
WEIGHT | script.js | 380 | Il peso del paragrafo, da 100 (un capello) a 900 (nerissimo). |
SQUEEZE | script.js | 62 | La larghezza da cui le parole partono e a cui tornano, sull’asse wdth: 50 è la più stretta del carattere, 100 la normale. |
BOUNCE | script.js | 0.35 | Quanto le parole rimbalzano quando si posano: 0 si fermano secche, 1 rimbalzano molto. |
HOLD | script.js | 2.2 | I secondi in cui il paragrafo riparato resta fermo prima di andarsene e ricominciare. |
SPEED | script.js | 1 | La velocità di tutto: 2 è il doppio, 0.5 la metà. |
LOOP | script.js | true | Se il paragrafo se ne va e si ricompone da capo. |
--accent | style.css | #e5432a | Il colore del punto finale, quando la parola è tornata al suo posto. |
Quando usarla
Per una pagina dove la scrittura e la tipografia contano: il manifesto di uno studio grafico o di una casa editrice, l’introduzione di un blog personale o di una rivista, la pagina «chi siamo» di una fonderia di caratteri. Funziona con un paragrafo breve, di quattro o cinque righe, che finisce con una parola che vale la pena di guardare.
Sul telefono
La stessa animazione con le stesse righe: la colonna è larga quanto lo schermo meno i margini e il carattere si rimisura per starci (sui 19 px su un telefono comune). La larghezza che ripara la riga si cerca di nuovo alla grandezza vera; se la finestra cambia larghezza il paragrafo si ricompone da capo, se cambia solo l’altezza (la barra dell’indirizzo) va avanti.
Con il movimento ridotto
Niente si muove né si allarga: i fili e il paragrafo compaiono in dissolvenza già alla larghezza normale, con la parola sola sull’ultima riga. Poi le due ultime righe svaniscono e ricompaiono già riparate, con la parola in fondo alla riga sopra e il punto rosso; alla fine tutto svanisce e ricomincia.
Trappole
- La prima versione faceva volare la parola in arco dalla sua riga alla fine di quella sopra: a metà volo passava sopra «runs short» e le lettere si sovrapponevano. Ora scivola lungo la sua riga vuota, sotto il suo posto, e salta su solo quando è già oltre l’ultima parola della riga.
- Con la larghezza misurata sulle scatole delle lettere il punto si fermava due pixel e mezzo prima del filo: la scatola di un punto ha un margine bianco a destra. Il margine si legge su un canvas (width meno actualBoundingBoxRight) e si aggiunge alla misura da raggiungere.
- Con la penultima riga lunga il 6% più della colonna la riga riparata scendeva a wdth 83 e si vedeva stretta accanto alle altre; al 3,5% basta wdth 91, che si nota appena ed è quello che fa un compositore vero.
- Una timeline con repeat e tween fromTo scrive i valori di partenza appena costruita: per questo la timeline ha immediateRender: false nei suoi default e un reset() all’inizio di ogni giro, che rimette tutte le parole strette e trasparenti.
- Lo spostamento della parola va sulla riga che la contiene, non sulla parola: la parola ha già i suoi tween di entrata e di uscita su y e opacità, e due tween sulla stessa proprietà dello stesso elemento si sarebbero calpestati. La riga sola è larga quanto la parola (width: max-content), così la rotazione gira intorno al suo centro.
Librerie
GSAP 3.15.0, Roboto Serif (font variabile, assi wght e wdth) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,2 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 15 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.
