Il pulsante a coriandoli
Pulsanti, Fisica, 3D
NuovaGratis
Tutti i componenti
Il rullo delle ore
Due rulli per scegliere un’ora, ore e minuti, coi numeri su un tamburo che gira senza fine: lanciato, un rullo rallenta da solo e si ferma sempre esattamente su un numero, che nella fascia diventa bianco e spesso; sopra, l’ora scelta e quanto manca.
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 time wheel</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/manrope@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the picker: two wheels on a drum, hours and minutes, that go round and round. Flung, a wheel slows down by
itself and always stops exactly on a number; the time above follows the wheels. The numbers are drawn by
the script -->
<div class="alarm" data-alarm>
<p class="alarm__label">Wake me up at</p>
<p class="alarm__time" aria-hidden="true"><span data-hh>07</span><span class="alarm__colon">:</span><span data-mm>30</span></p>
<p class="alarm__in" aria-live="polite"><span data-in></span></p>
<div class="wheels" data-wheels data-autoclic>
<span class="wheels__band" aria-hidden="true"></span>
<div class="wheel" role="spinbutton" tabindex="0" aria-label="Hours" aria-valuemin="0" aria-valuemax="23" data-wheel="24"></div>
<span class="wheels__colon" aria-hidden="true">:</span>
<div class="wheel" role="spinbutton" tabindex="0" aria-label="Minutes" aria-valuemin="0" aria-valuemax="59" data-wheel="60"></div>
</div>
</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.
17 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 rullo delle ore» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero la scritta Wake me up at, sotto un’ora grande e sottile, 07:30, e la riga che dice quanto manca, per esempio in 18 h 46 min; più giù due rulli, le ore e i minuti, coi numeri disposti su un tamburo: in mezzo una fascia grigio scuro coi due punti, e i numeri sopra e sotto si schiacciano e sfumano come se girassero via. Aprendo la pagina i due rulli girano da soli fino alle 07:30, e l’ora grande conta con loro. Trascinando un rullo i numeri seguono il dito; lanciato, il rullo continua a girare, rallenta e si ferma esattamente su un numero. Il numero che entra nella fascia diventa bianco e più spesso, quelli che si allontanano tornano grigi e sottili. Un tocco su un numero sopra o sotto la fascia lo porta in mezzo; le frecce e i tasti Pagina girano il rullo, e così la rotella del mouse. Decisa l’ora, la riga di quanto manca scivola via e torna aggiornata.
Come funziona
Il tamburo
Ogni numero viene spinto indietro del raggio, girato di quanto è lontano dalla fascia per STEP gradi e spinto di nuovo avanti: translateZ(−R) rotateX translateZ(R). Il raggio viene da ITEM e STEP, così due numeri vicini si toccano, e la perspective sta sul rullo. Si disegnano solo i numeri entro 90 gradi.
Senza fine
La posizione di un rullo è un numero qualsiasi, anche negativo; il valore è la posizione arrotondata, modulo 24 o 60. Gli elementi sono pochi e sempre gli stessi: quando uno passa dall’altra parte del tamburo cambia soltanto il suo testo.
Dove si ferma
Lasciato il rullo, la velocità viene dagli ultimi 90 millisecondi: il punto dove si fermerebbe è posizione + velocità / SLOW, e lo script lo arrotonda a un numero. Poi a ogni fotogramma la distanza che manca si accorcia di e^(−SLOW·t): parte alla velocità del lancio e finisce proprio sul numero.
La fascia
A ogni fotogramma ogni numero guarda quanto è lontano dalla fascia: il colore va da --far a --ink con gsap.utils.interpolate, il peso del font variabile da 470 a 700, e l’opacità cala con l’angolo. Il rullo in uso ha role spinbutton, coi suoi aria-valuenow e aria-valuetext.
Tocchi, tasti, rotella
Un tocco porta in mezzo il numero toccato: sul tamburo l’altezza è R · sin dell’angolo, quindi l’arcoseno dice quanti numeri più in là. Le frecce cambiano di uno, i tasti Pagina di PAGE, Inizio e Fine vanno a 00 e all’ultimo; la rotella sposta il rullo e dopo 0,14 secondi lo fa scivolare al numero più vicino. La riga di quanto manca si aggiorna quando i due rulli sono a meno di mezzo numero dall’arrivo, e ogni 20 secondi.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
START | script.js | [7, 30] | L’ora all’apertura della pagina: ore e minuti. |
STEP | script.js | 20 | I gradi fra due numeri sul tamburo. |
ITEM | script.js | 46 | L’altezza di un numero, in pixel. |
SLOW | script.js | 4 | Quanto in fretta rallenta un rullo lanciato (di più = si ferma prima). |
PAGE | script.js | [6, 10] | Di quanti numeri saltano i tasti Pagina, per le ore e per i minuti. |
Quando usarla
Per una sveglia o un promemoria, l’orario di una prenotazione o di un ritiro, la durata di un timer: ovunque si sceglie un’ora, soprattutto al telefono.
Sul telefono
Al telefono i rulli si girano col pollice: hanno touch-action: none, così il dito non fa scorrere la pagina; l’ora grande si rimpicciolisce con lo schermo.
Con il movimento ridotto
I rulli non girano da soli all’apertura e non scivolano: trascinati seguono il dito, lasciati o toccati saltano subito al numero dove si fermano, e la riga di quanto manca cambia senza scorrere.
Trappole
- Disegnare tutti i numeri sul tamburo (sessanta per i minuti) è uno spreco: se ne vede una decina. Lo script ne tiene pochi e cambia il loro testo quando passano dall’altra parte, e così il rullo gira senza fine.
- Un rallentamento normale si fermerebbe fra due numeri, e lo scatto finale per centrarne uno si vedrebbe: il punto d’arrivo si arrotonda nel momento in cui si lascia il rullo, e il rallentamento viene piegato per finire proprio lì.
- Sul tamburo un numero toccato lontano dalla fascia non sta a un’altezza proporzionale: l’altezza è R · sin dell’angolo, e per sapere quale numero si è toccato serve l’arcoseno.
- La rotella del mouse va ascoltata con passive: false, o preventDefault non funziona e girando il rullo si scorrerebbe anche la pagina.
Librerie
GSAP 3.15.0, Manrope (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 5,2 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 3 ottobre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Fatto
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.
