Nastro che accelera con lo scorrimento
Scroll, Testo, Hover
Gratis
Torna alla libreria
L’anatomia della lettera
Nello stile minimal: una parola grandissima in un carattere graziato, sulle quattro righe sottili di un campionario tipografico. Puntando una parte di una lettera (l’asta, la pancia, l’orecchio della g) un mirino sottile si posa sul punto, una linea di richiamo vermiglia si disegna con una piega e il nome della parte sale dalla sua maschera con una riga che spiega cos’è; la lettera letta resta nera, le altre si fanno grigie.
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>Anatomy of a letter</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/inter-tight@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<header class="top">
<span class="top__name">Kestrel Type</span>
<span class="top__note">Specimen, the parts of a letter</span>
</header>
<!-- one word set very large on four thin guide lines. Pointing at a part of a letter draws a leader line from it
to its name, like the notes on a type specimen; pointing at a guide line names the line -->
<div class="sheet" data-sheet>
<div class="guides" aria-hidden="true" data-guides></div>
<p class="word" data-word aria-label="Rag"></p>
<svg class="notes" aria-hidden="true" data-notes></svg>
<div class="labels" aria-live="polite" data-labels></div>
</div>
<p class="hint" data-hint>Point at a part of a letter</p>
</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.
84 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 «L’anatomia della lettera» da Animorio e adattala al mio sitoCosa fa
Su un fondo color carta c’è la parola Rag in Fraunces, grandissima, al centro, su quattro righe grigie sottilissime che attraversano la pagina, ognuna col suo nome in piccolo a destra: Cap height, x-height, Baseline, Descender. Aprendo la pagina le righe si allungano da sinistra, le lettere salgono una dopo l’altra pesanti e si assottigliano fino al loro peso; poi si apre da sola la prima nota, sulla pancia della R. Una nota è fatta così: un mirino sottile a croce vermiglio si posa sulla parte girando e passando di un niente la sua misura, una linea sottile vermiglia parte da lì in diagonale, si piega e corre in orizzontale per un tratto breve, e alla sua fine il nome della parte (Bowl) sale dalla sua maschera, con sopra o sotto una riga grigia che dice cos’è (A curved stroke that closes a round space). Le note sopra la parola hanno la spiegazione sopra il nome, quelle sotto la parola sotto. La lettera della parte resta nera, le altre si fanno grigio chiaro. Passando su un’altra parte la nota vecchia si richiude nella sua lettera mentre la nuova si disegna; altrimenti l’ultima nota resta aperta. Le parti sono nove: Stem, Bowl, Leg e Serif della R, Terminal e Bowl della a, Ear, Link e Loop della g. Lontano dalle lettere, passando su una delle quattro righe, la riga si accende di vermiglio con un piccolo colpo e il suo nome diventa nero.
Come funziona
Le parti in em
Ogni parte è scritta in PARTS con la lettera a cui appartiene, dove cade attraverso la lettera (da 0 a 1 della sua larghezza) e dove cade dall’alto della riga (in em del corpo). Così il punto segue la parola a qualunque misura: basta leggere la grandezza del carattere e la larghezza di ogni lettera. I posti sono misurati su Fraunces con l’asse opsz al massimo, e valgono per i pesi da 200 a 600; anche le quattro righe guida sono in em (GUIDES).
Una nota è una piccola timeline
Ogni nota ha una timeline GSAP in pausa: il mirino entra con scale e rotation su back.out (svgOrigin sul punto della parte), la linea di richiamo si disegna con stroke-dashoffset in DRAW secondi, e nome e spiegazione salgono dalle loro maschere con yPercent, sfalsati. Aprire la nota è play, chiuderla è reverse con timeScale quasi doppio, così la vecchia si richiude mentre la nuova si apre.
Dove va il nome
Il richiamo parte dal punto, sale (o scende) in diagonale fino a sopra l’altezza delle maiuscole (o sotto il discendente), si piega e corre in piano per 28 pixel; il nome sta alla sua fine, allineato verso fuori. Se dal lato scelto il nome uscirebbe dalla pagina, il richiamo va dall’altra parte. Sul telefono il richiamo va dritto in su o in giù e il nome si centra sulla sua fine.
Il puntatore sceglie la parte più vicina
A ogni movimento si cerca la parte più vicina: se è entro REACH em diventa quella attiva. Una nota aperta resta aperta finché non si raggiunge un’altra parte, come una pagina di campionario lasciata aperta, così non lampeggia; fuori dalla parola, una riga guida a pochi pixel dal puntatore si accende col suo nome. Le lettere cambiano colore con un tween; le frecce della tastiera passano da una parte all’altra.
L’apertura
Una timeline allunga le righe guida con scaleX da sinistra, fa salire le lettere una alla volta con yPercent mentre l’asse wght scende da 720 a WEIGHT, e alla fine apre la prima nota, così la pagina dice cosa fa prima che qualcuno la tocchi.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD | script.js | 'Rag' | La parola in mostra: le parti sono posate su queste tre lettere di Fraunces. |
WEIGHT | script.js | 380 | Il peso della parola (da 200 a 600). |
REACH | script.js | 0.17 | Quanto deve avvicinarsi il puntatore a una parte, in em della parola. |
DRAW | script.js | 0.42 | Quanto ci mette una linea di richiamo a disegnarsi, in secondi. |
OVERSHOOT | script.js | 2.2 | Quanto il mirino passa il segno quando si posa. |
PARTS | script.js | [[0, 0.24, 0.5, 'Stem', …], …] | Le parti: lettera, posto attraverso e dall’alto, nome, spiegazione, sopra o sotto, a sinistra o a destra. |
--accent | style.css | #e0462a | Il colore delle linee di richiamo e della riga puntata. |
Quando usarla
Per la pagina di un carattere di una fonderia, per uno studio di grafica che racconta il suo lavoro, per un corso o un articolo di tipografia, per un glossario illustrato. Con le parti riposizionate funziona con qualunque lettera e anche con un logo.
Sul telefono
Le stesse note a misure adattate: la parola occupa la larghezza dello schermo, i richiami vanno dritti in su o in giù e il nome si centra sulla loro fine. Si tocca una parte per aprirne la nota (la portata del dito è doppia di quella del mouse), si trascina per passare alle altre. I nomi delle righe guida restano nascosti finché non si tocca la loro riga.
Con il movimento ridotto
Niente si disegna e niente sale: la nota compare in dissolvenza già completa, mirino, richiamo e nome, e si richiude allo stesso modo. Le lettere cambiano colore con una dissolvenza breve e la pagina compare già composta.
Trappole
- Il mirino girava intorno a un punto lontano: GSAP sugli elementi SVG ignora il transform-origin del CSS, ci vuole svgOrigin col punto della parte.
- Misurando i posti durante l’apertura le lettere erano ancora pesanti e più larghe: i punti cadevano accanto alle parti. Le misure si rifanno quando il peso è arrivato, prima di aprire la prima nota.
- Sul telefono il richiamo in diagonale girato dall’altro lato tornava sopra il nome: lì il richiamo è verticale e il nome centrato.
- Una nota che si chiudeva appena il puntatore usciva dalla portata lampeggiava passando fra due parti, e il puntatore finto dell’anteprima, che passa veloce, la lasciava aperta un attimo: la nota resta aperta finché non si raggiunge un’altra parte; le righe guida, che il puntatore attraversa di continuo, si accendono senza chiuderla.
Librerie
GSAP 3.15.0, Fraunces (font variabile) 5.3.0, Inter Tight (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,5 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 19 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.
