L’indicatore a lancetta
Contatori, Fisica, SVG
NuovaGratis
Tutti i componenti
Il pulsante della cloche
Il pulsante del servizio in camera di un hotel, su fondo nero: nella punta tonda della pillola blu notte una cloche d'argento sul suo piatto, che specchia una stanza buia. Sotto il puntatore una mano alza il coperchio di un dito e dalla fessura esce un filo di vapore; al clic il coperchio sbatte sul piatto come quello di una pentola mentre l'ordine parte, poi si alza e si inclina, il vapore sale sopra il croissant e la pillola dice On its way. Dopo un momento il coperchio ricade con un tintinnio e si assesta.
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 cloche button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the cloche button: the room service button of a hotel, with a silver cloche on its plate in the round left end
of the pill. Under the pointer the cover lifts a crack and a breath of steam slips out; a click rings the
kitchen and the cover rattles on its plate while the order goes; then a hand lifts it, the steam rolls out
over the breakfast and the pill says it is on its way. A moment later the cover comes down with a clink -->
<div class="cloche" data-cloche>
<div class="cloche__unit">
<button class="cloche__btn" type="button" data-btn data-autoclic>
<span class="cloche__fill" aria-hidden="true"></span>
<span class="cloche__faces">
<span class="cloche__face" data-face="rest">
<span class="cloche__word" data-rest-text>Order breakfast</span>
<span class="cloche__price" data-rest-price>€24</span>
</span>
<span class="cloche__face cloche__face--two" data-face="busy" aria-hidden="true">
<span class="cloche__small" data-busy-small>Room 214 · Continental</span>
<span class="cloche__big" data-busy-text>Calling the kitchen</span>
</span>
<span class="cloche__face cloche__face--two" data-face="done" aria-hidden="true">
<span class="cloche__big" data-done-text>On its way</span>
<span class="cloche__small" data-done-small>At your door in 25 min</span>
</span>
</span>
</button>
<!-- the plate, the breakfast and the cover, and above them the steam; the pointer goes through both -->
<canvas class="cloche__steam" aria-hidden="true" data-steam></canvas>
<svg class="cloche__art" viewBox="-16 -60 96 124" 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.
26 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 cloche» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero una pillola blu notte alta 60 pixel, con un filo d'oro sul bordo e un'ombra azzurrina sotto; a destra Order breakfast in Fraunces color crema e il prezzo €24 in oro. Nella punta tonda di sinistra, al posto dell'icona, un piatto di porcellana col bordo d'oro e sopra una cloche d'argento: una cupola lucida che specchia una stanza buia (una finestra chiara in alto, l'orizzonte scuro, il piatto caldo ai piedi), con un riflesso lungo a sinistra e il pomolo in cima. Passando sopra la pillola la scritta si fa più piena e morbida, il fondo si gonfia con un rimbalzo e una mano alza il coperchio dal lato sinistro: sotto il bordo si vede una luce calda e dalla fessura escono fili di vapore che salgono e si arricciano. Al clic la pillola dice Room 214 · Continental e Calling the kitchen, e il coperchio sbatte sul piatto come quello di una pentola che bolle: prima un lato poi l'altro saltano e ricadono, e a ogni salto esce un soffio di vapore. Quando la cucina risponde la mano alza il coperchio in alto e lo inclina indietro, sul piatto c'è un croissant dorato, il vapore sale in una nuvola che si arriccia nell'aria nera e la pillola dice On its way · At your door in 25 min. Dopo un momento il coperchio scende, batte sul piatto con un tintinnio, rimbalza appena e si ferma, e torna Order breakfast. Con la tastiera il fuoco mostra un anello d'oro e alza il coperchio come il puntatore; Invio o Spazio ordinano. Al telefono il tocco fa sobbalzare il coperchio e ordina.
Come funziona
La cloche in un SVG
Un solo SVG sta sopra la punta della pillola, con le coordinate della pillola (pointer-events: none, così il clic arriva al pulsante). La cupola è un tracciato con un gradiente orizzontale d'argento e, ritagliato dentro di lei con un clipPath, un secondo gradiente verticale che fa da stanza riflessa: chiaro in alto, una fascia scura per l'orizzonte, il caldo del piatto in fondo. Sopra, due riflessi sfocati con un feGaussianBlur. I gradienti prendono i colori con stop-color: var(--silver) e simili, così i campioni del Playground li cambiano. A ogni fotogramma cambia solo il transform del gruppo del coperchio.
Il coperchio: due bordi su due molle
Il coperchio non è un oggetto con una sola altezza: i suoi due bordi, sinistro e destro, hanno ognuno un'altezza e una velocità e una molla che li tira dove li vuole la mano (in pausa 0, sotto il puntatore 7,5 e 0,8 pixel, aperto LIFT + 9 e LIFT − 9). Il piatto li ferma da sotto: un bordo che lo tocca rimbalza col 34% della velocità. Dall'altezza media viene la salita del coperchio, dalla differenza il suo angolo (atan2 della differenza sulla larghezza). Un vincolo tiene la differenza entro quello che un coperchio rigido può fare.
Il coperchio che sbatte
Mentre l'ordine parte, a intervalli di 0,1–0,23 secondi un bordo a caso riceve un calcio verso l'alto (34–74 pixel al secondo per RATTLE), a volte anche l'altro un poco: la molla lo riporta giù, il piatto lo ferma e lui rimbalza, e i due bordi insieme fanno il tremolio di un coperchio su una pentola. Ogni volta che un bordo è sollevato la fessura lascia uscire vapore; ogni colpo forte sul piatto fa sobbalzare il fondo della pillola.
Il vapore col rumore arricciato
Il vapore è fatto di sbuffi su un canvas: ognuno ha posizione, velocità, età e durata, e a ogni passo la sua velocità insegue un vento che è il rotore (curl) di un rumore di Perlin che scorre nel tempo, più una spinta verso l'alto che cresce con l'età. Il rotore di un campo liscio non ha sorgenti né pozzi, quindi gli sbuffi girano invece di ammucchiarsi. Il piatto soffia da tre punti che si spostano piano: gli sbuffi nati nello stesso punto seguono lo stesso vento e disegnano fili invece di una nebbia. Ogni sbuffo è un disco sfumato disegnato una volta e stampato, allungato nella direzione in cui va.
Gli stati e il risparmio
Tre facce sovrapposte larghe quanto le parole (a riposo, mentre ordina, in arrivo); la pillola si misura una volta sulla più larga. Il pulsante è un button vero con aria-disabled mentre ordina e mentre il coperchio è su, una zona aria-live che dice Calling the kitchen… e poi On its way. At your door in 25 min., e l'aria-label che cambia con lo stato. Il ciclo di GSAP lavora solo mentre qualcosa si muove, e fuori dallo schermo (IntersectionObserver) si ferma.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LABEL | script.js | Order breakfast | La scritta a riposo. |
PRICE | script.js | €24 | Il prezzo accanto alla scritta. |
ORDER | script.js | Room 214 · Continental | La riga piccola mentre l'ordine parte: la camera e cosa si è ordinato. |
CALLING | script.js | Calling the kitchen | La scritta mentre il coperchio sbatte; la dice anche la zona aria-live. |
DONE | script.js | On its way | La scritta quando il coperchio si alza. |
ETA | script.js | At your door in 25 min | La riga piccola sotto, con il tempo di consegna. |
WAIT | script.js | 1.6 | I secondi che l'ordine impiega: il coperchio sbatte per tutto il tempo. In un sito vero è il tempo della risposta del server. |
HOLD | script.js | 2.6 | I secondi che il coperchio resta su prima di ricadere. |
LIFT | script.js | 34 | Quanto in alto la mano alza il coperchio, in pixel. |
STEAM | script.js | 1 | Quanto vapore: 0 niente, 2 una nuvola. |
RATTLE | script.js | 1 | Quanto sbatte il coperchio mentre l'ordine parte: 0 aspetta fermo, 3 salta forte. |
Quando usarla
Per il servizio in camera di un hotel o di una casa vacanze, per l'ordine al tavolo di un ristorante, per la consegna di una cucina o di un forno, per il bottone Order now di un menu online. Il pulsante finge l'ordine: in un sito vero il clic chiama la cucina, il coperchio sbatte finché il server non risponde e si alza quando l'ordine è confermato.
Sul telefono
La pillola è larga circa 320 pixel e il vapore sale sopra la sua punta sinistra: a 390 pixel ci sta. Il tocco fa sobbalzare il coperchio, schiaccia il fondo e ordina. La cloche resta della sua misura.
Con il movimento ridotto
Il coperchio non si muove e non c'è vapore: quando l'ordine è confermato il coperchio sparisce in dissolvenza e si vede il croissant, poi ricompare in dissolvenza. Le scritte arrivano in dissolvenza, la pillola non si gonfia e la scritta non cambia forma (sotto il mouse il fondo si schiarisce appena).
Trappole
- Il rotore del rumore era calcolato su uno scarto di mezzo pixel e diviso per mezzo pixel: le derivate venivano trenta volte più piccole del dovuto e il vapore saliva dritto come una colonna. Ora lo scarto e la divisione stanno nelle unità del rumore, e il vento arriccia davvero.
- Gli sbuffi nati in punti a caso sopra il piatto facevano una nebbia uniforme. Ora il piatto soffia da tre punti che si spostano piano col rumore: gli sbuffi dello stesso punto seguono lo stesso vento e diventano fili.
- La cupola larga 46 pixel e il piatto largo 55 uscivano dalla curva della punta della pillola in basso a sinistra. Ora la cloche è un po' più piccola e spostata di due pixel verso il centro.
- Il croissant disegnato con cinque ovali uno accanto all'altro sembrava una fila di palline. Ora è una sola mezzaluna con le pieghe del rotolo in diagonale e il lucido dell'uovo sul dorso.
Librerie
GSAP 3.15.0, Fraunces (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 12 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 19 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.
