Lettere in piedi con l'ombra lunga
Testo, Scroll, 3D
NuovaGratis
Torna alla libreria
Il capolettera che scende
Un breve paragrafo giustificato, nello stile minimal: la prima lettera si alza dalla riga, le parole si fanno da parte in un’onda dall’alto e la lettera cresce nell’angolo, tre righe in giù, fra due guide sottili. Mentre cresce cambia anche la grandezza ottica del carattere, prende peso e atterra un pixel più in basso, rossa come l’iniziale di un miniatore; poi risale nella sua riga e il paragrafo si richiude.
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 drop cap that sinks in</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>
<!-- the column: two hairlines mark its edges; the script sets the paragraph inside, word by word. Then the first
letter lifts out of its line, grows and sinks into the corner, three lines deep, and the words step aside -->
<div class="measure" data-measure>
<i class="edge" data-edge aria-hidden="true"></i>
<i class="edge edge--right" data-edge aria-hidden="true"></i>
<i class="rule" data-rule aria-hidden="true"></i>
<i class="rule" data-rule aria-hidden="true"></i>
<p class="para" data-para></p>
<span class="cap" data-cap aria-hidden="true"></span>
<p class="foot" data-foot>
<span class="foot__brand">Ravelin</span>
<span class="foot__axis" aria-hidden="true">opsz <b data-op>24</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.
14 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 capolettera che scende» 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 giustificato in un carattere con le grazie: le parole salgono di poco e si posano. Sotto, a sinistra il nome della rivista inventata, Ravelin, e a destra la grandezza ottica del carattere, opsz 28. Poi la O di «Open» salta fuori dalla riga, un poco più grande, e resta sospesa sopra l’angolo. Le parole si fanno da parte in un’onda che scende riga per riga: le prime tre righe scivolano a destra, ognuna con un pixel di troppo e il ritorno, e le parole che non ci stanno più escono dalla fine della riga e rientrano all’inizio di quella sotto, quando la riga ha fatto posto. Nell’angolo libero si disegnano due guide sottili con le tacche alle estremità: l’altezza delle maiuscole della prima riga e la linea di base della terza. La O cresce e scende fra le due guide; mentre cresce la grandezza ottica la segue (il numero sotto conta fino a 72), il disegno della lettera si fa più fine e contrastato, prende peso e negli ultimi istanti diventa rossa. Atterra un pixel sotto la linea di base, si schiaccia appena e torna su, e le prime parole delle tre righe accanto sentono il colpo, dal basso in alto, mentre la guida di sotto trema di un pixel. Le guide si ritirano. Dopo una pausa la lettera risale, rimpicciolisce e torna nera, il paragrafo si richiude con la stessa onda, la O ricade al suo posto davanti a «pen»; poi le parole se ne vanno nell’ordine di lettura e tutto ricomincia.
Come funziona
Un carattere con le grandezze ottiche
Newsreader ha l’asse della grandezza ottica (opsz, da 6 a 72) e il peso da 200 a 800: il file «opsz» di Fontsource li tiene tutti e due. Con font-optical-sizing: auto il browser sceglie da solo la grandezza ottica uguale alla dimensione in pixel, quindi basta animare la dimensione vera della lettera (font-size) e non la scala: il capolettera grande è il taglio da titolo, più fine e contrastato, e non il taglio da testo ingrandito.
Le righe le fa lo script
Ogni parola è uno span posato a mano sulla sua linea di base. Lo script misura le parole nel browser, le spezza in righe (la riga si chiude quando la parola dopo non ci sta più) e le giustifica, tranne l’ultima riga; se una riga verrebbe troppo spaziata la lascia a bandiera. Lo fa due volte: con la O dentro la prima parola e con le prime righe rientrate. Così le due impaginazioni sono due mappe di posizioni, e GSAP porta ogni parola dall’una all’altra.
Il capolettera misurato
La lettera deve andare dall’altezza delle maiuscole della prima riga alla linea di base della terza: l’altezza delle maiuscole si legge su un canvas (measureText della H, actualBoundingBoxAscent), e da lì viene la dimensione del capolettera. Su un canvas si legge anche il margine sinistro e destro dell’inchiostro della lettera, così l’inchiostro parte dal bordo della colonna (una lettera tonda come la O lo passa di un soffio, come vuole l’occhio) e il rientro delle righe è misurato dal suo bordo vero. La linea di base dentro uno span si trova una volta con un elemento vuoto allineato alla base.
L’onda delle parole
Le righe partono una dopo l’altra, 80 millesimi di secondo l’una. Le parole che restano sulla loro riga scivolano tutte con la stessa curva, la prima nel verso della corsa per prima, così non si avvicinano mai; arrivano un pixel oltre e tornano. Le parole che cambiano riga escono di lato sfumando e rientrano dall’altra parte della riga nuova solo quando quella ha fatto posto.
La regia
Una timeline GSAP sola, che ricomincia. Lo stato della lettera (dimensione, posizione, linea di base, schiacciamento) è un oggetto che i tween animano, e una funzione lo disegna a ogni aggiornamento: la dimensione e la linea di base insieme, con l’origine della trasformazione sulla base. Peso e colore sono tween sull’elemento. L’atterraggio ha il pixel di troppo, lo schiacciamento su una molla smorzata scritta come funzione di easing, il colpetto alle righe accanto e alla guida.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TEXT | script.js | 'Open any good book and the eye finds its way in at once. Before the first word there is only white, a field with no path across it. One large letter, sunk into the first lines, is the door: it tells the reader where the story starts, and how quietly to walk in.' | Il paragrafo. La sua prima lettera diventa il capolettera; va bene un testo di cinque o sei righe. |
DROP | script.js | 3 | Di quante righe scende il capolettera, da 2 a 4. |
WEIGHT | script.js | 560 | Il peso che il capolettera prende scendendo, da 200 (leggero) a 800 (nero); il testo resta a 400. |
JUSTIFY | script.js | true | Il paragrafo giustificato, come in una rivista; spento è a bandiera. |
HOLD | script.js | 2.4 | I secondi in cui il capolettera resta nel suo angolo prima di risalire. |
SPEED | script.js | 1 | La velocità di tutto: 2 è il doppio, 0.5 la metà. |
LOOP | script.js | true | Se il capolettera risale e il paragrafo si ricompone da capo; spento, il capolettera resta al suo posto. |
--accent | style.css | #d63a22 | Il colore del capolettera quando è atterrato, il rosso dei miniatori. |
Quando usarla
Per l’inizio di un testo che si vuole far leggere: il primo paragrafo di un articolo in un blog personale o in una rivista, il racconto di un’osteria o di una cantina, la pagina «chi siamo» di uno studio grafico o di una casa editrice. Funziona con un paragrafo breve, di cinque o sei righe, che comincia con una maiuscola dalla bella forma.
Sul telefono
La stessa animazione con lo stesso testo: la colonna è larga quanto lo schermo meno i margini e il carattere è di 18 px, così le righe sono sei, più corte, e il capolettera è più piccolo ma scende sempre di tre righe. Le due impaginazioni si rifanno 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é cresce: il paragrafo compare in dissolvenza, poi svanisce e ricompare già con il capolettera rosso nel suo angolo e le guide, che sfumano via. Dopo la pausa svanisce di nuovo e torna con la O nella sua riga; alla fine tutto svanisce e ricomincia.
Trappole
- La prima onda faceva partire le parole di una riga una dopo l’altra da sinistra: quelle partite prima raggiungevano quelle ancora ferme e le lettere si sovrapponevano («Beforethefirstword»). Ora tutte le parole di una riga scivolano con la stessa curva e la prima a partire è quella davanti nel verso della corsa: fra due parole lo spazio non scende mai sotto quello di partenza o di arrivo.
- Le parole che arrivano dalla riga sopra comparivano al loro posto mentre le parole della riga erano ancora lì e ci passavano sopra. Ora entrano 0,62 secondi dopo la partenza della loro riga, quando la riga ha già fatto posto.
- Ingrandire il capolettera con scale avrebbe dato il taglio da testo gonfiato, con le grazie grosse e i tratti sottili troppo spessi. Si anima font-size, e con font-optical-sizing: auto la grandezza ottica segue: per questo il capolettera è disegnato da una funzione (dimensione, linea di base e origine della trasformazione insieme) e non da un tween su scale.
- Il capolettera si disegna negli onUpdate dei tween: chi sposta la timeline con tl.seek(t) deve passare seek(t, false), perché seek di serie non chiama gli onUpdate e la lettera resterebbe della misura di prima.
- Allineare il capolettera alla sua scatola lo faceva scendere troppo e uscire dalla colonna a sinistra: la scatola di una lettera ha sopra lo spazio per gli accenti e ai lati i margini bianchi. L’altezza delle maiuscole e i margini dell’inchiostro si leggono su un canvas (actualBoundingBoxAscent, actualBoundingBoxLeft e Right) e la lettera si mette sul suo inchiostro.
Librerie
GSAP 3.15.0, Newsreader (font variabile, assi opsz 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 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.
