L’indicatore a lancetta
Contatori, Fisica, SVG
NuovaGratis
Tutti i componenti
Il cursore del metro
La lunghezza di un tavolo regolata con un metro a nastro: si tira il gancio d’ottone, il nastro d’acciaio stampato esce dalla cassa gialla con i numeri che scorrono, e il tavolo disegnato sopra si allunga con la sua estremità sempre sopra il gancio. Lasciato, si ferma sul centimetro intero; col blocco tolto il nastro rientra di scatto, i numeri si sfocano e il gancio sbatte contro la bocca.
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 tape measure slider</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>
<main class="stage">
<!-- the tape measure slider: the length of a table, set with a retractable steel tape measure. The table is drawn
above it with its length on a dimension line, and its right end always stands over the brass hook. Pull the
hook and the printed tape slides out of the yellow case, the numbers travel past the mouth and the table grows;
let go and it settles on a whole centimetre. With the red lock slider off, the tape whips back into the case
and the hook clacks against the mouth. The chips glide it to a length for four, six or eight people -->
<div class="tm" data-tm data-lock="on">
<div class="tm__rig" data-rig>
<!-- the drawing: the table, its dimension line with the length, and the tape measure; the script draws it to
the width it gets -->
<svg class="tm__art" aria-hidden="true" focusable="false" data-art></svg>
<!-- the hook is the slider's thumb: an empty handle that the script keeps over the brass hook -->
<div class="tm__hook" role="slider" tabindex="0" aria-label="Table length" aria-orientation="horizontal"
aria-valuemin="80" aria-valuemax="240" aria-valuenow="160" aria-valuetext="160 centimetres" data-hook></div>
</div>
<div class="tm__controls">
<div class="tm__lockrow">
<button class="tm__lock" type="button" aria-pressed="true" aria-describedby="tm-hint" data-lock-btn>
<svg class="tm__padlock" viewBox="0 0 20 20" aria-hidden="true">
<path class="tm__shackle" d="M6.2 9V6.6a3.8 3.8 0 0 1 7.6 0V9"/>
<rect class="tm__body" x="4" y="8.6" width="12" height="9" rx="2.2"/>
<path class="tm__keyhole" d="M10 11.6v2.6"/>
</svg>
<span>Lock</span>
<span class="tm__badge" aria-hidden="true" data-badge></span>
</button>
<span class="tm__hint" id="tm-hint" data-hint></span>
</div>
<!-- the chips: data-preset is the length each one sets, and the script writes it under the name -->
<div class="tm__presets" role="group" aria-label="Table sizes">
<button class="tm__chip" type="button" data-preset="120">Seats 4<span class="tm__cm" data-cm></span></button>
<button class="tm__chip" type="button" data-preset="180" data-autoclic>Seats 6<span class="tm__cm" data-cm></span></button>
<button class="tm__chip" type="button" data-preset="230">Seats 8<span class="tm__cm" data-cm></span></button>
</div>
</div>
<p class="sr" aria-live="polite" data-live></p>
</div>
</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.
47 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 cursore del metro» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco un tavolo di rovere disegnato di fronte, con sopra la sua quota: una linea sottile con le stanghette ai capi e in mezzo la lunghezza, 160 cm. Sul pavimento due segni piccoli dicono dove comincia e dove finisce la corsa, 80 e 240. Più giù c’è un metro a nastro: la cassa gialla con l’impugnatura di gomma nera a righe, la clip da cintura cromata con la sua vite, una finestrella che mostra il nastro ingrandito, millimetri compresi, sotto un filo rosso, il cursore rosso del blocco sopra la cassa e la bocca cromata. Dalla bocca esce il nastro d’acciaio giallo, appena incavato, stampato con le tacche dei centimetri, quelle rosse ogni dieci e il riquadro rosso del metro, fino al gancio d’ottone con i suoi due rivetti; una linea tratteggiata scende dalla fine del tavolo al gancio. Aprendo la pagina il nastro scivola fuori fino alla sua lunghezza. Trascinando il gancio il nastro esce o rientra e i numeri passano davanti alla bocca, il tavolo si allunga e si accorcia con lui e la quota lo segue; il gancio scivola di un pelo sui rivetti e oscilla. Tirandolo in su o in giù il nastro si piega appena e, lasciato, torna dritto vibrando. Al rilascio la misura si ferma sul centimetro intero con uno scatto del gancio e un lampo nella finestrella. Accanto, il pulsante Lock dice se il blocco è acceso: acceso, il nastro resta dov’è; spento, appena lo si lascia il nastro rientra di colpo, accelera, i numeri si sfocano, il gancio sbatte contro la bocca, rimbalza una volta e la cassa sobbalza. I bottoni Seats 4, Seats 6 e Seats 8 fanno scivolare il nastro su una molla, con un piccolo oltre e ritorno, fino a 120, 180 o 230 centimetri, e quello della misura raggiunta si scurisce.
Come funziona
Un centimetro di tavolo è un centimetro di nastro
La scala viene dalla larghezza: k pixel per centimetro, perché la lunghezza massima (MAX) stia tutta nel disegno. La bocca del metro sta a MIN·k dall’estremità sinistra del tavolo, così quando il gancio è contro la bocca il tavolo è lungo MIN, e la sua estremità destra è sempre esattamente sopra il gancio. Il tavolo, la quota e la linea tratteggiata si ridisegnano dalla stessa misura; la cassa si rimpicciolisce se lo spazio a sinistra della bocca è poco.
Il nastro lungo una curva
Lo stato è uno solo: quanto acciaio è fuori dalla bocca. Il nastro corre dritto dentro la cassa e poi, se lo si tira in su o in giù, segue la curva di una mensola caricata in punta, y = dy·(3t² − t³)/2, presa in 25 punti con la loro pendenza. La striscia è il poligono dei due bordi spostati lungo le normali; l’incavo è fatto di tratti lungo linee parallele, non di un gradiente, così la luce segue la piega. La stampa si misura dalla punta: a u pixel dal gancio il nastro dice MIN + u/k, e ogni tacca e ogni numero si posa sulla curva alla sua distanza, girato con lei. Per non cambiare la misura piegando, la punta sta a x = ℓ − 0,6·dy²/ℓ.
La finestrella coi millimetri
Fuori ci sono due o tre pixel per centimetro: troppo pochi per i millimetri. La finestrella sulla cassa mostra la stessa lettura della bocca ingrandita a 30 unità per centimetro, con le tacche dei millimetri, dei mezzi centimetri e dei centimetri, i numeri accanto alla loro tacca perché il filo rosso non li tagli e le decine in rosso. Quando il nastro corre, un feGaussianBlur solo orizzontale, grande quanto la velocità, sfoca la stampa fuori e dentro la finestrella.
Il gancio e la piega
Il gancio sta sui rivetti in due asole: tirato dalla mano va avanti di PLAY pixel, spinto torna indietro, e quando la cassa si muove resta indietro per l’inerzia; ai capi dell’asola rimbalza. Ruota un poco sui rivetti con una molla angolare (SWING) spinta dall’accelerazione del nastro. La piega è una molla smorzata (BEND): mentre si trascina segue il dito, limitata a pochi pixel su un nastro corto, e lasciata oscilla fino a tornare dritta.
Lo scatto e le molle
Col blocco spento, al rilascio la molla dentro la cassa tira il nastro con una forza costante (PULL): accelera finché il gancio sbatte contro la bocca, rimbalza con BOUNCE della sua velocità, viene spinto indietro sui rivetti e la cassa sobbalza e dondola su due molle. I bottoni e i tasti portano il nastro alla misura con le molle GLIDE e KEYS, il rilascio col blocco acceso con SNAP sul centimetro intero. Tutto va a passi sul ticker di GSAP, col passo limitato a 1/30 di secondo, e quando niente si muove non si ridisegna.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
MIN | script.js | 80 | La lunghezza più corta, in centimetri: il gancio contro la bocca. |
MAX | script.js | 240 | La lunghezza più lunga: il gancio in fondo al disegno. Decide anche la scala, e quindi quanto è alto il tavolo. |
START | script.js | 160 | La lunghezza all’apertura della pagina. |
STEP | script.js | 1 | Di quanti centimetri sposta il nastro una freccia. |
BIG_STEP | script.js | 10 | Di quanti centimetri lo spostano Maiuscolo con una freccia e i tasti Pagina. |
GLIDE | script.js | [72, 8.6] | La molla dei bottoni Seats: rigidità e smorzamento (meno smorzamento, più oltre e ritorno). |
KEYS | script.js | [420, 36] | La molla più svelta dei tasti: rigidità e smorzamento. |
SNAP | script.js | [900, 54] | La piccola molla che porta il nastro sul centimetro intero al rilascio. |
PULL | script.js | 4200 | Quanto forte la molla della cassa tira dentro il nastro col blocco spento, in pixel al secondo quadrato. |
BOUNCE | script.js | 0.14 | Quanta velocità tiene il gancio quando rimbalza sulla bocca. |
BEND | script.js | [250, 6.5] | La molla dell’acciaio piegato e lasciato: rigidità e smorzamento. |
PLAY | script.js | 1.6 | Quanto scivola il gancio sui rivetti, in pixel. |
SWING | script.js | [380, 14] | La piccola oscillazione del gancio sui rivetti: rigidità e smorzamento. |
SAY_ON | script.js | Stays where you leave it | La riga sotto Lock quando il blocco è acceso. |
SAY_OFF | script.js | Springs back when let go | La riga sotto Lock quando il blocco è spento. |
data-preset | index.html | 120, 180, 230 | La lunghezza che dà ogni bottone, in centimetri; la scritta sotto il nome la scrive lo script. |
Quando usarla
Per la lunghezza di un tavolo, di una scrivania o di una libreria in un configuratore di mobili, la larghezza di una tenda o di un tappeto, il taglio di una stoffa o di un cavo: ovunque il valore è una misura in centimetri e conviene vedere la cosa che cambia.
Sul telefono
Il disegno prende la larghezza dello schermo meno un margine: la scala dei centimetri si stringe perché tutta la corsa ci stia, il tavolo con lei, e la cassa resta della stessa misura. Sul nastro restano le tacche ogni 5 e ogni 10 centimetri e un numero ogni 20; i millimetri restano nella finestrella. Il dito trascina il gancio senza far scorrere la pagina solo sopra il gancio (touch-action: none); il pulsante Lock e i tre bottoni vanno su due righe.
Con il movimento ridotto
Niente piega, niente oscillazioni né scivolate del gancio, niente sfocatura né sobbalzo della cassa: senza blocco, al rilascio il nastro rientra in un terzo di secondo con un rallentato semplice; i bottoni e i tasti lo portano alla misura in 0,28 secondi e all’apertura è già alla sua lunghezza. L’anteprima, invece di tirare il gancio, passa da un bottone all’altro.
Trappole
- Il gancio contro la bocca vuol dire la lunghezza più corta, non zero: se la stampa partisse da 0 al gancio, alla bocca si leggerebbe la lunghezza meno MIN. La stampa legge MIN sulla punta, così alla bocca e nella finestrella si legge proprio la lunghezza del tavolo, e i numeri corrono con l’acciaio senza scivolarci sopra.
- Con 2-3 pixel per centimetro i millimetri sul nastro diventavano una fascia grigia: fuori restano i centimetri (o solo le tacche da 5 e 10 sotto 1,7 pixel per centimetro) e i millimetri vanno nella finestrella ingrandita.
- Un gradiente verticale per l’incavo del nastro non segue la piega: in punta la luce finiva sul bordo. L’incavo è fatto di tratti lungo linee parallele al centro del nastro, che si piegano con lui.
- Piegato, il nastro è più lungo della distanza fra bocca e gancio: tenendo ferma la punta la misura saliva muovendo il dito in su e in giù. La punta si sposta indietro di 0,6·dy²/ℓ, quanto la curva allunga il nastro.
- La faccia della cassa, disegnata sopra il nastro, copriva il nastro dentro la bocca cromata: la faccia ha un incavo all’altezza della fessura, e il gancio, quando rientra, si vede dentro la bocca.
- I numeri della finestrella centrati sulla loro tacca finivano tagliati dal filo rosso proprio quando la misura era esatta: stanno accanto alla tacca.
- Il fuoco dato al gancio sul pointerdown, perché le frecce funzionino subito dopo il trascinamento, faceva comparire l’anello da tastiera anche col mouse: una classe lo nasconde finché non si preme un tasto.
- Il clic automatico dell’anteprima sullo stesso bottone non faceva più niente dopo il primo. Un clic che non è di una persona (isTrusted falso) fa da mano finta: se il nastro è già a 180 tira il gancio, toglie il blocco e lo lascia. Non si usa detail 0 per riconoscerlo, perché anche Invio e Spazio su un bottone danno detail 0.
- Dopo lo sbattere contro la bocca il gancio continuava a dondolare per secondi: la molla dell’oscillazione è più smorzata e il colpo che riceve più piccolo.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 18 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 7 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.
