L’indicatore a lancetta
Contatori, Fisica, SVG
NuovaGratis
Tutti i componenti
Il pulsante della bilancia
L'Add to cart di una drogheria che vende a peso, con una bilancia a molla nella punta tonda della pillola: il quadrante smaltato con le tacche e l'ago rosso dietro la ghiera cromata, e sopra la pillola il piatto d'ottone sulla sua colonna. Al clic un sacchetto di caffè cade sul piatto: il piatto scende, la molla oscilla davvero (un oscillatore smorzato calcolato a ogni fotogramma) e l'ago, legato al piatto, si assesta sul peso, mentre la pillola legge l'ago e calcola il prezzo dal peso, come una bilancia che fa i conti. Poi Added · 1 in cart e 250 g · €6.40. Il clic dopo fa cadere un secondo sacchetto sopra il primo: il piatto scende ancora, peso e conto salgono.
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 grocer's scale button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the grocer's scale button: the Add to cart of a grocer's shop, with a spring scale in the round left end of
the pill. Its dial is where an icon would be, and its brass pan stands just over the pill. A click drops a bag
of coffee on the pan: the pan sinks, the spring swings (a real damped oscillator), the needle settles on the
weight and the price is worked out from it. The next click adds a second bag on top of the first -->
<div class="scale" data-scale>
<div class="scale__unit">
<button class="scale__btn" type="button" data-btn data-autoclic>
<span class="scale__fill" aria-hidden="true"></span>
<span class="scale__faces">
<span class="scale__face" data-face="rest">
<span class="scale__word" data-wide="Add to cart" data-rest-text>Add to cart</span>
<span class="scale__price" data-rest-price>€6.40</span>
</span>
<span class="scale__face scale__face--two" data-face="busy" aria-hidden="true">
<span class="scale__small" data-busy-text>Weighing</span>
<span class="scale__big scale__digits" data-reading>0 g · €0.00</span>
</span>
<span class="scale__face scale__face--two" data-face="done" aria-hidden="true">
<span class="scale__big" data-done-text>Added · 1 in cart</span>
<span class="scale__small scale__digits" data-done-sub>250 g · €6.40</span>
</span>
</span>
</button>
<!-- the scale: dial, column, pan and bags, drawn by script.js; the pointer goes through it to the button -->
<svg class="scale__art" viewBox="-20 -92 104 152" aria-hidden="true" data-art></svg>
</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.
30 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 pulsante della bilancia» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una pillola verde bottega, alta 60 pixel, con un filo di luce in alto e un'ombra morbida sotto; a destra Add to cart in Bricolage Grotesque color crema e il prezzo €6.40 in una pillolina chiara. Nella punta tonda di sinistra, al posto dell'icona, il quadrante di una bilancia da cucina largo 47 pixel: la ghiera cromata con la sua ombra sulla pillola, la faccia smaltata color avorio con le tacche ogni 25 grammi, più lunghe ogni 100 e ogni 250, le cifre 250, 500, 750 e 1kg in rosso, l'ago rosso sottile col contrappeso e il cappellotto cromato sul perno, e sopra il riflesso del vetro. Dalla cima del quadrante sale una colonna cromata che esce dalla pillola e regge il piatto d'ottone, una coppa bassa vista appena dall'alto. Passando sopra la pillola la scritta si allarga, il fondo si gonfia con un rimbalzo e il piatto trema appena, come sfiorato: l'ago fa un piccolo sussulto. Al clic un sacchetto di caffè (carta kraft, la cima ripiegata con la linguetta di metallo, un'etichetta crema con un chicco) cade dall'alto, apparendo mentre scende, e la sua ombra si scurisce sul piatto; atterra, si schiaccia e si raddrizza. Il piatto scende sotto il peso, risale, scende ancora sempre meno, e l'ago oscilla con lui intorno a 250; intanto la pillola dice Weighing e sotto i grammi e il prezzo che l'ago segna in quel momento, che corrono avanti e indietro. Quando l'oscillazione è troppo piccola per leggerla arriva Added · 1 in cart e sotto 250 g · €6.40. Il clic dopo fa cadere un secondo sacchetto sopra il primo: quelli sotto si schiacciano un poco, il piatto scende ancora, l'ago passa 500 e torna, e la pillola dice Added · 2 in cart, 500 g · €12.80. Al terzo sacchetto la bilancia è piena; il clic dopo solleva i sacchetti uno dopo l'altro, il piatto torna su di scatto e l'ago batte contro il fermo dello zero, e il pulsante torna a Add to cart. Con la tastiera il fuoco mostra un anello verde e il piatto trema; Invio o Spazio aggiungono. Al telefono il tocco fa tremare il piatto e aggiunge.
Come funziona
La bilancia in un SVG
Un solo SVG sta sopra la pillola e la sporge in alto (pointer-events: none, così il clic arriva al pulsante): le sue coordinate sono quelle della pillola, con il viewBox che parte 92 pixel più su. Le parti ferme (ghiera, faccia, tacche, cifre, collare, vetro) si scrivono una volta; i gradienti prendono i colori con stop-color: var(--chrome) e simili, così i campioni del Playground li cambiano senza ridisegnare. A ogni fotogramma cambiano solo gli attributi transform dell'ago, della sua ombra, del piatto e dei sacchetti, e l'altezza della colonna, che si accorcia mentre il piatto scende nel collare.
La molla e il piatto
Il piatto è una massa su una molla con smorzatore: M · d'' = K · (PXG · carico − d) − c · d', con M = 170 grammi del piatto più i sacchetti. K si ricava da SWING (le oscillazioni al secondo con un sacchetto), PXG = 0,009 pixel al grammo dice dove il piatto si ferma per ogni peso. Lo smorzatore è c = 2 · σ · M con σ = DAMPING · 2π · SWING: con più sacchetti il piatto oscilla più lento, come su una bilancia vera, ma si calma nello stesso tempo. Passi di 1/240 di secondo, fotogramma limitato a 1/30. Sopra lo zero c'è un fermo: il piatto che torna su di scatto ci batte e rimbalza col 35% della velocità.
Il sacchetto che cade
Il sacchetto cade con la gravità (2600 pixel al secondo al secondo) da DROP pixel sopra il suo posto, che è il piatto o il sacchetto sotto, e si legge a ogni passo perché il piatto si muove. Quando lo tocca il suo peso entra nella molla tutto insieme e la quantità di moto si divide in un urto anelastico: il piatto riceve 0,06 · m · v / M. Il passo improvviso del carico da solo porterebbe l'ago quasi al doppio; l'urto aggiunge il resto. Il sacchetto ha due molle sue, lo schiacciamento (scaleY giù, scaleX su) e l'inclinazione, e chi sta sotto riceve una parte dello schiacciamento.
L'ago e il prezzo
L'ago è legato al piatto come da una cremagliera: angolo = (d / PXG) · 0,3 gradi, quindi un chilo fa 300 gradi dalla cima in senso orario. Mentre pesa, la pillola legge l'ago a ogni fotogramma: grammi = d / PXG arrotondati, prezzo = grammi · PRICE / BAG, scritti solo quando cambiano, con le cifre tabulari perché la riga non balli. L'ampiezza dell'oscillazione si stima dall'energia, √((d − d0)² + (d' / ω)²): sotto i 6 grammi l'ago si considera fermo e arriva Added con il peso esatto.
Gli stati e il ciclo
Tre facce sovrapposte larghe quanto le parole: a riposo, mentre pesa e aggiunto; la pillola si misura una volta sulla più larga (il peso più alto possibile, il numero più alto di sacchetti), così non cambia mai larghezza. Il pulsante è un button vero con aria-disabled mentre il sacchetto cade e l'ago oscilla, una zona aria-live che dice Weighing… e poi Added. 1 in cart, 250 g, €6.40, e un aria-label che dice cosa fa il clic dopo (Add another 250 g, o Clear the scale con la bilancia piena). Cadere e assestarsi dura circa 1,7 secondi, meno dei 2,8 fra due clic dell'anteprima: ogni clic aggiunge un sacchetto, e il quarto vuota la bilancia.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LABEL | script.js | Add to cart | La scritta a riposo, prima del prezzo. |
PRODUCT | script.js | Coffee beans | Cosa c'è nei sacchetti: lo dice il lettore di schermo nell'etichetta del pulsante. |
WEIGHING | script.js | Weighing | La riga piccola mentre l'ago oscilla; la dice anche la zona aria-live. |
ADDED | script.js | Added | La parola quando l'ago si ferma, prima del numero di pezzi nel carrello. |
BAG | script.js | 250 | I grammi di un sacchetto: dicono dove si ferma il piatto e dove punta l'ago. Il quadrante arriva a un chilo, quindi la bilancia tiene al massimo i sacchetti che ci stanno. |
PRICE | script.js | 6.4 | Il prezzo di un sacchetto in euro: da qui si ricava il prezzo al grammo con cui la pillola fa i conti mentre l'ago oscilla. |
MOST | script.js | 3 | Quanti sacchetti tiene il piatto: il clic dopo l'ultimo li solleva e torna a riposo. |
SWING | script.js | 2.2 | Le oscillazioni al secondo della molla con un sacchetto: più alto, una molla dura e svelta; più basso, morbida e lenta. |
DAMPING | script.js | 0.2 | Quanto lo smorzatore frena il piatto: 0,05 oscilla a lungo, 0,2 passa il peso un paio di volte e si ferma, 1 arriva al peso senza passarlo. |
DROP | script.js | 64 | Da quanto in alto cade il sacchetto, in pixel: più è alto più forte batte sul piatto e più l'ago va oltre il peso. |
BRUSH | script.js | 1 | Quanto il puntatore che passa sfiora il piatto: 0 resta fermo, 3 l'ago salta di una settantina di grammi. |
Quando usarla
Per l'Add to cart di chi vende a peso: drogherie, torrefazioni, tè, spezie, frutta secca, legumi, formaggi, la spesa online. Funziona anche dove si vende a misura o a quantità (tessuti a metro, filati, carta) cambiando il sacchetto e le cifre. Il pulsante finge il carrello: in un sito vero il clic chiama il tuo carrello, e il sacchetto cade quando il server risponde.
Sul telefono
La pillola è larga circa 260 pixel e il piatto sporge di una cinquantina sopra: a 390 pixel ci sta con margine. Il tocco fa tremare il piatto, schiaccia il fondo e aggiunge un sacchetto. La bilancia resta della sua misura.
Con il movimento ridotto
Il sacchetto non cade: compare in dissolvenza al suo posto, e il piatto e l'ago sono già sul peso, senza oscillare. Le scritte arrivano in dissolvenza, il piatto non trema al passaggio del puntatore, la pillola non si gonfia e la scritta non si allarga (sotto il mouse il fondo si schiarisce appena). Con la bilancia piena il clic fa sparire i sacchetti in dissolvenza.
Trappole
- Con lo smorzamento proporzionale a √(K · M), quello di un oscillatore con lo stesso rapporto di smorzamento, tre sacchetti si calmavano in quasi tre secondi e il clic seguente dell'anteprima cadeva mentre la bilancia pesava ancora, quindi andava perso. Ora lo smorzatore è c = 2 · σ · M: la frequenza scende col carico come su una bilancia vera, ma il tempo per calmarsi resta di circa 1,4 secondi.
- L'ago non si ferma mai del tutto in un oscillatore smorzato: aspettando che fosse fermo a meno di un grammo, Added arrivava tardi. Ora si stima l'ampiezza dall'energia e sotto i 6 grammi la pillola dice Added con il peso esatto, mentre l'ago finisce di assestarsi da solo; il ciclo smette di disegnare solo quando tutto è davvero fermo.
- Il sacchetto disegnato come un cuscinetto con le due estremità zigrinate sembrava una caramella. Ora ha la cima ripiegata con la linguetta di metallo da una parte e il soffietto del fondo dall'altra, come i sacchetti del caffè.
- Il gruppo delle cifre del quadrante aveva due attributi style (uno per il colore, uno per la larghezza del carattere): il parser tiene solo il primo, e le cifre uscivano larghe. Ora colore e font-stretch stanno nello stesso style.
Librerie
GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 13 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 12 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.
