Lettere in piedi con l'ombra lunga
Testo, Scroll, 3D
NuovaGratis
Torna alla libreria
La scala dei corpi
Scorri dentro l’anteprima
Il campionario di una fonderia di caratteri, nello stile minimal: scendendo, una parola sola sale la scala classica dei corpi, da 6 a 144 punti, uno scatto alla volta con un filo di rimbalzo. La dimensione ottica segue il corpo, quindi le lettere si ridisegnano a ogni passo, larghe e aperte da piccole, strette e sottili da grandi; un righello misura l’altezza delle maiuscole e una quota vermiglia conta i punti.
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 type scale</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-flex@5.3.0/full.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the specimen of a made-up type foundry. Scrolling, one word climbs the classical scale of type sizes, from 6 to
144 points, one click at a time; its optical size follows, so the letters are drawn again for every size: wide
and open when small, tight and fine when large. A ruler on the left measures the cap height of every size -->
<main>
<section class="apertura">
<p class="piccolo">Norrow Type, specimen</p>
<h1 class="titolo">One word,<br>sixteen sizes.</h1>
<p class="piccolo piccolo--tenue">Scroll to set it.</p>
</section>
<section class="racconto" data-racconto>
<div class="palco" data-palco>
<header class="testa">
<p class="marchio">Norrow</p>
<p class="piccolo piccolo--tenue">Optical sizes</p>
</header>
<h2 class="nascosto" data-nome>Margin, from 6 to 144 points</h2>
<svg class="tavola" data-tavola aria-hidden="true"></svg>
<p class="didascalia" aria-hidden="true">
<span class="didascalia__riga" data-dida>Small: wide, open, loose.</span>
<span class="didascalia__riga" data-dida>Text: steady and even.</span>
<span class="didascalia__riga" data-dida>Headings: closing in.</span>
<span class="didascalia__riga" data-dida>Display: tight and fine.</span>
</p>
</div>
</section>
<section class="apertura apertura--fine">
<h2 class="titolo titolo--medio">Every size,<br>drawn for its size.</h2>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.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.
40 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 scala dei corpi» da Animorio e adattala al mio sitoCosa fa
Il campionario di una fonderia di caratteri inventata, Norrow, su un bianco caldo con l’inchiostro nero e un solo vermiglio. Dopo l’apertura lo schermo si ferma: sulla linea di base nera, a sinistra, c’è la parola Margin a 6 punti, minuscola. A sinistra un righello sottile ha una tacca per ogni corpo della scala classica (6, 8, 9, 10, 12, 14, 18, 24, 30, 36, 48, 60, 72, 96, 120, 144), messa all’altezza delle maiuscole di quel corpo, con i numeri dove c’è posto. Scendendo, la parola resta ferma un momento su ogni corpo e poi scatta al successivo, va un filo oltre e si assesta; la tacca appena raggiunta si allunga e torna, quelle già passate diventano grigie. La dimensione ottica del carattere segue il corpo: da piccola la parola è larga, aperta e spaziata, con l’occhio della x alto; da grande si stringe, la x si abbassa e i tratti si assottigliano. Due guide grigie, l’altezza della x e quella delle maiuscole, salgono con la parola; accanto alla parola una quota verticale vermiglia, con una tacca a ogni estremo, va dalla linea di base alla cima delle maiuscole e il numero dei punti conta fra un corpo e l’altro. In basso una riga sola cambia frase quando i corpi cambiano famiglia: piccoli, testo, titoli, titoloni. A 144 punti la parola atterra con un piccolo schiacciamento elastico. Tutto segue lo scorrimento, avanti e indietro.
Come funziona
Un solo SVG grande quanto il palco
La parola, le tre guide, il righello e la quota stanno in un SVG con il viewBox uguale ai pixel del palco fissato (position: sticky, alto 100lvh). La parola è un elemento text: x e y sono il suo inizio sulla linea di base, quindi crescere vuol dire solo cambiare font-size, senza calcoli sull’ascendente. La sua larghezza, che cambia anche con la dimensione ottica, si legge a ogni fotogramma con getComputedTextLength e mette la quota subito dopo l’ultima lettera.
Quanti pixel fa un punto
A ogni refresh di ScrollTrigger lo script misura la parola a 144 punti su una copia nascosta e sceglie quanti pixel vale un punto: la parola più grande deve stare accanto al righello con il posto per la quota, e le sue maiuscole sotto l’intestazione. Le tacche del righello stanno all’altezza delle maiuscole di ogni corpo (0,708 del corpo, misurato sul carattere); un numero si scrive solo se dista almeno 15 pixel da quello sopra, e le tacche a meno di 3 pixel dalla vicina si tolgono.
Fermo, poi lo scatto
La timeline, legata allo scorrimento con scrub SCRUB, porta un solo numero s da 0 a 15: la parte intera è il corpo raggiunto, il resto quanto si è dentro il passo. Per la prima parte del passo (HOLD) il corpo resta fermo, poi passa al successivo con la curva SNAP, un back.out che va un filo oltre e torna. Il numero dei punti accanto alla quota conta fra i due corpi ma non li supera mai, anche quando la parola sì.
La dimensione ottica e l’altezza della x
Roboto Flex ha l’asse opsz da 8 a 144: lo script lo mette uguale al corpo in font-variation-settings, e la parola si ridisegna da sola. L’altezza della x però cambia con opsz (da 0,53 del corpo a 8 a 0,445 a 144): la guida della x usa una piccola tabella misurata sul carattere e interpolata, così resta sulla cima della x a ogni corpo. Le etichette delle guide si spengono quando le guide si stringono troppo o quando la quota ci arriva sopra.
Didascalie e atterraggio
La didascalia in basso cambia frase quando il corpo passa 10, 18 e 48 punti: la vecchia esce in alto da una finestra con overflow hidden allargandosi con l’asse wdth, la nuova sale da sotto stretta e si apre. In fondo alla scala la timeline schiaccia la parola dalla linea di base con un transform dell’SVG e la lascia tornare con elastic.out.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD | script.js | 'Margin' | La parola da comporre: meglio corta, con una lettera che scende sotto la linea. |
SIZES | script.js | [6, 8, 9, 10, 12, 14, 18, 24, 30, 36, 48, 60, 72, 96, 120, 144] | La scala dei corpi in punti, dal più piccolo: un passo dello scorrimento per corpo. |
WEIGHT | script.js | 400 | Il peso della parola, da 100 a 1000. |
OPTICAL | script.js | true | La dimensione ottica segue il corpo; con false la parola resta disegnata per 14 punti e si vede la differenza. |
SNAP | script.js | 'back.out(1.4)' | La curva di ogni scatto: il numero fra parentesi è quanto va oltre prima di assestarsi. |
HOLD | script.js | 0.45 | La parte di ogni passo in cui il corpo aspetta fermo prima dello scatto, da 0 (sale di continuo) a 0,9. |
SCRUB | script.js | 0.6 | Quanti secondi ci mette il disegno a raggiungere lo scorrimento. |
Quando usarla
Per il campionario di un carattere, la pagina di una fonderia, un articolo sulla tipografia o la presentazione di un sistema di design: dove si vuole mostrare che un carattere funziona dal corpo delle note a quello dei manifesti. Funziona con qualunque parola corta e con qualunque scala.
Sul telefono
Uguale, con misure adattate: un punto vale meno pixel, il righello è più stretto, le tacche troppo vicine si tolgono e il numero dei punti sta sopra la quota invece che di lato. Le etichette delle guide lasciano il posto alla parola quando arriva al bordo.
Con il movimento ridotto
Niente scatti né rimbalzi: a ogni passo la parola si dissolve e ricompare già al corpo nuovo, con le guide e la quota; le didascalie si danno il cambio con una dissolvenza e alla fine non c’è lo schiacciamento.
Trappole
- La guida della x con un valore fisso (0,528, quello di Roboto) stava più in alto della x nei corpi grandi: con l’asse opsz l’altezza della x scende. È stata misurata sul carattere a sei dimensioni ottiche e la guida usa quella tabella.
- Le etichette dei numeri sul righello scritte dal basso si coprivano a vicenda nei corpi piccoli; scritte dall’alto con una distanza minima di 15 pixel si leggono tutte, e sul telefono le tacche a meno di 3 pixel dalla vicina facevano una macchia grigia e si tolgono.
- La riga della didascalia che esce in alto con yPercent -112 lasciava vedere le code di g e della virgola sotto la finestra: esce e entra di 135.
- Sul telefono il numero dei punti a destra della quota usciva dallo schermo a 144: lì si scrive sopra la quota, allineato alla sua fine.
- La parola va misurata di nuovo dopo che il carattere è arrivato (document.fonts.load, poi ScrollTrigger.refresh): misurata col carattere di riserva, a 144 punti usciva dal margine.
Librerie
GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, Roboto Flex (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,0 KB; le librerie: GSAP + ScrollTrigger 45 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.
