Il rullo delle ore
Selettori, 3D, Fisica
NuovaGratis
Tutti i componenti
Il pulsante delle banconote
Il Pay $120.00 di un negozio con i soldi veri nella pillola: nella punta di sinistra una mazzetta di sei banconote da 20 nella sua fascetta di carta, dentro un vassoio di feltro. Al clic la fascetta si strappa e le banconote si contano da una pila all'altra come fa un cassiere: ognuna si solleva dal bordo lontano, si gira curvandosi come carta vera, viene incontro all'occhio in prospettiva e ricade sulla pila contata mostrando il retro, sempre più in fretta, mentre accanto la cifra sale. Poi la pila si pareggia, arriva Paid con la spunta e una mazzetta nuova cade nel vassoio.
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 banknote button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the banknote button: the Pay of a shop with the money itself in the pill. In the round left end a bundle of
notes sits in a felt counting tray, held by its paper band. A click snaps the band, and the notes are counted
from one pile to the other: each one peels up from its far edge, turns over on a curve of paper that bends with
the speed of the turn, and flops onto the counted pile, faster and faster, while the amount counts up beside
them. Then the pill says Paid, and a new bundle drops into the tray -->
<div class="notes" data-notes>
<button class="notes__btn" type="button" data-btn data-autoclic>
<span class="notes__fill" aria-hidden="true">
<svg class="notes__guilloche" data-guilloche preserveAspectRatio="none"></svg>
<span class="notes__sheen" data-sheen></span>
</span>
<span class="notes__tray" aria-hidden="true"></span>
<!-- the notes, the band and their shadows: drawn by script.js -->
<canvas class="notes__canvas" aria-hidden="true" data-canvas></canvas>
<span class="notes__faces" data-faces>
<span class="notes__face" data-face="rest">
<span class="notes__word" data-rest-text>Pay $120.00</span>
</span>
<span class="notes__face" data-face="busy" aria-hidden="true">
<span class="notes__quiet" data-busy-text>Counting</span>
<span class="notes__count" data-count>
<span class="notes__roll" data-roll>$0.00</span>
<span class="notes__roll" data-roll>$0.00</span>
</span>
</span>
<span class="notes__face" data-face="done" aria-hidden="true">
<svg class="notes__tick" viewBox="0 0 20 20" aria-hidden="true">
<path d="M4.2 10.6 8.2 14.4 15.8 5.8" data-tick />
</svg>
<span class="notes__paid" data-paid-text>Paid</span>
</span>
</span>
</button>
<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.
27 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 delle banconote» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una pillola alta 60 pixel color verde banconota, più scura in basso, con un guilloche stampato appena sopra il colore: nove onde sottili che si intrecciano per tutta la lunghezza, come sul bordo di un biglietto di banca. A destra Pay $120.00 in Mona Sans color avorio. Nella punta di sinistra un vassoio di feltro scuro, incavato, segue la curva della pillola; a sinistra nel vassoio sta una mazzetta di sei banconote da 20, verde chiaro, ognuna con la cornice, un'onda incisa lungo i bordi, una rosetta di linee sottili, l'ovale della filigrana e il 20 negli angoli. Le banconote sono una sull'altra con un piccolo spostamento ciascuna, così si vedono i bordi della pila, e una fascetta di carta bianca con due righe rosse le tiene in mezzo. Passando sopra la pillola la mazzetta si apre appena a ventaglio intorno alla fascetta, la scritta si allarga con un rimbalzo e una striscia di luce attraversa il verde come sulla lamina di una banconota. Al clic la fascetta si stringe un attimo e si strappa: le due metà saltano via, una verso l'alto e una verso il basso, girando, e spariscono. Poi le banconote si contano: la prima si solleva dal bordo lontano, si gira sopra la cerniera fra le due pile curvandosi, cresce venendo verso l'occhio e ricade a destra mostrando il retro, col 20 grande in mezzo; il bordo che arriva per ultimo sbatte giù sulla pila. Ogni banconota parte un po' prima della precedente e fa il giro un po' più in fretta, così alla fine ce ne sono due o tre in aria insieme, ognuna con la sua ombra morbida sul feltro. Accanto c'è Counting e la cifra che sale a ogni banconota che atterra, $20.00, $40.00, fino a $120.00, con le cifre che arrivano dal basso. Quando l'ultima è giù la pila contata riceve un colpetto e si pareggia, e la scritta diventa Paid con una spunta disegnata. Dopo un attimo la pila se ne va verso l'alto sparendo e una mazzetta nuova, con la sua fascetta, cade nel vassoio rimbalzando: torna Pay $120.00. Con la tastiera il fuoco mostra un anello verde intorno alla pillola e apre la mazzetta a ventaglio; Invio o Spazio pagano. Al telefono il dito apre il ventaglio mentre preme.
Come funziona
Le banconote incise una volta
Fronte e retro di una banconota si disegnano una sola volta in due canvas nascosti, quattro volte più grandi di come si vedono (216 per 104 pixel): la carta con un gradiente radiale, la cornice doppia, un'onda sinusoidale lungo i bordi, la rosetta (un'ipotrocoide, la stessa curva dei guilloche veri, tracciata per 7 giri a mezzo grado per passo), l'ovale della filigrana pieno di ellissi concentriche e il valore in Fraunces negli angoli. Quando Fraunces è arrivato (document.fonts.load) le banconote si incidono di nuovo. I colori vengono dalle variabili di :root, lette con getComputedStyle.
Un foglio piegato lungo una curva
La banconota che si gira è una catena di 28 striscioline lungo la sua lunghezza. A ogni fotogramma la si stende partendo dalla cerniera fra le due pile: ogni strisciolina ha l'angolo θ(s) = π · p + k · s^1,5, dove p va da 0 (sulla pila di sinistra) a 1 (su quella di destra) e k è la piega, e la sua posizione è la somma delle precedenti. Il foglio non può passare sotto la pila su cui si posa: dove scenderebbe sotto, resta sopra, e così il bordo che arriva per ultimo si stende sulla pila invece di attraversarla.
La piega è una molla
La piega k segue una molla smorzata (ω = 2π · 4,2, ζ = 0,32) tirata verso un obiettivo che decide il giro stesso: CURL · 0,7 · sin(2πp) · la velocità del giro. Nella prima metà l'obiettivo è positivo e il bordo lontano va avanti, come quando il pollice solleva la banconota; nella seconda è negativo e il bordo resta indietro, trattenuto dall'aria. Quando il giro finisce l'obiettivo torna a zero, la molla passa oltre e il foglio sbatte sulla pila. Solo quando la molla si è fermata la banconota diventa una della pila.
Prospettiva, faccia e luce
Ogni punto si proietta con σ = F / (F − z): più è alto, più si allontana dal punto sotto l'occhio, messo a destra della cerniera e un poco in avanti, così una banconota in piedi mostra la faccia e non lo spigolo. Ogni strisciolina si disegna con drawImage dalla sua fetta della banconota, con un setTransform che porta il rettangolo della fetta sul trapezio proiettato, allargata di mezzo texel per non lasciare righe fra una e l'altra; le striscioline più alte si disegnano per ultime. La faccia visibile è quella la cui normale guarda verso l'occhio: il fronte, poi il retro. Poi la si scurisce o schiarisce secondo l'angolo con la luce, e sotto la banconota c'è un'ombra sfocata (un rettangolo disegnato lontano, di cui resta solo lo shadowBlur) che si allarga e si schiarisce mentre sale.
Il conteggio e gli stati
Una timeline GSAP stringe la fascetta, la strappa in due metà che saltano via, poi lancia le banconote: ogni intervallo è l'86% del precedente (fino a metà di PACE) e ogni giro il 93% del precedente, quindi il conteggio accelera. Ogni banconota che atterra fa salire la cifra, due righe che si danno il cambio in una finestrella con overflow: hidden. Le banconote si portano dietro il piccolo spostamento e l'inclinazione che avevano sulla pila e passano a quelli che avranno sull'altra, così non saltano né partendo né atterrando. Il pulsante è un button vero con aria-disabled durante il conteggio e una zona aria-live che dice Counting $120.00…, poi Paid, $120.00. e Ready to pay. Il ciclo di disegno sta in gsap.ticker e dorme quando niente si muove.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LABEL | script.js | Pay | La scritta a riposo, prima della cifra. |
NOTE | script.js | 20 | Il valore di una banconota: è stampato sulle banconote, negli angoli del fronte e in grande sul retro. |
NOTES | script.js | 6 | Quante banconote ci sono nella mazzetta, da 2 a 12: la cifra da pagare è NOTE per NOTES. |
CURRENCY | script.js | $ | Il segno davanti alle cifre. |
BUSY | script.js | Counting | La parola mentre le banconote si contano; la dice anche la zona aria-live. |
PAID | script.js | Paid | La parola accanto alla spunta quando sono contate tutte. |
FLIP | script.js | 0.5 | I secondi che ci mette la prima banconota a girarsi; le altre vanno un po' più in fretta. |
PACE | script.js | 0.26 | I secondi fra la prima banconota e la seconda: poi il conteggio accelera, fino a metà di questo intervallo. |
CURL | script.js | 1 | Quanto si piega una banconota mentre si gira: 0 è un cartoncino rigido, 1,6 una banconota vecchia e morbida che sbatte sulla pila. |
HOLD | script.js | 1.6 | I secondi in cui resta Paid prima che una mazzetta nuova cada nel vassoio. |
Quando usarla
Per il pulsante che chiude un acquisto: il Pay o il Checkout di un negozio online, il pagamento di una fattura, una mancia, il saldo di un'app per dividere le spese, la cassa di un mercatino, un'app di banca o di risparmio che vuole far sentire i soldi veri. Va collegato a un pagamento vero: qui il pagamento è simulato, e in un sito vero il conteggio parte quando il server accetta il pagamento e Paid arriva quando lo conferma.
Sul telefono
La pillola è larga circa 320 pixel: a 390 ci sta con margine, e si stringe se lo schermo è più stretto. Il dito che preme apre la mazzetta a ventaglio e schiaccia il fondo; lasciando, si paga. Il canvas si disegna alla densità dello schermo (fino a 3), e le banconote, incise quattro volte più grandi, restano nitide anche quando vengono incontro all'occhio.
Con il movimento ridotto
Niente si gira e niente salta: la fascetta sparisce in dissolvenza, la mazzetta svanisce dalla pila di sinistra e compare in dissolvenza su quella di destra, già contata, e la cifra va subito a $120.00. Le scritte cambiano in dissolvenza e la spunta è già disegnata; la mazzetta nuova ricompare in dissolvenza al suo posto. Niente ventaglio sotto il puntatore, niente rimbalzo del fondo.
Trappole
- Con l'occhio proprio sopra la cerniera una banconota in piedi si vedeva di spigolo, una riga sottile, e a metà del giro sembrava sparire. Spostato a destra della cerniera, una banconota in piedi mostra la faccia; e la faccia visibile non si decide più dalla direzione della strisciolina ma dalla sua normale rispetto all'occhio, altrimenti per un tratto si vedeva il fronte dove doveva vedersi il retro.
- Con l'occhio molto in avanti, per mostrare lo spessore della pila, una banconota in piedi si proiettava ben oltre il bordo alto della pillola, come una scheggia. Ora l'occhio è solo 12 pixel in avanti e la distanza è 260: la banconota più alta resta dentro la pillola, e la pila si legge dagli spostamenti delle banconote.
- La luce che veniva da sinistra scuriva proprio la faccia rivolta all'occhio: col velo verde scuro le banconote a metà giro sembravano trasparenti, con la pila che si vedeva attraverso. La luce ora viene dal lato dell'occhio e l'ombra si ferma a 0,45.
- Le banconote atterrate restavano disegnate tutte uguali finché la loro molla non si fermava, poi saltavano al loro piccolo spostamento: la pila contata sembrava una banconota sola e poi tremava. Ora ogni banconota passa durante il giro dallo spostamento della pila di partenza a quello della pila d'arrivo.
- Con gli atterraggi a un decimo di secondo l'uno dall'altro la cifra vecchia e la nuova stavano una sopra l'altra per un attimo. La vecchia ora esce in 0,14 secondi con una curva che parte subito, e la nuova entra 40 millisecondi dopo.
Librerie
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0, Fraunces (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 13 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 13 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.
