Il rullo delle ore
Selettori, 3D, Fisica
NuovaGratis
Tutti i componenti
Il pulsante del distributore automatico
Il pulsante Buy · €2.50 dipinto come la vetrina di un distributore automatico: nella punta della pillola rossa laccata una finestrella illuminata, e dietro il vetro una fila vista di fronte, in 3D vero, con la spirale d'acciaio che corre indietro nella macchina e le barrette di cioccolato incartate in piedi fra le spire. Al clic la spirale fa un giro, le spire passano davanti e dietro le barrette e tutte avanzano; quella davanti supera il bordo del ripiano, si inclina, cade girando e rimbalza nel vano prima di sparire. La pillola dice Enjoy · Change €0.50. Un altro clic carica la barretta successiva.
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 vending machine button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the vending machine button: a Buy button painted like the front of a vending machine. In the round right end of
the pill there is a small lit window with a row inside: a steel spiral, drawn in true 3D with its turns in
front of the bars and behind them, holding wrapped chocolate bars on end. A click turns the spiral once: the
front bar comes forward, tips over the edge of the shelf, falls and bounces into the tray, and the pill says
Enjoy with the change; another click loads the next bar -->
<div class="vend" data-vend>
<button class="vend__btn" type="button" data-btn data-autoclic>
<span class="vend__fill" aria-hidden="true"></span>
<span class="vend__faces">
<span class="vend__face" data-face="rest">
<span class="vend__word" data-wide="Buy · €2.50" data-rest-text>Buy · €2.50</span>
</span>
<span class="vend__face vend__face--busy" data-face="busy" aria-hidden="true">
<span class="vend__shine" data-busy-text>Vending…</span>
</span>
<span class="vend__face vend__face--done" data-face="done" aria-hidden="true">
<span class="vend__line">
<span class="vend__enjoy" data-done-text>Enjoy</span>
<span class="vend__sep" aria-hidden="true">·</span>
<span class="vend__change" data-change-text>Change €0.50</span>
</span>
</span>
</span>
<span class="vend__window" aria-hidden="true">
<canvas class="vend__scene" data-scene></canvas>
</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.
25 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 del distributore automatico» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero una pillola rossa laccata, alta 60 pixel, con un riflesso morbido in alto e un alone rosso sotto. A sinistra, in Mona Sans color crema, Buy · €2.50; nella punta tonda di destra una finestrella col bordo scuro, più tonda dal lato della pillola, e dietro il vetro l'interno di un distributore visto di fronte e un poco dall'alto: in cima una striscia di luce fredda che illumina la macchina, in fondo i piatti dei motori, il ripiano di metallo che corre indietro e davanti il suo bordo con un cartellino. Nel mezzo una spirale d'acciaio di cinque spire va dal motore al bordo, e fra le spire stanno in piedi quattro barrette incartate di blu notte con una fascia color crema, una riga arancio, qualche quadretto di cioccolato disegnato e la carta stagnola increspata alle due estremità; a destra e a sinistra il telaio taglia altre due file, una verde e una ocra. Le spire più vicine sono più grandi, quelle in fondo più piccole e più alte, e passano davanti alle barrette in basso e dietro di loro in alto; il filo è chiaro sopra ogni spira, dove riflette la luce, e scuro sotto. Sul vetro due riflessi obliqui e uno sottile. Col mouse sopra la pillola si gonfia con un rimbalzo, la scritta si allarga, la luce della finestra cresce, un riflesso passa sul vetro e la spirale dà un piccolo giro indietro, come un motore che prende il gioco. Al clic arriva Vending… con un riflesso che lo attraversa e la spirale fa un giro intero, partendo e fermandosi piano: le spire scorrono in avanti e tutte le barrette avanzano di un passo. Quella davanti supera il bordo del ripiano e si inclina in avanti sempre più svelta, lascia il bordo girando, cade nello spazio sotto il ripiano, tocca il vano con un rimbalzo, si posa di piatto e sparisce sotto il telaio. La pillola dice Enjoy, e più piccolo Change €0.50. Un altro clic carica la barretta successiva in fondo alla fila, che scende al suo posto con un rimbalzo mentre la spirale prende il gioco e un riflesso passa sul vetro, e la pillola torna a Buy · €2.50. Con la tastiera il fuoco mostra un anello bianco, la scritta si allarga e la spirale dà il suo piccolo giro; Invio o Spazio comprano. Al telefono il tocco compra.
Come funziona
Una camera stenopeica
La finestra è un canvas di 86 per 48 pixel, alla densità dello schermo fino a 3. Il mondo ha X a destra, Y in su e Z verso di noi; l'asse della fila corre lungo Z dal bordo del ripiano indietro. Un punto si proietta con s = F / (F − Z): x = cx + X · s, y = orizzonte + (altezza dell'occhio − Y) · s. Con l'occhio 22 pixel sopra l'asse le cose in fondo sono più piccole e più alte, e si vede la profondità della fila. Lo sfondo, la luce, il ripiano e i piatti dei motori si dipingono una volta su un canvas a parte.
L'elica, segmento per segmento
La spirale è un'elica di raggio 11,5 e passo 13: il filo all'angolo a sta a Z = −(a − φ) / 2π · passo, quindi girandola di φ ogni spira viene avanti. Ogni spira è fatta di 28 segmenti, e ogni segmento è un elemento con la sua profondità, ordinato insieme alle barrette e al bordo del ripiano dal più lontano al più vicino: così le spire passano davanti alle barrette e dietro di loro come in una vera. Il colore del filo dipende dal seno dell'angolo (chiaro sopra, dove riflette la striscia di luce, scuro sotto), con un filo di luce sottile spostato in su, e sbiadisce un poco in fondo.
Le barrette sono scatole
Ogni barretta è una scatola di 13 per 17 per 4,5 pixel, col suo centro e un'inclinazione ψ intorno all'asse X. Le otto punte si girano e si proiettano; delle sei facce si disegnano quelle che guardano la camera (prodotto scalare fra la normale girata e la direzione verso l'occhio). La faccia davanti porta l'incarto, dipinto una volta su un canvas otto volte più fitto e steso sui due triangoli della faccia con la trasformazione affine; le estremità sono stagnola, chiara se guarda in su, e i fianchi carta piegata. Quando si inclina, la faccia davanti si accorcia e quella di sopra si allarga, perché è proprio una scatola che gira.
Il giro e la caduta
Un tween di GSAP porta la spirale a un giro intero in power1.inOut, e ogni barretta della fila avanza di un passo per giro. Quando il centro di quella davanti supera il bordo, la barretta è per conto suo: gira intorno allo spigolo come un pendolo rovesciato, ψ'' = 0,75 · g / r · sin ψ, sempre più svelta; a 0,62 radianti lascia lo spigolo con la velocità che aveva (ω per il raggio) e diventa un corpo libero, con la gravità, un poco di freno e la sua rotazione. A ogni passo di 1/240 di secondo si cerca la punta più bassa: quando passa il fondo del vano la barretta torna su, la velocità verticale si rovescia e si riduce a BOUNCE e la rotazione si dimezza. Al terzo colpo, o quando rimbalza poco, si posa di piatto e scivola giù sotto il telaio sparendo.
Il vetro e la luce
Sopra tutto si disegnano la striscia di luce in cima, con il suo alone che scende, e i riflessi del vetro: tre bande oblique con un gradiente che sale e scende, in modalità screen, e un filo chiaro sul bordo alto. Sotto il puntatore, o col fuoco della tastiera, una quarta banda più forte attraversa il vetro e l'alone cresce; la spirale dà un piccolo giro indietro e torna con elastic.out. Quando niente si muove (nessun tween e nessuna barretta in volo), il ciclo smette di disegnare.
Le parole e gli stati
Tre facce sovrapposte: Buy · €2.50, con una copia larga invisibile che tiene il posto della scritta che si allarga; Vending… con un riflesso che la attraversa; ed Enjoy · Change €0.50 su una sola linea di base, con le tre parti che arrivano una dopo l'altra. Il pulsante è un button vero: aria-disabled mentre vende, una zona aria-live dice Vending…, Enjoy. Change €0.50. e Next bar loaded., e l'aria-label dice cosa farà il prossimo clic. La caduta finisce prima dei 2,8 secondi fra due clic dell'anteprima, che così fa vedere il giro intero: compra, ricarica, compra.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LABEL | script.js | Buy · €2.50 | La scritta a riposo, col prezzo. |
BUSY | script.js | Vending… | La scritta mentre la spirale gira; la dice anche la zona aria-live. |
DONE | script.js | Enjoy | La parola grande quando la barretta è nel vano. |
CHANGE | script.js | Change €0.50 | Il resto, più piccolo dopo la parola. In un sito vero qui va quello che il tuo server risponde (lo sconto, il credito che resta, il numero dell'ordine). |
TURN | script.js | 1.15 | I secondi del giro della spirale. |
COILS | script.js | 5 | Le spire della spirale, da 3 a 7: le barrette in fila sono una di meno. |
GRAVITY | script.js | 1300 | Quanto in fretta cade la barretta, in pixel al secondo al quadrato: più basso, una caduta lenta, come sulla luna. |
BOUNCE | script.js | 0.34 | Quanta velocità tiene la barretta quando tocca il vano: 0 si ferma subito, 0,7 rimbalza alto. |
Quando usarla
Per il pulsante che compra subito una cosa piccola: uno snack, un caffè, un biglietto, un gettone, un pacchetto di crediti di un gioco, una donazione, l'acquisto rapido di un negozio di dolci o di una macchinetta vera collegata a un'app. Sta bene nei siti un poco giocosi e nei negozi notturni. Va collegato al tuo pagamento vero: qui l'acquisto è simulato.
Sul telefono
La pillola è larga 300 pixel: a 390 pixel ci sta con margine, e la finestra resta di 86 per 48. Il tocco compra (con lo schiacciamento elastico del fondo) e un altro tocco ricarica; il riflesso sul vetro, che col mouse arriva in hover, al telefono passa al momento della ricarica.
Con il movimento ridotto
La spirale non gira e non dà il suo piccolo giro, niente riflesso che passa, la pillola non si gonfia e la scritta non si allarga (sotto il mouse il fondo si schiarisce appena). Al clic la barretta davanti svanisce in dissolvenza e le altre sono già al loro posto, ed Enjoy · Change €0.50 arriva in dissolvenza; un altro clic fa comparire la barretta nuova in fondo, in dissolvenza.
Trappole
- Con le barrette larghe quanto la spirale le spire si vedevano solo come un bordo intorno a loro, e la spirale non si leggeva. Barrette più strette e più basse del diametro, e la camera più in alto, lasciano vedere le spire sopra di loro e la fila che corre indietro.
- La barretta cadeva sotto il telaio in un solo fotogramma: il vano era sotto il bordo della finestra. Ora il fondo del vano è appena sotto il ripiano, la barretta ci rimbalza in vista, si posa di piatto e poi scivola giù sparendo.
- La prima prova faceva girare la barretta intorno allo spigolo davanti della sua base, che all'inizio stava dietro il bordo: la barretta saltava avanti di due pixel. Ora gira intorno al bordo del ripiano, che quando parte è proprio sotto il suo centro.
- Enjoy, più grande, e Change €0.50, più piccolo, centrati in verticale ognuno per conto suo, non stavano sulla stessa linea di base. Ora sono pezzi in linea dentro una sola riga.
- La barretta nuova si carica in fondo alla fila, dove quella davanti la copre: al clic di ricarica non succedeva niente di visibile. Ora la spirale prende il gioco con un piccolo giro indietro e un riflesso passa sul vetro.
Librerie
GSAP 3.15.0, Mona Sans (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.
