Lettere in piedi con l'ombra lunga
Testo, Scroll, 3D
NuovaGratis
Torna alla libreria
La parola che va a registro
Animazione di testo nello stile minimal: una parola grande è tagliata in strisce sottili, ognuna spostata di lato e disegnata più larga o più stretta, così non si legge. Un filo rosso scende lungo la parola e ogni striscia che tocca torna a registro, passa il suo posto di un pixel e ci torna; poi le strisce scivolano via una dopo l’altra e portano la parola successiva, di nuovo fuori registro.
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 coming into register</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-flex@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<!-- the word people read; everything drawn below is only its picture -->
<h1 class="sr" data-read>Offset</h1>
<!-- the rig: a column with the word in it. The script cuts the word into thin horizontal strips, each one a
window on its own copy of the line; a hairline runs down and the strips fall into register behind it -->
<div class="rig" data-rig aria-hidden="true">
<div class="guide guide--left" data-guide><i></i></div>
<div class="guide guide--right" data-guide><i></i></div>
<div class="line line--whole" data-whole></div>
<div class="strips" data-strips></div>
<div class="scan" data-scan><i></i></div>
</div>
<!-- an invisible copy of the word, to measure sizes and the baseline -->
<div class="line line--probe" data-probe aria-hidden="true"></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.
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 registro» da Animorio e adattala al mio sitoCosa fa
Su una carta color avorio due fili grigi sottilissimi si disegnano dall’alto e segnano i bordi di una colonna; su ognuno spuntano, con un piccolo scatto, le tacche dei tagli, una sotto l’altra come su un righello. Nella colonna entrano dai lati, una striscia dopo l’altra, i pezzi di una parola: OFFSET, tagliata in quattordici strisce orizzontali sottili. Ogni striscia è spostata di lato, una a sinistra e la vicina a destra, di quanto cresce e cala lungo la parola come un’onda, ed è disegnata un poco più larga o più stretta e più leggera: si vedono due fantasmi della parola intrecciati, e non si legge. Poi un filo rosso si disegna sopra le maiuscole e scende piano lungo la parola. Ogni striscia che il filo attraversa torna al suo posto: scivola di lato, prende la larghezza giusta e il suo peso pieno, passa il posto di un pixel e ci torna, e la striscia di sopra, già ferma, sente il colpo. Dall’alto in basso la parola si ricompone dietro il filo; quando arriva alla linea di base il filo si ferma un momento sotto le lettere e scorre via a destra, e OFFSET resta intera e nera. Dopo un respiro le strisce partono di nuovo, una dopo l’altra dall’alto, a sinistra e a destra alternate: la parola esce dalla colonna a pezzi e dai lati opposti entra la successiva, PROOF, già fuori registro, che aspetta il filo. Poi PRESS, e di nuovo OFFSET.
Come funziona
Le strisce
La parola si misura una volta: la grandezza del carattere, la linea di base (un inline-block vuoto messo in fondo alla parola si appoggia proprio lì) e l’altezza delle maiuscole (measureText della H su un canvas). Fra la cima delle maiuscole e la linea di base si fanno i tagli, ognuno arrotondato al pixel; la prima striscia sale fino in cima alla riga e l’ultima scende fino in fondo, così nessun pezzo di lettera resta fuori. Ogni striscia è una finestra con overflow hidden su una copia intera della riga.
Fuori registro
Ogni parola ha il suo disegno fuori registro, fatto una volta con un generatore casuale col seme: le strisce vicine vanno in versi opposti, e quanto si spostano cresce e cala lungo la parola come un’onda, con un po’ di rumore. Sulla stessa onda ogni striscia è più larga o più stretta sull’asse wdth (STRETCH) e più leggera sull’asse wght. Col seme ogni giro è identico al precedente.
Il filo e il ritorno
Il filo rosso scende con sine.inOut. Il momento in cui attraversa il mezzo di una striscia si ricava rovesciando la curva (acos di 1 meno due volte la quota, diviso pi greco), e lì parte il ritorno di quella striscia: un solo numero da 0 a 1 che dà lo scivolamento (power3.out), la larghezza, il peso e l’oscillazione di OVERSHOOT pixel oltre il posto, che si spegne da sola. La striscia di sopra, già a registro, prende un pezzo di quell’oscillazione: le vicine sentono il colpo.
Due parole per striscia
In ogni striscia scorre un nastro con due copie della riga: la parola di adesso al centro e la successiva appena fuori dalla colonna, a destra o a sinistra secondo la striscia. Spostando il nastro di una colonna intera, con expo.inOut e un piccolo ritardo da una striscia all’altra, la parola vecchia esce a pezzi e la nuova arriva già fuori registro. Poi una funzione rimette nella copia di centro la parola nuova e nel nastro quella dopo, e tutto ricomincia senza salti.
Un solo stato, disegnato a ogni fotogramma
La timeline muove solo numeri: per ogni striscia il ritorno e il cambio di parola, e la posizione del filo. Una funzione sul ticker di GSAP li traduce in transform e font-variation-settings e scrive solo quello che cambia. Quando tutte le strisce sono a registro si mostra una copia unica della parola al loro posto, identica al pixel. Le misure si rifanno quando cambia la finestra, e la timeline non se ne accorge.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORDS | script.js | ['Offset', 'Proof', 'Press'] | Le parole, una dopo l’altra: ognuna arriva fuori registro e il filo la rimette a posto. Parole corte e di lunghezza simile si leggono meglio. |
WEIGHT | script.js | 760 | Il peso della parola a registro, da 100 (un capello) a 1000 (nerissimo). Fuori registro le strisce sono più leggere. |
WIDTH | script.js | 90 | La larghezza della parola sull’asse wdth del carattere: 25 strettissima, 151 larghissima. |
STRIPS | script.js | 14 | In quante strisce si taglia la parola: poche e grosse si capisce subito cosa succede, tante e sottili sembra una stampa fuori registro. |
SCATTER | script.js | 0.12 | Quanto sono spostate le strisce fuori registro, in parti della larghezza della parola. La colonna si allarga di conseguenza. |
STRETCH | script.js | 18 | Quanto le strisce fuori registro sono più larghe o più strette, sull’asse wdth. Con 0 hanno tutte la larghezza giusta e restano solo spostate. |
OVERSHOOT | script.js | 1 | Di quanti pixel una striscia passa il suo posto prima di fermarsi. 0 si ferma secca; più di 4 diventa un rimbalzo. |
HOLD | script.js | 1.4 | Quanti secondi la parola resta a registro, intera, prima di partire verso la successiva. |
SPEED | script.js | 1 | La velocità di tutta l’animazione: 2 è il doppio, 0.5 la metà. |
Quando usarla
Per l’apertura di un sito dove una parola sola deve farsi notare e il tema è la precisione: una tipografia, una stampa d’arte, uno studio grafico, una rivista, un festival del design, un marchio che fa della cura dei dettagli il suo motto. Va bene anche per le parole che cambiano in un titolo (i servizi di uno studio, le sezioni di un portfolio). Chiede un carattere pesante e grande e molto spazio intorno.
Sul telefono
La stessa animazione: la colonna si misura per stare quasi in tutta la larghezza dello schermo e le strisce, gli spostamenti e il filo si ricavano dalla misura della parola. Le strisce restano tante anche sul telefono e diventano più sottili. Girando il telefono tutto si rimisura senza fermarsi.
Con il movimento ridotto
Niente strisce che si spostano e niente filo: la colonna c’è già, la parola resta ferma a registro qualche secondo, svanisce e al suo posto compare la successiva in dissolvenza.
Trappole
- Un taglio a mezzo pixel sfuma il bordo di due strisce, e a registro lascia una riga chiara attraverso la parola. I tagli si arrotondano al pixel, e quando tutte le strisce sono ferme si mostra una copia unica della parola al loro posto.
- Tagliando solo fra la cima delle maiuscole e la linea di base, gli accenti, la coda della Q e le parti che sporgono resterebbero fuori dalle strisce: la prima striscia arriva fino in cima alla riga e l’ultima fino in fondo.
- La colonna deve contenere la striscia più larga spostata del massimo, da tutte e due le parti: si misura la parola più lunga anche alla larghezza più grande che STRETCH può dare, non solo a quella a registro, altrimenti i pezzi si tagliano contro i fili.
- In una timeline fromTo disegna subito i suoi valori di partenza (immediateRender): costruendo tre giri di tween sulle stesse strisce, l’ultimo costruito rimetteva tutto fuori registro prima ancora di partire. Ogni fromTo ha immediateRender false.
- Alla fine di un giro il filo è sulla linea di base: se la sua posizione non si rimette a zero con un set all’inizio del giro dopo, si disegna sotto la parola invece che sopra.
- Con un disegno fuori registro davvero casuale ogni giro sarebbe diverso, e il video dell’anteprima non capirebbe mai quando il giro è finito: il generatore ha un seme, e ogni parola ha sempre lo stesso disegno.
Librerie
GSAP 3.15.0, Roboto Flex (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 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.
