Nastro che accelera con lo scorrimento
Scroll, Testo, Hover
Gratis
Torna alla libreria
La parola sul piano degli assi
Nello stile minimal: una parola sola su un piano disegnato come un grafico, larghezza in orizzontale e peso in verticale. Il puntatore sceglie un punto e la parola diventa quella versione del carattere, lettera per lettera su molle, mentre due fili vermigli segnano il punto e portano i suoi valori lungo gli assi.
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 on the axis plane</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/anybody@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<header class="top">
<span class="top__mask"><span class="top__item">Specimen</span></span>
<span class="top__mask"><span class="top__item top__item--grey">Anybody, width and weight</span></span>
</header>
<!-- the plane: width runs left to right, weight bottom to top. The pointer picks a point on it and the word becomes
that instance of the typeface, every letter on a spring of its own; two vermilion guides mark where it is -->
<div class="plane" tabindex="0" role="group" aria-label="The word on the axis plane: arrow keys change width and weight" data-plane>
<div class="field" data-field>
<i class="axis axis--x" data-axis-x></i>
<i class="axis axis--y" data-axis-y></i>
<div class="ticks ticks--x" data-ticks-x></div>
<div class="ticks ticks--y" data-ticks-y></div>
<i class="corner" data-corner></i>
<i class="guide guide--v" data-guide-v></i>
<i class="guide guide--h" data-guide-h></i>
<svg class="base" data-base aria-hidden="true"><path data-base-path></path></svg>
<p class="word" data-word>Gamut</p>
<span class="label label--x" data-label-x="0">50</span>
<span class="label label--x" data-label-x="0.5">100</span>
<span class="label label--x" data-label-x="1">150</span>
<span class="label label--y" data-label-y="0">100</span>
<span class="label label--y" data-label-y="0.5">500</span>
<span class="label label--y" data-label-y="1">900</span>
<span class="name name--x" data-name>wdth</span>
<span class="name name--y" data-name>wght</span>
<span class="read read--x" aria-hidden="true" data-read-x>100</span>
<span class="read read--y" aria-hidden="true" data-read-y>500</span>
</div>
</div>
<p class="hint" data-hint><span class="hint__mouse">Move across the plane</span><span class="hint__touch">Drag across the plane</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.
28 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 sul piano degli assi» da Animorio e adattala al mio sitoCosa fa
Su una carta bianco caldo c’è un piano disegnato come un grafico: l’asse della larghezza in basso, da 50 a 150, e quello del peso a sinistra, da 100 a 900, con le loro tacche e un angolo da tipografo in alto a destra. In mezzo una parola sola, Gamut, nel carattere variabile Anybody. All’apertura gli assi si disegnano dall’angolo, le tacche spuntano una dopo l’altra con un piccolo rimbalzo e la parola arriva sottile come un capello e strettissima, dal centro verso i lati; poi corre una volta fino all’angolo più largo e più nero e torna a posarsi a metà. Ogni punto del piano è una versione del carattere: dove va il puntatore, la parola diventa quella. Le lettere ci arrivano ognuna su una sua molla, prima quelle vicine al puntatore e poi le lontane, così il cambio attraversa la parola come un’onda e si ferma con un pixel di troppo e il ritorno. Due fili vermigli, uno verticale e uno orizzontale, segnano il punto: in fondo a ognuno il suo valore corre lungo l’asse, le tacche sotto il filo si alzano e i numeri fissi si scansano per lasciargli posto. La riga di base sotto la parola cede di qualche pixel sotto i pesi più neri e oscilla appena quando il peso cambia in fretta. Se il puntatore esce, la parola torna alla sua versione di riposo; se nessuno la tocca per un momento, il punto va a spasso da solo per il piano. Con le frecce il punto si sposta di un decimo d’asse.
Come funziona
Un carattere con due assi
Anybody ha l’asse della larghezza da 50 a 150 e quello del peso da 100 a 900, tutti e due nel file «wdth» di Fontsource. Ogni lettera della parola è uno span inline-block con il suo font-variation-settings, scritto a ogni fotogramma solo se cambia. Il testo si prende dall’HTML, così si cambia la parola senza toccare lo script.
Il piano e la misura
Il piano è un riquadro con due righe da un pixel per gli assi e le tacche fuori, ogni 5 di larghezza e ogni 50 di peso. La grandezza del carattere si sceglie misurando la parola a 100 px nella versione più larga e più nera: deve riempire SIZE del piano senza essere più alta di metà. Si rifà quando il carattere è caricato e a ogni cambio di misura.
Il punto e le molle
La posizione del puntatore nel piano dà due numeri da 0 a 1, larghezza e peso. Ogni lettera li insegue con una molla smorzata calcolata a mano (passi da 1/120 di secondo sul ticker di GSAP); la rigidità scende con la distanza fra la lettera e il punto (LAG), mentre lo smorzamento resta in proporzione: le lettere vicine arrivano prima, le lontane dopo, e tutte passano il segno di un soffio e tornano. I fili hanno una molla più rigida e fanno strada.
I fili e i numeri
I due fili vermigli sono div da un pixel spostati con translate3d; in fondo a ognuno un numero dice il valore e scorre lungo l’asse. Le tacche vicine al filo si allungano e si scuriscono con una campana di Gauss, e le etichette fisse (50, 100, 150…) si dissolvono quando il numero vermiglio le raggiunge, così non si sovrappongono mai.
L’apertura e il riposo
L’apertura è una timeline GSAP che muove numeri, non elementi: quanto sono disegnati gli assi, le tacche, i fili, e il punto che corre da un angolo all’altro; il ticker scrive tutto. La riga di base è un path SVG con una curva quadratica che cede sotto il peso medio delle lettere su una molla morbida. Senza nessuno che punta, dopo 2,6 secondi il punto va a spasso su due seni lenti, entrando piano dal punto in cui era.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
REST | script.js | [100, 560] | La larghezza (da 50 a 150) e il peso (da 100 a 900) a cui la parola torna quando nessuno punta. |
SPRING | script.js | [170, 15] | Le molle delle lettere: quanto sono rigide e quanto sono frenate (meno freno, più oscillano). |
LAG | script.js | 0.5 | Quanto in ritardo seguono le lettere lontane dal puntatore: 0 tutte insieme, 0.8 un’onda lunga. |
SAG | script.js | 3 | Di quanti pixel cede la riga di base sotto il peso più nero. |
SIZE | script.js | 0.84 | Quanta larghezza del piano riempie la parola nella sua versione più larga e più nera. |
WANDER | script.js | true | Se il punto va a spasso da solo quando nessuno punta. |
--accent | style.css | #ff3d17 | Il colore dei due fili e dei loro numeri, l’unico accento della pagina. |
Quando usarla
Per la pagina di un carattere tipografico, di una fonderia o di uno studio grafico, per la testata di un portfolio o di una rivista che vuole far giocare con le lettere, o per mostrare in un colpo solo tutte le versioni di un carattere variabile. Funziona con una parola corta, da quattro a otto lettere.
Sul telefono
La stessa animazione: il piano è alto e stretto e la parola si rimisura per starci. Si trascina il dito sul piano e la parola segue come col mouse; staccando il dito resta dov’era, e dopo un momento il punto riprende ad andare a spasso.
Con il movimento ridotto
Niente molle e niente onda: la pagina compare in dissolvenza già disegnata e la parola diventa subito la versione indicata dal puntatore, con i fili già al loro posto. Il punto non va a spasso da solo e la riga di base resta dritta.
Trappole
- La grandezza del carattere va misurata quando il carattere è arrivato: misurata con quello di riserva la parola usciva dal piano nella versione più larga. L’apertura aspetta document.fonts.load (al massimo un secondo e mezzo) e la misura si rifà subito prima di partire.
- Misurando la parola nella versione più larga, per un fotogramma le lettere restavano larghe e nere: dopo la misura ogni lettera riprende subito i suoi valori.
- Le etichette hanno translateX(-50%) nel CSS: animarle con GSAP le avrebbe fissate in pixel. L’apertura muove solo numeri (quanto sono disegnati assi, tacche, fili ed etichette) e il ticker scrive trasformazioni e opacità.
- Con la stessa molla per tutte le lettere la parola cambiava in blocco, senza onda; con rigidità diverse e lo stesso smorzamento le lettere si separano solo mentre si muovono e a riposo tornano tutte uguali.
- Il pilota delle anteprime manda pointerleave da ogni elemento che lascia: la parola tornava a riposo a ogni passo. Il riposo arriva solo con un pointerout senza destinazione e fuori dalla finestra.
Librerie
GSAP 3.15.0, Anybody (font variabile, assi wdth e wght) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,1 KB; le librerie: GSAP 28 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.
