Lettere in piedi con l'ombra lunga
Testo, Scroll, 3D
NuovaGratis
Torna alla libreria
La parola spaziata col calibro
Animazione di testo nello stile minimal: una parola arriva con le lettere spaziate male e un calibro sottile, due righe vermiglie con la quota in cifre, misura uno spazio alla volta. Dove lo spazio è sbagliato le lettere scivolano a molla finché il numero è giusto, con un pixel di troppo e il ritorno; alla fine il calibro segna lo stesso numero ovunque e la parola prende peso.
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 word spaced by the caliper</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/standard.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/jetbrains-mono@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage data-autoclic role="button" tabindex="0" aria-label="Uniform. Click to loosen the spacing and measure it again.">
<!-- the letters and the calipers: one SVG, drawn by the script -->
<svg class="scene" data-scene aria-hidden="true">
<g data-calipers></g>
<g data-letters></g>
</svg>
<h1 class="sr-only" data-word>UNIFORM</h1>
<p class="hint" aria-hidden="true"><span class="hint__line" data-hint>Click to loosen</span></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.
12 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 parola spaziata col calibro» da Animorio e adattala al mio sitoCosa fa
Una pagina bianco caldo, vuota. Le lettere della parola «UNIFORM» salgono una dopo l’altra, sottili e leggere, ma spaziate male: la N e la I quasi si toccano, fra la O e la R c’è un buco. Sopra la prima coppia si apre un calibro: una riga orizzontale sottile che si allarga dal centro, due righe verticali vermiglie che scendono fino alla base delle lettere e toccano l’inchiostro, due trattini obliqui come nelle quote dei disegni tecnici e sopra il numero, la misura dello spazio in millesimi di em (300). Poi la U e la N scivolano l’una verso l’altra, ciascuna con la sua metà della parola, e il numero scende con loro: 250, 180, 130, fino a 116, un pixel oltre il segno, e torna a 120 con una piccola molla. Nell’istante in cui lo spazio è giusto la cifra diventa vermiglia e la riga della quota dà un colpetto di un pixel. Il calibro passa allo spazio dopo come un bruco, prima la ganascia davanti e poi quella dietro, con il numero che si spegne per strada e si riaccende quando tutte e due toccano l’inchiostro. Gli spazi troppo stretti si aprono, quelli troppo larghi si chiudono, e uno che è già giusto riceve solo il cenno. Le lettere, mentre scivolano, si inclinano di un niente contro il movimento e si raddrizzano quando si fermano. Alla fine compare un calibro in ogni spazio, uno dopo l’altro da sinistra, tutti con lo stesso numero, che si accende di vermiglio a onda; la parola prende peso lettera per lettera, con un rimbalzo dello spessore, e gli spazi restano uguali mentre le lettere si allargano. Poi i calibri risalgono e resta la parola, nera e piena. In basso compare «Click to loosen»: un clic (o un tocco, o Invio) la rende di nuovo leggera, spazia le lettere a caso e il calibro ricomincia. Col puntatore sopra la parola finita il calibro torna a misurare lo spazio più vicino.
Come funziona
Le misure dell’inchiostro
Ogni lettera è un text di un SVG grande quanto la finestra. Su una canvas con lo stesso carattere (Archivo variabile) measureText dà, per ogni lettera e per undici pesi fra il più leggero e il più pesante, dove comincia e dove finisce l’inchiostro rispetto al punto di partenza (actualBoundingBoxLeft e Right). Per un peso qualsiasi le due misure si leggono fra i due campioni vicini: così lo spazio si misura fra inchiostro e inchiostro anche mentre la parola cambia peso.
La parola fatta di numeri
Lo stato della parola sono solo numeri: uno spazio per ogni coppia di lettere, in millesimi di em, e il peso di ogni lettera. A ogni fotogramma la parola si ricompone da sinistra, inchiostro più spazio, ed è sempre centrata. Cambiare uno spazio sposta quindi le due metà della parola di mezza differenza ciascuna, una verso l’altra, e il centro dello spazio resta fermo: il calibro può restare lì mentre le lettere arrivano.
Il calibro che legge
Il calibro è un path (due ganasce, la riga della quota, due trattini obliqui) e un text per il numero. Le ganasce stanno sui bordi dell’inchiostro dello spazio che leggono, e il numero non è scritto da nessuna parte: è la distanza fra le due ganasce divisa per la grandezza del carattere, arrotondata. Per passare allo spazio dopo, due tween portano ciascuna ganascia da dove era al bordo nuovo, quella davanti un po’ prima dell’altra.
Un pixel di troppo
Uno spazio sbagliato va con power3.inOut fino a un pixel oltre il valore giusto (il pixel si converte in millesimi di em con la grandezza del carattere) e poi torna con elastic.out: il numero passa da 116 e si posa su 120. Nello stesso istante la cifra diventa vermiglia e la riga della quota si alza di un pixel e mezzo e torna giù. Mentre le lettere corrono, la loro velocità dà una piccola inclinazione (skewX, al massimo due gradi e mezzo) che si smorza quando si fermano.
La regia e il clic
Una timeline sola costruisce tutto all’apertura: l’entrata, uno spazio alla volta, i calibri in ogni spazio, l’onda del peso e la risalita dei calibri. Un clic la ferma dove si trova e ne fa una nuova: pesi leggeri, spazi nuovi a caso con la stessa somma (uno giusto per caso, per il cenno) e di nuovo la misura. Le letture che si toccherebbero, sopra una lettera stretta come la I, salgono di una riga come nelle quote dei disegni. Col movimento ridotto le due forme della parola si alternano in dissolvenza.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD | script.js | 'UNIFORM' | La parola da spaziare (da 2 a 10 lettere; gli spazi si tolgono). |
SPACE | script.js | 120 | Lo spazio uguale che il calibro mette fra le lettere, in millesimi di em: è il numero che si legge alla fine. |
PACE | script.js | 1 | La velocità del calibro: 2 lavora il doppio più in fretta, 0.6 più piano. |
OVERSHOOT | script.js | 1 | Di quanti pixel le lettere passano il segno prima di tornare indietro con la molla (0 si fermano secche). |
LIGHT | script.js | 160 | Il peso della parola finché gli spazi sono sbagliati (da 100 a 900). |
HEAVY | script.js | 680 | Il peso che la parola prende quando tutti gli spazi sono uguali (da 100 a 900). |
Quando usarla
Per l’apertura di chi lavora di precisione con le lettere: una fonderia di caratteri, uno studio di grafica o di identità visiva, un portfolio di tipografia, una pagina di presentazione in bianco e nero, il caricamento di un marchio fatto di una parola sola. Funziona anche come spiegazione animata della spaziatura in un articolo o in un corso.
Sul telefono
La stessa animazione con le misure adattate: la grandezza del carattere si sceglie perché la parola stia nella larghezza dello schermo sia spaziata male sia composta, le cifre e i trattini del calibro si rimpiccioliscono e le letture vicine salgono di una riga per non toccarsi. Un tocco rende la parola di nuovo leggera e la fa rimisurare.
Con il movimento ridotto
Niente si muove: la parola compare già composta e pesante, con un calibro in ogni spazio che segna lo stesso numero, in dissolvenza; poi i calibri svaniscono. Un clic mostra in dissolvenza la parola spaziata male con le sue misure sbagliate e poi di nuovo quella giusta.
Trappole
- text-anchor e la larghezza di avanzamento non dicono dove sta l’inchiostro: una I ha più aria intorno di una M, e due lettere con la stessa distanza fra i punti di partenza sembrano spaziate in modo diverso. Lo spazio si misura fra actualBoundingBoxRight di una lettera e actualBoundingBoxLeft della successiva, presi da measureText sulla canvas col peso giusto.
- Il peso cambia la larghezza dell’inchiostro: con le misure prese a un peso solo, durante l’onda del peso le ganasce si staccavano dalle lettere. L’inchiostro si misura a undici pesi e si legge fra i due campioni vicini.
- Con le ganasce che partivano insieme il calibro sembrava scivolare in blocco e il numero restava quasi fermo; con quella davanti in anticipo si apre e si richiude come un bruco, ma per strada mostrava cifre grandi e senza senso (fino a 500): mentre viaggia il numero si spegne quasi del tutto.
- Sul telefono le letture dei due spazi intorno alla I si sovrapponevano («120120»): a ogni fotogramma le letture si ordinano da sinistra e quella che toccherebbe la precedente sale di una riga, con un passaggio morbido.
- Un killTweensOf sul calibro all’inizio della misura cancellava anche i tween della timeline che dovevano ancora partire, e il calibro non compariva più: i tween del puntatore si fermano solo al clic, prima di costruire la timeline nuova.
- L’inclinazione presa dalla velocità, al primo tentativo fino a cinque gradi, faceva sembrare la parola in corsivo mentre si allentava: ora si ferma a due gradi e mezzo.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0, JetBrains Mono (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,4 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.
