Lettere in piedi con l'ombra lunga
Testo, Scroll, 3D
NuovaGratis
Torna alla libreria
La frase che alza la voce
Animazione di testo nello stile minimal: una frase breve in minuscolo sta sulle tre righe sottili del carattere, la linea di base, quella della x e quella delle maiuscole. Una lettera alla volta si abbassa un niente, scatta su come una molla fino alla riga delle maiuscole, la passa di un pixel e si posa, e le vicine si spostano per farle posto. Quando tutta la frase è maiuscola la riga delle maiuscole si accende nel colore d’accento; poi si spegne e le lettere tornano piccole, dall’ultima alla prima.
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 sentence that raises its voice</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>
<main class="stage" data-stage>
<!-- the sentence people read; everything drawn below is only its picture -->
<h1 class="sr" data-read>say it louder</h1>
<!-- the rig: three hairlines of the type (cap height, x-height, baseline) and the sentence standing on them.
The script splits the sentence into letters, each with its small and its capital form -->
<div class="rig" data-rig aria-hidden="true">
<div class="rule rule--cap" data-rule>
<i class="rule__line"></i>
<i class="rule__lit" data-lit></i>
<span class="rule__label" data-label>cap height</span>
</div>
<div class="rule rule--x" data-rule>
<i class="rule__line"></i>
<span class="rule__label" data-label>x-height</span>
</div>
<div class="rule rule--base" data-rule>
<i class="rule__line"></i>
<span class="rule__label" data-label>baseline</span>
</div>
<div class="phrase" data-phrase></div>
</div>
<!-- an invisible letter, to measure widths and the baseline -->
<span class="probe" data-probe aria-hidden="true"></span>
</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.
15 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 frase che alza la voce» da Animorio e adattala al mio sitoCosa fa
Su una carta color avorio tre righe sottili si disegnano da sinistra, una dopo l’altra: in basso la linea di base, nera; sopra quella della x, grigia; più in alto, tratteggiata, la riga delle maiuscole. A destra, in piccolo, ognuna ha il suo nome: baseline, x-height, cap height. Sulla linea di base salgono le lettere di una frase in minuscolo, say it louder, una dopo l’altra, e si posano con un pixel di troppo. Poi, da sinistra, una lettera alla volta alza la voce: si abbassa appena, come per prendere la rincorsa, e scatta in su diventando la sua maiuscola; in volo è un poco più stretta e più leggera, arriva alla riga tratteggiata, la passa di un pixel e torna giù a posarsi, prendendo il suo peso pieno. La maiuscola è più larga della minuscola, quindi le lettere vicine scivolano di lato per farle posto: quelle prima a sinistra, quelle dopo a destra, e la frase resta in mezzo. Quando anche l’ultima lettera è arrivata, la riga delle maiuscole si accende di blu da sinistra a destra, il suo nome diventa blu, e ogni lettera che la luce raggiunge prende per un attimo più peso. SAY IT LOUDER resta così per un respiro; poi la riga blu scorre via a destra e le lettere tornano minuscole, dall’ultima alla prima, cadendo sulla riga della x con un piccolo schiacciamento. E si ricomincia.
Come funziona
Le righe del carattere
L’altezza della x e quella delle maiuscole si misurano su un canvas con measureText, dalla x e dalla H (actualBoundingBoxAscent). La linea di base si trova con un inline-block vuoto messo accanto a una lettera: si appoggia proprio lì. Le tre righe si mettono a quelle altezze, su mezzo pixel, così il filo di un pixel resta nitido.
Due forme per ogni lettera
La frase si divide in lettere e ogni lettera ha un suo posto con dentro due span: la minuscola e la maiuscola, centrate e appese alla linea di base (transform-origin all’altezza della base). Le larghezze delle due forme si misurano una volta sola, con il loro spazio fra le lettere (le maiuscole ne vogliono un po’ di più).
Un numero per lettera
Ogni lettera ha un solo numero g, 0 minuscola e 1 maiuscola. Da g vengono l’altezza (dalla x alla riga delle maiuscole), la scala delle due forme, la dissolvenza fra l’una e l’altra mentre la lettera è più veloce e la sua larghezza. Sommando le larghezze si ricavano le posizioni, con la frase sempre centrata: le vicine si spostano da sole.
La molla col pixel di troppo
La salita è una curva fatta in casa, 1 meno e alla meno kt per il coseno di wt: passa 1 una volta sola e si posa. Lo smorzamento k si calcola perché il passaggio sia esattamente OVERSHOOT pixel sopra la riga delle maiuscole. Prima della molla c’è una piccola accucciata, e in volo gli assi wdth e wght del carattere variabile calano e tornano: la lettera si allunga verso l’alto e poi prende peso.
La riga che si accende
Una sola timeline di GSAP in loop fa la regia: le lettere una dopo l’altra, la riga blu che corre con power3.inOut, il ritorno in minuscolo da destra. Il momento in cui la riga blu raggiunge una lettera si trova rovesciando la curva power3.inOut, e lì la lettera prende peso. Una funzione sul ticker disegna tutto e scrive solo quello che cambia.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
PHRASE | script.js | 'say it louder' | La frase: corta, su una riga sola. Si mostra in minuscolo e poi in maiuscolo; la grandezza si adatta da sola alla larghezza. |
WEIGHT | script.js | 560 | Il peso delle lettere, da 100 (un capello) a 900 (nerissimo). In volo sono un po’ più leggere. |
WIDTH | script.js | 92 | La larghezza delle lettere sull’asse wdth del carattere: 62 strettissima, 125 larghissima. |
STEP | script.js | 0.13 | I secondi fra una lettera che cresce e la successiva. Con 0 crescono tutte insieme; con mezzo secondo si segue ogni lettera. |
OVERSHOOT | script.js | 1.5 | Di quanti pixel la maiuscola passa la riga delle maiuscole prima di posarsi. 0 arriva secca; sopra 6 diventa un rimbalzo. |
HOLD | script.js | 1.6 | Quanti secondi la frase resta tutta maiuscola, con la riga accesa, prima di tornare piccola. |
SPEED | script.js | 1 | La velocità di tutta l’animazione: 2 è il doppio, 0.5 la metà. |
Quando usarla
Per un titolo che deve farsi sentire senza gridare da subito: l’apertura di una campagna, il lancio di un prodotto, un festival, una radio o un podcast, una scuola di tipografia o di comunicazione, una pagina di manifesto. Funziona con frasi corte che passano bene dal tono basso a quello alto (say it louder, make it big, speak up). Vuole molto spazio intorno e una riga sola.
Sul telefono
La stessa animazione: la frase in maiuscolo si misura per stare in quasi tutta la larghezza dello schermo, e le righe, la molla e il pixel di troppo si ricavano da quella misura. I nomi delle righe compaiono solo se c’è posto a destra della frase, quindi sul telefono in verticale restano nascosti. Girando il telefono tutto si rimisura senza fermarsi.
Con il movimento ridotto
Niente lettere che saltano e niente righe che corrono: le righe ci sono già, la frase in minuscolo resta ferma, svanisce e torna in maiuscolo con la riga delle maiuscole accesa; dopo qualche secondo svanisce di nuovo e torna minuscola.
Trappole
- Una maiuscola che compare di colpo al posto della minuscola salta all’occhio. La dissolvenza fra le due forme si fa quando hanno la stessa altezza (la maiuscola parte grande quanto la x) e solo nel tratto più veloce della molla: lì l’occhio legge un movimento, non un cambio.
- Le ascendenti di l, d, t sono più alte della riga delle maiuscole: se la minuscola si allunga tanto quanto la maiuscola cresce, mentre svanisce sfora sopra la riga. La minuscola si allunga solo un terzo e svanisce presto.
- Con una molla tipo elastic.out il rimbalzo cambia con l’altezza del salto: sul telefono, dove il salto è di pochi pixel, sparirebbe, sul computer grande diventerebbe un cartone animato. La curva è fatta in casa e lo smorzamento si calcola dai pixel che si vogliono oltre la riga.
- Una riga di un pixel messa su un’altezza intera cade a cavallo di due pixel e diventa grigia e spessa. Le righe si mettono a mezzo pixel; quella blu, di due pixel, sta sopra la riga, così le maiuscole non la coprono.
- In una timeline fromTo disegna subito i valori di partenza (immediateRender): costruendo la salita e la discesa delle stesse lettere, l’ultima costruita le rimetteva maiuscole prima di cominciare. Ogni fromTo ha immediateRender false.
- Lo spazio fra le parole non ha una maiuscola, ma con le maiuscole intorno sembra stretto: si allarga piano con la media delle lettere già cresciute.
Librerie
GSAP 3.15.0, Archivo (font variabile, assi wght e wdth) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,0 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.
