Il pulsante a strati
Pulsanti, Hover, Fisica
Gratis
Tutti i componenti
Il pulsante della candela
Il pulsante Log out di un account su fondo nero, illuminato da una candela accesa nella punta tonda della pillola. La fiamma è una forma disegnata a ogni fotogramma su canvas: respira, trema in punta e si piega su una molla verso il puntatore che si avvicina, come per un soffio d'aria; la sua luce calda cade sulla pillola, sul piattino e sulla scritta. Al clic scende uno spegnimoccolo d'ottone, la fiamma muore sotto la campana, dallo stoppino sale un filo di fumo che si arriccia nel curl noise e la pillola si fa fredda e scura: Signed out. Il secondo clic accende un fiammifero, lo porta allo stoppino e la luce torna: Welcome back, Noor.
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 candle 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 candle button: the Log out button of an account, with a lit candle in the round left end of the pill, on a
black page. The flame breathes and leans to the pointer coming near, and its warm light falls on the pill. A
click brings down a brass snuffer, the flame dies under it, a thread of smoke curls up from the wick and the
pill goes dark; another click strikes a match that lights the wick again -->
<div class="candle" data-candle>
<button class="candle__btn" type="button" data-btn data-autoclic>
<span class="candle__fill" aria-hidden="true"></span>
<canvas class="candle__art" aria-hidden="true" data-art></canvas>
<span class="candle__words">
<span class="candle__word" data-word>Log out</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.
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 candela» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero una pillola scura alta 60 pixel, scaldata da sinistra da una luce ambrata che la fa sembrare di legno al lume di candela, con un alone caldo appena fuori dal bordo. A destra, in Mona Sans color crema, Log out; nella punta tonda di sinistra una candela corta su un piattino d'ottone: la cera è un cilindro color avorio con una colatura sul fianco, la parte alta brilla attraverso la cera dove la fiamma la scioglie, e in cima c'è il laghetto di cera fusa. Sopra lo stoppino nero la fiamma: una goccia col piede blu, il corpo arancio, il cuore chiaro più in basso e un bagliore morbido della stessa forma. All'arrivo la fiamma, appena accesa, sale alla sua altezza con un piccolo guizzo. La fiamma respira lenta, trema in punta e oscilla da sola; il puntatore che si avvicina la piega verso di sé, e passando in fretta l'aria che sposta la fa ondeggiare, poi torna diritta oscillando; con lei tremano la luce sulla pillola e i riflessi del piattino. Sopra la pillola la scritta si allarga e il fondo si gonfia con un rimbalzo. Al clic la scritta diventa Logging out…: dall'alto a destra scende lungo la sua asta uno spegnimoccolo d'ottone, la campana si posa sullo stoppino con un piccolo rimbalzo, la fiamma si strozza e si spegne, la luce sulla pillola muore; la campana risale e dallo stoppino, che resta acceso di brace per un attimo, sale un filo di fumo grigio, sottile in basso e più largo e sfumato in alto, che si arriccia nell'aria per tre secondi. La pillola diventa fredda e grigia, la cera spenta, e la scritta dice Signed out, poi Sign in. Il secondo clic: Signing in…, un fiammifero arriva dall'alto a destra e si accende in aria con una fiammata, scende in un piccolo arco fino allo stoppino, lo stoppino prende e la fiamma sale dal suo piede blu fino all'altezza piena, oltre e indietro; il fiammifero se ne va scosso, spegnendosi con un suo filo di fumo, la luce calda torna sulla pillola: Welcome back, Noor, poi Log out. Con la tastiera il fuoco mostra un anello ambrato e la fiamma trasale. Al telefono il dito vicino alla candela la fa piegare e il tocco la spegne o la riaccende.
Come funziona
La fiamma: una forma su una spina piegata
La fiamma è un poligono costruito su una spina di 18 punti: dal piede alla punta la spina si sposta di (lean · s² + flick · s³) · altezza, quindi si piega sempre più verso la punta; la larghezza è (1 − s)^1,25 per la punta affusolata e una radice vicino al piede per il fondo tondo. La stessa forma si riempie quattro volte in modalità lighter: un bagliore largo e sfocato con shadowBlur, il corpo con un gradiente verticale dal blu all'arancio, il cuore chiaro più corto e stretto, la coppa blu al piede. Mai un tondo luminoso: anche il bagliore ha la forma della fiamma.
Respiro, tremolio e la molla
L'altezza segue un'onda lenta di BREATH al secondo più due ottave di rumore a gradiente, e la punta trema con un rumore veloce. Il piegarsi è una molla smorzata (1,6 oscillazioni al secondo, smorzamento 0,32) verso un bersaglio: il puntatore vicino tira la fiamma verso di sé con una forza che cala col cubo della distanza (REACH è dove vale metà), e la sua velocità orizzontale aggiunge il soffio dell'aria spostata. Così la fiamma va un poco oltre e torna, come una vera.
Il fumo: un nastro nel curl noise
Lo stoppino emette settanta particelle al secondo, in ordine. Ognuna sale per il suo calore e viene portata dal rotore di un campo di rumore a gradiente in due dimensioni che scorre nel tempo: il curl, calcolato per differenze finite, è un flusso senza divergenza, quindi l'aria gira e si arriccia senza ammassarsi. Il nastro si disegna unendo le particelle consecutive in tratti di quattro, ogni tratto un solo path con curve quadratiche: sottile e chiaro vicino allo stoppino, più largo e trasparente salendo, sfumato verso i bordi del canvas.
Lo spegnimoccolo e il fiammifero
Sono due timeline di GSAP sugli stessi oggetti che il ciclo disegna. Lo spegnimoccolo scende lungo la direzione della sua asta con back.out, la fiamma si strozza (altezza e larghezza calano), la campana risale con power2.in e il fumo parte quando si alza, con la brace che svanisce. Il fiammifero entra sfumando dal bordo, si accende con una fiammata (1,55 volte la sua fiamma, poi 1), scende in un arco, e lo stoppino prende con elastic.out; la sua fiamma sta sempre diritta qualunque sia l'angolo del bastoncino e si piega all'indietro rispetto al suo moto.
La luce sulla pillola
A ogni fotogramma la luce insegue la fiamma (più quella del fiammifero) con un piccolo ritardo e il suo tremolio, e si scrive in tre variabili CSS: --glow regola l'opacità dei gradienti caldi sopra la pillola e dell'alone, --out quella dello strato freddo e scuro, --lit mescola il colore della scritta con color-mix. Il piattino, la cera e il bagliore attraverso la cera usano lo stesso valore, così tutta la scena si scalda e si raffredda insieme.
Gli stati
Un button vero con aria-disabled mentre si spegne o si accende, una zona aria-live che dice Logging out…, Signed out., Signing in… e Signed in. Welcome back, Noor. La pillola è larga quanto la più lunga delle sei scritte, misurata già larga. La fiamma accesa si muove sempre, quindi il ciclo gira finché è accesa e in vista; al buio, finiti fumo, spegnimoccolo e fiammifero, si ferma.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LOG_OUT | script.js | Log out | La scritta da collegati. |
LOGGING_OUT | script.js | Logging out… | La scritta mentre la candela si spegne; la dice anche la zona aria-live. |
SIGNED_OUT | script.js | Signed out | La scritta a candela spenta. |
SIGN_IN | script.js | Sign in | La scritta al buio, che offre la strada del ritorno. |
SIGNING_IN | script.js | Signing in… | La scritta mentre il fiammifero riaccende la candela. |
SIGNED_IN | script.js | Welcome back, Noor | Il bentornato. Il nome è inventato: in un sito vero è quello dell'utente. |
SAID | script.js | 1 | I secondi in cui resta Signed out o il bentornato prima che il pulsante offra la strada del ritorno. |
SNUFF | script.js | 0.7 | I secondi che lo spegnimoccolo impiega a scendere sulla fiamma. |
SMOKE | script.js | 3 | Per quanti secondi lo stoppino fuma. |
CURL | script.js | 1 | Quanto l'aria arriccia il fumo: 0 sale diritto, 3 si attorciglia molto. |
BREATH | script.js | 0.35 | I respiri lenti della fiamma al secondo. |
LEAN | script.js | 1 | Quanto la fiamma si piega verso il puntatore: 0 non lo sente. |
REACH | script.js | 170 | Fin dove il puntatore si sente, in pixel: a questa distanza la fiamma si piega a metà. |
Quando usarla
Per l'uscita da un account, o l'entrata, in un sito dai toni caldi e notturni: un ristorante, un'enoteca, un marchio di candele o di profumi, un'app di diario o di meditazione, un sito di narrativa o di giochi di ruolo; anche come interruttore per il tema scuro. L'uscita va collegata alla propria: qui è tutto simulato.
Sul telefono
La pillola è larga circa 250 pixel e a 390 ci sta con margine; il fumo, lo spegnimoccolo e il fiammifero restano sopra la candela e a sinistra della scritta. Il dito appoggiato vicino alla candela piega la fiamma; il tocco la spegne o la riaccende.
Con il movimento ridotto
La fiamma sta ferma, senza respiro né tremolio, e non si piega. Al clic svanisce in mezzo secondo e la luce sulla pillola si spegne in dissolvenza, senza spegnimoccolo né fumo; al secondo clic riappare in dissolvenza, senza fiammifero. Le scritte cambiano in dissolvenza; la pillola non si gonfia e la scritta non si allarga.
Trappole
- Il fumo disegnato un segmento alla volta con le estremità tonde sembrava una fila di perline: dove due segmenti trasparenti si sovrappongono il grigio raddoppia. Ora il nastro si disegna a tratti di quattro particelle, ognuno un solo path con estremità piatte.
- Un clic durante il fumo fermava la timeline dello spegnimento a metà, e lo stoppino restava con l'emissione accesa: fumava per sempre anche con la fiamma riaccesa, e il ciclo non dormiva più. Quando lo stoppino prende, la timeline del fiammifero porta a zero il fumo e la brace.
- Il fiammifero entrava dal bordo del canvas tagliato di netto. Ora compare in dissolvenza mentre entra, e il fumo sfuma verso i bordi.
- Il bagliore della fiamma fatto con un gradiente radiale era un pallino luminoso. È la stessa sagoma della fiamma, più grande e sfocata con shadowBlur; la luce sulla pillola è un'ellisse larga che la scalda, non un punto.
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.
