Lettere in piedi con l'ombra lunga
Testo, Scroll, 3D
NuovaGratis
Torna alla libreria
Il numero fatto di tacche
Scorri dentro l’anteprima
I cento clienti di uno studio in un numero solo: scendendo, il «100» si apre in cento tacche sottili tagliate sulla forma delle cifre, che si mettono in fila a gruppi di dieci, si piegano in una griglia dieci per dieci, si coricano in una barra per anno e alla fine tornano a chiudersi nel numero. Stile minimal.
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>A number made of marks</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>
<!-- the clients of a made-up design studio, told with one big number. Scrolling, the number comes apart into one
thin mark per client: the marks line up in tens, fold into a ten by ten grid, lie down into one bar per year,
and in the end stand up again into the number -->
<main>
<section class="apertura">
<p class="piccolo">Orrin, design studio</p>
<h1 class="titolo">Five years,<br>one client at a time.</h1>
<p class="piccolo piccolo--tenue">Scroll to count them.</p>
</section>
<section class="racconto" data-racconto>
<div class="palco" data-palco>
<header class="testa">
<p class="marchio">Orrin</p>
<p class="piccolo piccolo--tenue">Clients since <span data-dal>2021</span></p>
</header>
<h2 class="nascosto" data-numero>100 clients since 2021</h2>
<canvas class="tela" data-tela aria-hidden="true"></canvas>
<div class="anni" data-anni aria-hidden="true"></div>
<p class="didascalia" aria-hidden="true">
<span class="didascalia__riga" data-dida>A hundred clients.</span>
<span class="didascalia__riga" data-dida>One mark for each.</span>
<span class="didascalia__riga" data-dida>Ten to a row.</span>
<span class="didascalia__riga" data-dida>Year by year.</span>
<span class="didascalia__riga" data-dida>And counting.</span>
</p>
</div>
</section>
<section class="apertura apertura--fine">
<h2 class="titolo titolo--medio">Thank you,<br>every one of you.</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.
31 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 numero fatto di tacche» da Animorio e adattala al mio sitoCosa fa
I clienti di uno studio di design inventato, Orrin, su un bianco caldo con l’inchiostro nero e un solo blu. Lo schermo si ferma su un «100» enorme e pieno. Scendendo, il numero si apre da sinistra a destra in cento righe verticali sottili, una per cliente: ogni riga è tagliata dove attraversa la cifra, quindi il numero si legge ancora, fatto di righe; l’ultima, il cliente più nuovo, diventa blu. Poi le righe lasciano le cifre: si allungano o si accorciano tutte alla stessa misura e si mettono in fila a gruppi di dieci, come i segni di un conto, e arrivando vanno un poco oltre e si assestano. I gruppi scendono uno sotto l’altro e diventano una griglia dieci per dieci. Allora le tacche si coricano e volano a impilarsi in una barra per anno: sotto la riga di base gli anni salgono da una fessura, e sopra ogni barra il conto sale con le tacche che atterrano; quella blu finisce in cima all’ultimo anno. Alla fine le tacche si rialzano, tornano nelle loro colonne, si ingrossano tutte insieme fino a richiudere il numero, che si posa con un piccolo schiacciamento elastico. In basso una riga sola cambia frase a ogni passo. Tutto segue lo scorrimento, avanti e indietro.
Come funziona
Le cifre lette colonna per colonna
Lo script scrive il numero una volta su un canvas fuori dalla pagina, al doppio della misura, e ne legge i pixel. Tiene solo le colonne che hanno inchiostro (così nessuna tacca cade fra due cifre) e ne sceglie tante quante sono i clienti, spaziate in modo uguale. Per ognuna segna dove la colonna entra ed esce dall’inchiostro: una colonna che attraversa uno zero ha due pezzi, sopra e sotto il buco.
Cinque forme per ogni tacca
Ogni tacca è una riga che passa per un punto, con un angolo, tagliata in K pezzi lungo la sua lunghezza. Per ogni tacca si preparano cinque forme: il numero pieno, il numero a righe, la fila a gruppi di dieci, la griglia e la barra del suo anno. Fuori dal numero i K pezzi stanno uno sopra l’altro, quindi passare da una forma all’altra vuol dire solo mescolare numeri: posizione, angolo, estremi dei pezzi, spessore, quanto è blu.
Cinque numeri e un ritardo
La timeline, legata allo scorrimento con scrub SCRUB, muove solo cinque numeri da 0 a 1, uno per cambio di forma, più quello dello schiacciamento finale. Ogni tacca parte un poco dopo quella prima (SPREAD) e usa curve diverse per le sue parti: power3.inOut per il volo, power2.inOut per girarsi, LAND per la lunghezza, che va un poco oltre e si assesta. Il disegno avviene una volta per fotogramma, nel ticker di GSAP.
Il numero dalle righe, senza gradini
Quando sono dentro il numero, le tacche si disegnano su un secondo canvas fuori dalla pagina, larghe il doppio della distanza fra due righe e un poco più lunghe del dovuto; poi il numero ci viene scritto sopra con destination-in, che tiene solo quello che sta dentro le cifre. Così le righe che si ingrossano diventano un numero coi bordi lisci e non a gradini, e il numero vero può comparire sopra senza che si veda il cambio.
Anni, conti e didascalie
Gli anni e i conti sono elementi HTML sopra il canvas. Gli anni salgono da una finestra con overflow hidden con yPercent, mentre la variabile --wd porta font-stretch da 70% a 100% (Archivo è un carattere variabile anche in larghezza). Ogni conto mostra quante tacche del suo anno sono già atterrate e sale con la cima della barra. La didascalia in basso fa lo stesso gioco degli anni, una frase alla volta.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
COUNTS | script.js | [8, 14, 21, 26, 31] | I clienti nuovi di ogni anno, dal più vecchio: una tacca ciascuno, una barra per anno, e la somma è il numero grande. |
FIRST_YEAR | script.js | 2021 | L’anno della prima barra. |
WEIGHT | script.js | 800 | Il peso del numero grande: più è pieno, più le righe raccontano bene la forma delle cifre. |
LINE | script.js | 1.5 | Lo spessore di una tacca, in pixel. |
LAND | script.js | 'back.out(2.2)' | La curva con cui ogni tacca prende la sua lunghezza: il numero fra parentesi è quanto va oltre prima di assestarsi. |
SPREAD | script.js | 0.55 | Quanto partono distanti le tacche: 0 tutte insieme, 0,9 una dopo l’altra. |
SCRUB | script.js | 0.6 | Quanti secondi ci mette il disegno a raggiungere lo scorrimento. |
Quando usarla
Per un numero che conta persone o cose una per una: i clienti di uno studio, i progetti consegnati, i soci di un’associazione, i posti venduti di un evento. Va bene fino a qualche centinaio: le tacche sono una per unità, quindi con migliaia di pezzi la griglia e le barre non si leggerebbero più.
Sul telefono
Uguale, con misure adattate: il numero prende quasi tutta la larghezza, la fila dei gruppi di dieci va su due righe e le barre si stringono.
Con il movimento ridotto
Niente voli né rimbalzi: a ogni passo il disegno si dissolve e ricompare già nella forma nuova (numero a righe, fila, griglia, barre, numero pieno); didascalie e anni si danno il cambio con una dissolvenza.
Trappole
- Un canvas dentro la pagina prende alcune impostazioni tipografiche della pagina (qui le cifre tabulari di font-feature-settings): il numero scritto lì stava due o tre pixel più in là di quello letto sul canvas fuori dalla pagina, e alla fine si vedeva un’ombra accanto alle cifre. Il numero si scrive solo sui canvas fuori dalla pagina, e quello visibile ne copia l’immagine.
- Righe larghe quanto la distanza fra le colonne non chiudono il numero: ogni colonna è misurata al centro, e sui bordi diritti e sulle curve restavano spiragli grandi mezza colonna. Le righe piene sono larghe il doppio e un poco più lunghe, e il taglio con destination-in le riporta dentro le cifre.
- Se il numero vero compare mentre le ultime tacche stanno ancora volando, si vede in trasparenza un numero fantasma. Al ritorno le tacche volano nella prima parte del passo e solo dopo, tutte ferme, si ingrossano e cedono il posto al numero.
- Il canvas va misurato di nuovo a ogni refresh di ScrollTrigger e dopo che il carattere è arrivato (document.fonts.load): misurato col carattere di riserva, le colonne finivano fuori dalle cifre vere.
Librerie
GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 9,2 KB; le librerie: GSAP + ScrollTrigger 45 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.
