Lettere in piedi con l'ombra lunga
Testo, Scroll, 3D
NuovaGratis
Torna alla libreria
Il titolo riscritto dal cursore
Un’animazione di testo nello stile minimal: uno studio di copywriting corregge il suo titolo davanti a te. Il cursore di testo, una barretta sottile, scivola su una parola e la seleziona con un’evidenziatura che si apre a molla; la parola si cancella stringendosi sull’asse della larghezza del carattere e la nuova si scrive lettera per lettera, allargandosi. Tre correzioni di fila, da «Make it louder.» a «Say it once.».
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 headline rewritten by the caret</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-flex@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<!-- one headline, edited in front of you: the script builds every letter it will ever need, the caret and the
selection, and places them from the middle of the page -->
<h1 class="line" data-line>
<span class="sr" data-sr>Say it once.</span>
<span class="highlight" data-highlight aria-hidden="true"></span>
<span class="letters" data-letters aria-hidden="true"></span>
<span class="caret" data-caret aria-hidden="true"></span>
</h1>
<footer class="foot" aria-hidden="true">
<span class="foot__brand">Plainword</span>
<span class="foot__count"><span class="foot__num" data-count>0</span> characters</span>
</footer>
</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 «Il titolo riscritto dal cursore» da Animorio e adattala al mio sitoCosa fa
Su una carta bianco caldo, al centro, cresce una barretta sottile: il cursore di testo. Lampeggia una volta e scrive «Make it louder.»: ogni lettera compare stretta e leggera, si apre un poco oltre la sua larghezza, torna indietro e prende peso, con il ritmo irregolare di una mano sui tasti; la riga resta al centro inseguendo il suo posto con una molla. Il cursore lampeggia, poi scivola alla fine di «louder» e la seleziona all’indietro: l’evidenziatura vermiglio si apre a molla, supera la parola di un capello e torna, e le lettere sotto diventano color carta. Un attimo dopo la parola si cancella stringendosi, l’ultima lettera per prima, finché resta solo il cursore, e «clearer» si scrive al suo posto. La seconda correzione seleziona «Make» come un doppio clic, dal centro verso i due lati, e scrive «Say»; la terza seleziona «clearer» in avanti, dall’inizio, e scrive «once». Sulla riga finale, «Say it once.», il punto fa un piccolo salto e si accende nel vermiglio. Poi il cursore seleziona tutto, la frase si stringe dentro di lui, il cursore si ritira e tutto ricomincia. In fondo alla pagina il nome dello studio e il conto dei caratteri, che scatta su o giù a ogni lettera.
Come funziona
Le versioni e le correzioni
SENTENCES è l’elenco delle versioni del titolo. Ogni versione si divide in parole, spazi e punteggiatura; fra due versioni restano le parole uguali all’inizio e alla fine, e quelle in mezzo sono la correzione: si selezionano e si sostituiscono. Ogni lettera che comparirà si crea una volta sola, nell’ordine della riga: quelle cancellate restano al loro posto con larghezza zero, e le nuove si inseriscono subito dopo. Così la timeline sa in anticipo ogni posizione, si ripete e si può riavvolgere.
Ogni lettera misurata sull’asse
Roboto Flex ha l’asse della larghezza da 25 a 151. Per ogni lettera si misura l’avanzamento a 15 larghezze, leggera e al peso pieno, e la crenatura di ogni coppia che sta vicina in qualche versione. A ogni fotogramma l’avanzamento si legge dalla tabella (interpolando su larghezza e peso), si moltiplica per la presenza della lettera, da 0 a 1, e si somma: la cella della lettera si sposta con translate3d e si schiaccia con scaleX dalla sua sinistra, con il font-variation-settings del momento.
Scrivere e cancellare
Scrivendo, ogni lettera passa da presenza 0 a 1 in un sesto di secondo, e la sua larghezza dal valore di SQUEEZE a quella piena con una molla smorzata scritta come easing (supera la meta di una parte che decide BOUNCE e torna esattamente lì); il peso sale di 260. I tempi seguono un ritmo irregolare, un po’ più lento intorno agli spazi. Cancellando succede il contrario: la larghezza scende, poi la presenza, dall’ultima lettera alla prima.
Il cursore e la selezione
Il cursore e la selezione vivono sui confini fra le lettere (il bordo sinistro di ognuna), ricalcolati a ogni fotogramma: così seguono la riga che si muove. La selezione va dal confine A al B e si apre da un punto (la fine, il centro o l’inizio della parola) con una molla. Il cursore viaggia verso quel punto, poi resta appeso al bordo che si muove. La copia color carta di ogni lettera selezionata è tagliata con clip-path sulla selezione, nei pixel della lettera: il bordo resta netto anche a metà di una lettera.
La riga al centro e il punto finale
La riga vuole stare centrata: la sua posizione insegue metà della larghezza totale con una molla vera, integrata a passi di 1/240 di secondo, e così, quando una parola cresce o si stringe, la frase si sposta con un piccolo assestamento. Sull’ultima versione l’ultimo segno (il punto) fa un salto di un decimo di riga e torna con una molla, mentre il suo colore passa al vermiglio con color-mix. Il lampeggio del cursore sono set della timeline ogni 0,53 secondi: tutta la regia è una timeline GSAP che si ripete.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SENTENCES | script.js | ['Make it louder.', 'Make it clearer.', 'Say it clearer.', 'Say it once.'] | Il titolo e poi il titolo dopo ogni correzione. Fra una versione e la seguente si sostituiscono le parole che cambiano; è più bello se cambia una parola sola. |
WEIGHT | script.js | 620 | Il peso del titolo, da 100 (un capello) a 1000 (nerissimo). |
TYPING | script.js | 13 | Quante lettere scrive al secondo. |
HOLD | script.js | 1.4 | Quanti secondi resta ogni versione prima che il cursore si muova. |
BOUNCE | script.js | 0.5 | Quanto la selezione, le lettere nuove e la riga vanno oltre il loro posto prima di fermarsi: 0 niente, 1 molto. |
SQUEEZE | script.js | 25 | Quanto si stringe una parola prima di sparire, sull’asse della larghezza: 25 diventa un filo, 100 non si stringe. |
SPEED | script.js | 1 | La velocità di tutta l’animazione: 2 è il doppio, 0.5 la metà. |
LOOP | script.js | true | Se alla fine si cancella tutto e il titolo si riscrive. Con false resta sull’ultima versione. |
Quando usarla
Per il titolo d’apertura di uno studio di copywriting, di un’agenzia di contenuti, di un blog di scrittura o di un servizio che corregge i testi: racconta il lavoro di chi scrive, una correzione dopo l’altra. Funziona con frasi brevi dove cambia una parola alla volta.
Sul telefono
La stessa animazione su una riga: il carattere si misura perché la versione più lunga stia in nove decimi dello schermo, partendo da una larghezza un po’ più stretta (84 invece di 100) per tenere le lettere grandi. Cursore, selezione e molle restano uguali, in proporzione.
Con il movimento ridotto
Niente scorre e niente si stringe: ogni versione compare in dissolvenza già scritta, con il cursore fermo in fondo; la selezione compare in dissolvenza sulla parola da cambiare, poi la riga svanisce e ricompare corretta. Il punto finale si accende nel vermiglio senza saltare.
Trappole
- Confrontare le parole della versione vecchia (oggetti con le lettere) con quelle nuove (semplici testi) dava sempre «diverse»: la prima correzione selezionava tutta la frase e la riscriveva da capo. Il confronto va fatto testo con testo.
- Fra «r» e «.» Roboto Flex stringe la coppia: il confine fra le due lettere cade dentro la «r», e la selezione lasciava fuori metà della lettera. La selezione finisce dove finisce la lettera, senza la crenatura con la seguente, e il cursore sta a metà della crenatura.
- La molla della selezione, superando la parola, copriva metà del punto e lo rendeva color carta: sembrava un errore. Ora la copia chiara compare solo sulle lettere selezionate, e il superamento è di pochi pixel.
- Fra la fine di un giro e l’inizio del seguente il cursore restava solo sulla pagina per tre secondi, e sembrava finita: accorciati i tempi intorno alla ripartenza, il vuoto dura poco più di un secondo.
Librerie
GSAP 3.15.0, Roboto Flex (font variabile, assi wdth e wght) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,6 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.
