L’indicatore a lancetta
Contatori, Fisica, SVG
NuovaGratis
Tutti i componenti
Il contatore a pallottoliere
Quanti ospiti a tavola, contati su una fila di pallottoliere: dieci perline laccate su un’asta d’ottone, e quelle spinte a destra sono gli ospiti. Il più e il meno danno un colpetto a un capo dell’asta: il colpo attraversa le perline come in un pendolo di Newton, l’ultima parte, scivola, urta le altre e rimbalza appena, e il numero gira sui suoi rulli quando arriva. Le perline si possono anche trascinare e lanciare.
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 abacus stepper</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/opsz.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- how many guests at a table, as one row of an abacus: lacquered beads on a brass rod in a black lacquer frame,
and the beads pushed to the right are the guests. Plus and minus fire a little hammer at one end of the rod:
the knock runs through the beads like a Newton's cradle and the last one shoots across. The beads can also be
dragged and thrown. The number's reels, the beads and the rod are made by the script -->
<div class="guests" data-guests>
<div class="guests__head" aria-hidden="true">
<span class="guests__count" data-count></span>
<span class="guests__note" data-note></span>
</div>
<div class="abacus" data-abacus>
<button class="abacus__btn" type="button" aria-label="Remove a guest" data-less>
<span class="abacus__disc" aria-hidden="true">
<svg viewBox="0 0 24 24"><path d="M6.5 12h11"/></svg>
</span>
</button>
<div class="abacus__track" role="spinbutton" tabindex="0" aria-label="Guests" aria-valuemin="1" aria-valuemax="10" aria-valuenow="2" aria-valuetext="2 guests" data-track>
<div class="abacus__groove" data-groove>
<span class="abacus__layer" data-shades></span>
<svg class="abacus__rod" aria-hidden="true" data-rod></svg>
<span class="abacus__layer" data-beads></span>
</div>
</div>
<button class="abacus__btn" type="button" aria-label="Add a guest" data-more data-autoclic>
<span class="abacus__disc" aria-hidden="true">
<svg viewBox="0 0 24 24"><path d="M6.5 12h11M12 6.5v11"/></svg>
</span>
</button>
</div>
<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.
34 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 pallottoliere» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una riga: a sinistra il numero 2 in un carattere con le grazie e sotto, in grigio, guests; a destra una cornice di lacca nera alta 64 pixel con un meno e un più su due dischi scuri e, in mezzo, una scanalatura con un’asta d’ottone e dieci perline laccate, cinque vermiglio e cinque avorio, contate da destra. Le perline spinte a destra sono gli ospiti: aprendo la pagina ce n’è una, poi un colpetto ne manda una seconda. Col più la rondella di gomma a sinistra dà un colpo alle perline di sinistra: il colpo le attraversa come in un pendolo di Newton e l’ultima parte verso destra, rallenta scivolando sull’asta e urta le altre; il colpo passa anche per loro, l’ultima schiaccia la rondella in fondo, e la perlina arrivata rimbalza indietro di qualche pixel prima di tornare al suo posto. Proprio nell’urto il numero gira sui suoi rulli, con un piccolo scatto oltre la cifra. Col meno succede lo stesso dall’altra parte. L’asta si flette di un niente a ogni urto. Portando il mouse sopra un pulsante il suo martelletto si carica: la rondella arretra appena e le perline la seguono. Una perlina si può prendere col dito o col mouse, spingere le altre, lanciare: il conto si aggiorna quando tutto si ferma. Un tocco su una perlina la manda dall’altra parte insieme a quelle fra lei e il vuoto. A 10 il più si spegne e sotto il numero sale maximum in rosso; premendolo ancora la cornice dà un colpo sordo e le perline si schiacciano contro il fermo; allo stesso modo il meno a 1, con minimum. Tenendo premuto un pulsante le perline partono una dopo l’altra, sempre più in fretta; dalla tastiera l’asta risponde alle frecce, a Home e a Fine.
Come funziona
Una fisica lungo una riga
Ogni perlina ha una posizione e una velocità lungo l’asta, in pixel. Il conto gira sul ticker di GSAP a passi di 1/600 di secondo al massimo (e un fotogramma lento conta per 1/30): un attrito viscoso (FRICTION) toglie velocità, una spinta costante di 650 pixel al secondo quadrato riporta ogni perlina verso il suo mucchio, come se l’asta scendesse appena verso i due capi, e le rondelle sono molle smorzate (RUBBER) con l’ottone dietro, che ferma una perlina se la gomma è schiacciata del tutto. Quando niente si muove il ciclo si ferma e non ridisegna.
Gli urti, coppia per coppia
Due perline che si toccano e si vengono incontro si urtano: l’impulso fra loro toglie la velocità con cui si avvicinano e ne restituisce BOUNCE, metà a ciascuna (sotto i 24 pixel al secondo non rimbalzano più, così si posano). Le coppie si risolvono una alla volta, ripassando la fila finché nessuna si avvicina: un colpo cammina così lungo una fila di perline che si toccano ed esce dall’ultima, che è il pendolo di Newton. Una perlina tenuta in mano ha massa infinita: spinge le altre e non cede.
Il colpo giusto
Il più colpisce la prima perlina del mucchio di sinistra, il meno l’ultima di quello di destra. Lungo una fila di n perline il colpo conserva (1 + BOUNCE) / 2 di sé a ogni coppia, quindi la perlina che parte riceve V · ((1 + BOUNCE) / 2)^(n − 1): lo script sceglie V perché arrivi all’altro mucchio a ARRIVE pixel al secondo, aggiungendo FRICTION per la distanza da percorrere, perché l’attrito viscoso toglie velocità in proporzione alla strada fatta.
Da che parte sta una perlina
Ogni perlina ha due posti, nel mucchio di sinistra e in quello di destra, e appartiene al lato il cui posto è più vicino: il confine è a metà fra i due. Le perline non possono passarsi, quindi questo dà sempre una fila a sinistra e una a destra. Coi pulsanti e coi tasti il lato lo decide il comando; con le mani lo si legge dalle posizioni, e il numero cambia solo quando tutto è fermo.
I rulli del numero
Le decine e le unità sono due strisce di undici cifre in una finestra sfumata in alto e in basso. Le muove un numero solo, che va dal conto vecchio al nuovo: le unità girano con lui, le decine solo mentre le unità passano da 9 a 0, come in un contachilometri. Il numero arriva con back.out e la sua forza si sceglie a ogni salto perché vada oltre di un quinto di cifra, qualunque sia la distanza.
Il limite e l’asta
Al limite il martelletto batte sordo: la cornice riceve un colpo verso sinistra e torna su una molla smorzata del tutto; le perline, dentro, sentono la sua accelerazione al contrario e vengono gettate contro il fermo di destra. L’asta è un oscillatore smorzato che ogni urto spinge un poco, al massimo un pixel: le perline la seguono lungo una parabola, più al centro che ai capi.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
MIN | script.js | 1 | Il numero più piccolo di ospiti. |
MAX | script.js | 10 | Il numero più grande di ospiti, che è anche il numero di perline sull’asta (da 3 a 12). |
START | script.js | 2 | Gli ospiti quando si apre la pagina. |
ARRIVE | script.js | 380 | Quanto veloce arriva una perlina all’altro mucchio, in pixel al secondo: quanto forte urta. |
BOUNCE | script.js | 0.9 | Quanto di un urto passa da una perlina all’altra (1 = tutto, come in un pendolo di Newton). |
FRICTION | script.js | 3.2 | Quanto in fretta rallenta una perlina che scivola sull’asta. |
RUBBER | script.js | [9000, 0.36] | Le rondelle di gomma ai capi dell’asta: quanto sono rigide e quanto frenano (1 = senza rimbalzo). |
FLEX | script.js | 1 | Quanto si flette l’asta negli urti (0 = un’asta rigida). |
HOLD | script.js | [0.42, 0.17, 0.07] | Tenendo premuto un pulsante: dopo quanto comincia a ripetere, il primo intervallo e il più corto, in secondi. |
WORD | script.js | ['guest', 'guests'] | La parola sotto il numero, per uno e per più di uno. |
Quando usarla
Per scegliere quante persone o quante cose quando il numero è piccolo e conta: ospiti a tavola, posti di una prenotazione, notti, porzioni, biglietti, pezzi nel carrello. Sta bene dove si vuole un gesto fisico e calmo, da oggetto vero, come la prenotazione di un ristorante o di un’enoteca, e dove le cinque perline di un colore aiutano a leggere il numero a colpo d’occhio.
Sul telefono
Sotto i 520 pixel il numero sale sopra l’asta e la cornice prende tutta la larghezza, così le perline restano grosse e hanno strada per correre; a 390 pixel niente sfora. Il dito fa come il mouse: un tocco su un pulsante conta uno, tenuto premuto ripete sempre più in fretta, una perlina si trascina e si lancia (lo scorrimento in verticale della pagina resta libero) e un tocco su una perlina la manda dall’altra parte. Il tocco lungo non apre menu e due tocchi veloci non ingrandiscono la pagina.
Con il movimento ridotto
Niente voli, rimbalzi, colpi della cornice, flessioni dell’asta o martelletti che si caricano: la perlina che cambia lato si dissolve dove era e ricompare al suo posto nell’altro mucchio, e il numero cambia con una dissolvenza invece di girare. Le perline si possono ancora trascinare; lasciate, vanno al loro posto in dissolvenza.
Trappole
- L’ombra sfocata dell’asta non si vedeva: un path orizzontale dritto ha un riquadro alto zero, e il filtro, che per difetto si misura su quel riquadro, aveva un’area vuota. Il filtro si misura in pixel della pagina (filterUnits userSpaceOnUse).
- Con due rulli indipendenti, passando da 2 a 10 il numero mostrava 16 e 17 per un attimo: ora i due rulli seguono un numero solo e le decine girano soltanto durante l’ultimo passo delle unità.
- back.out va oltre in proporzione alla strada: un salto da 2 a 10 faceva lampeggiare un 11. La sua forza si ricava a ogni salto dalla formula di quanto va oltre (4s³ / 27(s + 1)²) perché sia sempre un quinto di cifra.
- Al limite la cornice riceveva una velocità e le perline no: nel riferimento della cornice anche loro devono ricevere la velocità opposta nello stesso istante, altrimenti il mucchio si staccava dal fermo invece di esserci gettato contro.
- Quando arriva un blocco di perline gli urti si sommano in un passo solo e l’asta si piegava di parecchi pixel, a V: la velocità che gli urti danno all’asta ha un tetto, così non va mai oltre un pixel.
- Col solo attrito una perlina rimbalzata all’arrivo si fermava a metà strada, né di qua né di là: serve la spinta verso il proprio mucchio. Troppo debole, il rimbalzo era lungo e il ritorno molle; a 650 pixel al secondo quadrato, con la gomma più smorzata, la perlina torna indietro di 8 pixel e in mezzo secondo è a posto.
- Con un BOUNCE basso il colpo non attraversa la fila: per far partire l’ultima perlina servirebbe un colpo enorme, che trascina dietro tutto il mucchio. Il colpo ha un tetto di quattro volte la velocità di partenza e nel Playground BOUNCE va da 0,7 a 1.
- Passando in fretta col mouse su un pulsante il martelletto restava caricato e un mucchio di perline stava due pixel fuori posto: il tween che carica (0,35 s) durava più di quello che scarica (0,3 s) e senza overwrite girava fino in fondo. Con overwrite: 'auto' l’ultimo comanda; il colpo del martelletto, che è un’altra proprietà dello stesso oggetto, non viene toccato.
- Playwright, e con lui il collaudo, non clicca un pulsante con aria-disabled: il segno data-autoclic passa all’altro pulsante appena si arriva a un limite, così l’anteprima fa avanti e indietro.
Librerie
GSAP 3.15.0, Newsreader (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 15 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 6 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.
