L’indicatore a lancetta
Contatori, Fisica, SVG
NuovaGratis
Tutti i componenti
Il contatore a tacche
Nello stile minimal: le persone entrate in una piccola sala, contate due volte, con un numero grande e sottile e con le tacche di una volta su una riga sottilissima. Col più la penna traccia una tacca dall’alto, che preme un pixel di troppo e torna su; ogni cinque il tratto di traverso, l’unico colore, passa sulle quattro, che oscillano una dopo l’altra e si stringono in un mazzetto. La riga finisce contro un muretto: a sala piena, un più di troppo spinge tutta la fila contro il muro, che si piega e torna.
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 tally counter</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-flex@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the door count of a small room: how many people are in, a minus and a plus, and the same count kept the old
way, as tally marks on a hairline. Every fifth mark is the stroke across the four; the hairline ends at a
thin wall, the size of the room. The marks, the line and the wall are drawn by the script -->
<div class="tally" data-tally>
<div class="tally__head">
<p class="tally__label" id="tally-label">Checked in</p>
<p class="tally__note" id="tally-note" data-note></p>
</div>
<div class="tally__row">
<div class="tally__value" role="spinbutton" tabindex="0" aria-labelledby="tally-label" aria-describedby="tally-note" aria-valuemin="0" aria-valuemax="25" aria-valuenow="7" aria-valuetext="7 people" data-value>
<span class="tally__num" aria-hidden="true" data-num></span>
</div>
<div class="tally__keys">
<button class="tally__btn" type="button" aria-label="One person out" data-less>
<span class="tally__btn-in" aria-hidden="true">
<svg viewBox="0 0 48 48">
<circle class="tally__ring" cx="24" cy="24" r="23.25"/>
<path class="tally__icon" d="M17.5 24h13"/>
</svg>
</span>
</button>
<button class="tally__btn" type="button" aria-label="One person in" data-more data-autoclic>
<span class="tally__btn-in" aria-hidden="true">
<svg viewBox="0 0 48 48">
<circle class="tally__ring" cx="24" cy="24" r="23.25"/>
<path class="tally__icon" d="M17.5 24h13M24 17.5v13"/>
</svg>
</span>
</button>
</div>
</div>
<svg class="tally__field" aria-hidden="true" data-field>
<path class="tally__base" d="" data-base/>
<path class="tally__wall" d="" data-wall/>
<g data-marks></g>
</svg>
<p class="sr" aria-live="polite" data-said></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.
26 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 contatore a tacche» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco, in alto a sinistra CHECKED IN in piccolo e in grigio, a destra Room holds 25. Sotto, a sinistra, il numero delle persone entrate, grande e sottile, in un carattere senza grazie a larghezza variabile; a destra un meno e un più dentro due anelli sottili. Sotto ancora una riga grigia sottilissima che va da sinistra fino a un muretto verticale, la misura della sala, e sulla riga le stesse persone contate a tacche: quattro tacche nere in piedi e la quinta di traverso, blu. Col più la penna traccia una tacca nuova dall’alto in basso, accelerando; arrivata sulla riga preme un pixel di troppo e torna su, e la tacca prima sente il colpo e oscilla appena. La quinta è il tratto di traverso: parte in basso a sinistra e sale verso destra, e ogni tacca che attraversa ondeggia sul suo piede, una dopo l’altra; arrivato in fondo le cinque si stringono in un mazzetto, e il numero dà un colpo di peso e torna sottile. Il numero cambia sull’asse della larghezza: la cifra vecchia si stringe fino a sparire, la nuova si apre un filo troppo larga e si posa; da 9 a 10 le decine aprono una cella nuova e spingono le unità più in là. Col meno l’ultima tacca risale nella penna; togliendo una quinta il tratto di traverso torna indietro e le quattro si allargano di nuovo. A sala piena la nota dice Full house e il più si spegne: premuto ancora, tutta la fila viene spinta contro il muretto, un’onda la attraversa da sinistra a destra, il muretto si piega, si colora di blu per un attimo e torna dritto, e la nota diventa blu. A zero il meno fa un piccolo no e la nota dice No one is in yet. Col mouse sopra un pulsante l’anello diventa nero e il segno più spesso; premuto, il pulsante cede un po’ verso il basso come un tasto morbido. Tenendo premuto un pulsante il conto cambia di continuo, sempre più in fretta; dalla tastiera il numero risponde alle frecce, a Pagina su e giù (cinque alla volta, un mazzetto intero), a Home e a Fine.
Come funziona
Tacche che sono segmenti
Ogni tacca è una line SVG ridisegnata a ogni fotogramma, con un piede fermo sulla riga e una cima: la cima sta alla lunghezza della tacca (poco diversa da una all’altra, con un seno, così sembrano scritte a mano ma ordinate) e all’angolo di oscillazione. Il tratto è disegnato per la frazione p: una tacca nuova va da p 0 a 1 in DRAW secondi con power2.in, dall’alto in basso, come una penna che accelera; il meno la riporta a 0 e la tacca risale. Il tappo tondo di un tratto appena cominciato sarebbe un puntino, quindi la tacca sfuma dentro nel primo 14% del tratto.
Il tratto di traverso
La quinta tacca non ha posto suo: i suoi due capi si calcolano dai piedi della prima e della quarta del mazzetto, sei pixel più in fuori, dal 20% all’80% dell’altezza. Mentre si disegna (power3.inOut, SLASH secondi) a ogni fotogramma si guarda dov’è la punta: quando passa il piede di una tacca, quella riceve una spinta sul suo angolo, così le quattro oscillano una dopo l’altra al ritmo del tratto. Tornando indietro col meno la punta ripassa le tacche al contrario e dà una spinta più piccola nell’altro verso.
Le molle
Ogni tacca ha tre molle smorzate: l’angolo sul piede (SPRING, 320 e 0,3), la pressione dall’alto (900 e 0,34: atterrando la tacca riceve una velocità che la accorcia di circa un pixel e torna) e lo spostamento di lato che stringe il mazzetto chiuso del 16% intorno al suo centro. Il ciclo fa passi di 1/240 di secondo al massimo, un fotogramma lento conta 1/30, e si toglie dal ticker di GSAP quando tutto è fermo.
La cifra che si stringe
Il numero è in Roboto Flex, che ha la larghezza da 25 a 151. Ogni cifra sta in una cella larga quanto uno zero, misurato all’avvio e a ogni cambio di misura; cambiando, la cifra vecchia va a wdth 25 e sfuma, la nuova parte da 25 e arriva a 100 con back.out, che la porta un filo oltre e la riposa. Le unità cambiano per prime, le decine 50 millesimi dopo. Con due cifre la cella delle decine nasce larga zero e si apre, spingendo le unità; quando il conto cambia più in fretta di 0,24 secondi (tenendo premuto) lo scambio dura meno della metà, così una cifra si legge sempre. Il colpo di peso alla chiusura di un mazzetto è una variabile CSS, --wg, che GSAP porta da WEIGHT[0] a WEIGHT[1] e indietro con un elastico.
Il muretto e l’anteprima
Al massimo il più non cambia niente: una molla di spinta sposta la fila verso il muretto, di più a sinistra e di niente vicino al muro, quindi i mazzetti si avvicinano; ogni tacca riceve la sua spinta con un ritardo pari alla sua distanza diviso 900 pixel al secondo, e quando l’onda arriva il muretto, una curva quadratica, si piega e si colora per mezzo secondo. Un pulsante conta alla pressione (pointerdown) e ripete tenendolo; Invio e Spazio contano nel clic. Il clic da script dell’anteprima della libreria fa un giro intero in una timeline GSAP: su fino alla sala piena, un più di troppo, e giù fino a dove era.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
MAX | script.js | 25 | Quante persone tiene la sala: il numero più alto e le tacche che entrano fino al muretto (da 5 a 40). |
START | script.js | 7 | Quante persone sono dentro quando si apre la pagina. |
DRAW | script.js | 0.16 | Quanto ci mette la penna a tracciare una tacca, in secondi. |
SLASH | script.js | 0.26 | Quanto ci mette il tratto di traverso su cinque, in secondi. |
ROCK | script.js | 1 | Quanto oscillano le tacche quando il tratto le attraversa o la fila va contro il muro (0 = per niente). |
SPRING | script.js | [320, 0.3] | La molla delle tacche: quanto è rigida e quanto è frenata (1 = non oscilla). |
WEIGHT | script.js | [280, 560] | Il peso del numero a riposo e nel colpo quando si chiude un mazzetto da cinque (da 100 a 1000). |
HOLD | script.js | [0.42, 0.18, 0.07] | Tenendo premuto un pulsante: dopo quanto comincia a ripetere, il primo intervallo e il più corto, in secondi. |
WORD | script.js | ['person', 'people'] | La parola per uno e per più di uno, letta da chi usa un lettore di schermo. |
NOTE | script.js | ['Room holds {max}', 'Full house', 'No one is in yet'] | La nota in alto a destra: di solito, a sala piena e premendo il meno a zero; {max} diventa il numero più alto. |
Quando usarla
Per contare a mano qualcosa che cresce uno alla volta e ha un tetto: gli ingressi alla porta di un evento o di un laboratorio, i coperti di una sera, i posti di una visita guidata, le ripetizioni di un esercizio in un’app. Le tacche dicono a colpo d’occhio quanto manca al muro, anche senza leggere il numero.
Sul telefono
Il numero si rimpicciolisce con lo schermo (al massimo un quarto della sua larghezza) e i mazzetti si distribuiscono sulla larghezza che c’è, fino al muretto: a 390 pixel cinque mazzetti stanno in fila senza sforare, e con tanti mazzetti si stringono un po’. Il dito fa come il mouse: un tocco su un pulsante conta uno e lo fa cedere, tenuto premuto ripete sempre più in fretta. Il tocco lungo non apre menu e due tocchi veloci non ingrandiscono la pagina.
Con il movimento ridotto
Niente penna, oscillazioni, spinte o muri che si piegano: la tacca nuova compare in dissolvenza già intera, quella tolta si dissolve, il mazzetto è già stretto, le cifre cambiano in dissolvenza senza stringersi e la nota cambia con una dissolvenza. Pulsanti e tasti funzionano come sempre.
Trappole
- Nel giro dell’anteprima il conto scende di uno ogni 0,12 secondi, ma la cifra nuova aspettava 0,1 secondi e sfumava in 0,16: veniva sostituita prima di vedersi e le unità sparivano, restava solo «2» al posto di «21». Quando i cambi arrivano più in fretta di 0,24 secondi lo scambio dura il 45%, e la cifra c’è sempre.
- Una tacca appena cominciata, o quasi tolta, era un punto: il tappo tondo di un tratto lungo zero. La tacca ora sfuma dentro nel primo 14% del suo tratto.
- Il tratto di traverso non può avere una posizione fissa: quando il mazzetto si stringe le tacche si spostano e il tratto sarebbe rimasto più largo di loro. I suoi capi si calcolano a ogni fotogramma dai piedi della prima e della quarta tacca.
- Premendo il più subito dopo il meno, la tacca che stava risalendo e quella nuova si disegnavano una sopra l’altra. La tacca che sta andando via, se torna utile, riparte da dov’è.
- La nota che usciva e quella che entrava si accavallavano per un attimo nella loro fessura alta 18 pixel: la vecchia ora esce in 0,2 secondi e la nuova parte 0,14 secondi dopo.
- Un clic col mouse arriva dopo pointerdown, che ha già contato: contava due volte. Il clic che segue una pressione si ignora, ma Invio e Spazio contano nel clic; l’anteprima si riconosce perché il suo clic non è isTrusted.
Librerie
GSAP 3.15.0, Roboto Flex (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 12 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 18 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.
