Il pulsante da far scorrere
Pulsanti, Fisica, Transizioni
NuovaGratis
Tutti i componenti
L’interruttore della lampada di lava
La luce notturna nell’app di una casa intelligente, e l’interruttore è una piccola lampada di lava sdraiata: un vetro pieno di liquido scuro con dentro gocce di cera, e il pomello è la goccia più grande. Acceso, il pomello scivola verso la base e si porta dietro un po’ di cera, la lampadina accende il vetro e la cera si scalda dal suo lato, da rosso scuro a magenta e arancio; poi sale, si stacca, gira lungo il vetro, si raffredda e ricade, come in una lampada vera. Spento, tutto si raffredda e torna giù.
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 lava lamp switch</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the night light of a smart home app, and the switch is a little lava lamp lying on its side: a tapered glass
capsule of violet liquid with drops of wax in it, a chrome cap at the left and the base with the heater at the
right. Turned on, the big drop that is the knob slides over to the heater dragging the wax with it, the bulb
lights the glass and the wax warms up, rises, drifts and comes back as in a real lamp; off, it cools and sinks
back to the cold end -->
<div class="tile" data-tile>
<span class="tile__glow" aria-hidden="true" data-glow></span>
<span class="tile__text">
<label class="tile__name" for="lava-switch">Night light</label>
<span class="tile__room" id="lava-room">Nursery</span>
</span>
<button class="lamp" id="lava-switch" type="button" role="switch" aria-checked="false" aria-describedby="lava-room" data-switch data-autoclic>
<span class="lamp__halo" aria-hidden="true" data-halo></span>
<canvas class="lamp__wax" aria-hidden="true" data-wax></canvas>
<canvas class="lamp__wax lamp__wax--on" aria-hidden="true" data-wax-on></canvas>
<svg class="lamp__frame" viewBox="0 0 184 56" aria-hidden="true" focusable="false" data-frame></svg>
</button>
</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.
29 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 «L’interruttore della lampada di lava» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero una scheda scura arrotondata con la scritta Night light e sotto, in grigio, Nursery; a destra l’interruttore, alto 56 pixel: una lampada di lava sdraiata. A sinistra un tappo di cromo a cono, a destra la base di cromo più larga con tre feritoie, in mezzo il vetro, appena più largo verso la base, con un riflesso lungo il bordo alto e uno più debole in basso. Dentro c’è un liquido quasi nero e, da spento, la cera è fredda: rosso scuro, opaca, ferma in fondo verso il tappo, il pomello (una goccia grande) e accanto un grumo e due gocce piccole. Il nome è grigio. Col mouse sopra, la lampadina si scalda appena: la base prende un riflesso arancio, il fondo del vetro si accende un poco, la cera si muove pigra e il pomello si sporge di qualche pixel verso destra. Accendendo, il pomello corre verso la base con un piccolo rimbalzo e si allunga mentre va; la cera più vicina gli va dietro e resta indietro, le gocce si allungano e si staccano. La lampadina si accende: le feritoie e il bordo della base diventano arancio, il vetro si illumina dalla base verso sinistra e il liquido si scalda in viola; intorno alla lampada si accende un alone caldo e la scheda prende la sua luce, il nome diventa bianco. La cera vicino alla base si scalda, dal rosso scuro al magenta, poi all’arancio con il cuore quasi giallo; scaldata è più leggera del liquido, quindi si stacca e sale, va verso sinistra lungo il vetro in alto, si raffredda, ridiventa magenta e ricade, e lungo il fondo torna verso la base: il giro lento di una lampada vera, che non si ripete mai uguale. Le gocce che si toccano si fondono in una sola forma e si separano di nuovo con un filo che si assottiglia. Spegnendo, il pomello torna al tappo, la lampadina si spegne, il liquido si raffredda in qualche secondo e la cera, fredda e pesante, ricade in fondo e si ferma. Si può anche trascinare il pomello col dito o col mouse, e un clic sul nome accende e spegne.
Come funziona
Un interruttore vero
È un button con role switch e aria-checked, con la sua label for (Night light) e aria-describedby sulla stanza: Invio e Spazio accendono e spengono, la freccia a destra accende e quella a sinistra spegne, il clic sul nome anche. Dentro ci sono l’alone, il canvas del vetro (liquido e cera) e sopra un SVG disegnato una volta dallo script, con i riflessi del vetro, il tappo e la base di cromo e le feritoie, che si accendono con l’opacità.
Ogni goccia è una massa calda
Il pomello e le gocce sono corpi con posizione, velocità, raggio e temperatura. Il calore del liquido in un punto viene dalla lampadina (cala come e^(−distanza/30) dalla base, più forte in basso) più il tepore del liquido stesso; ogni goccia lo prende con una velocità che va come 1/r, quindi le piccole si scaldano prima. Il suo peso nel liquido è GRAV·(0,4 − T): fredda scende, calda sale. Il liquido la frena come nella legge di Stokes (meno le grandi) e se la porta dietro; il pomello in corsa trascina un poco il liquido intorno. Quattro passi a fotogramma su gsap.ticker, col passo limitato a 1/30 di secondo.
Il liquido gira
Scaldandosi, il liquido gira in un solo rullo di convezione, da una funzione di corrente sin(πX)·sin(πY) che respira piano: sale alla base, va a sinistra in alto, scende al tappo e torna in basso. La cera calda sale, va a sinistra, si raffredda dove la lampadina non arriva e ricade: il giro della lampada nasce da solo dal calore e dal peso, non è una traiettoria scritta.
Cera appiccicosa
Le gocce vicine si attirano, di più quanto più sono fredde (la cera calda è più liquida e si stacca), e si scambiano parte della velocità, come un liquido denso. Un vincolo di posizione impedisce che entrino una nell’altra oltre una pelle: fredde si stringono in un grumo, calde restano tonde. Il pomello attira più lontano, ma le gocce gli passano attraverso: correndo non spinge la cera davanti a sé, la attraversa e se la porta dietro.
Metaball su canvas
A ogni fotogramma ogni goccia aggiunge al campo una gobba (1 − d²/R²)³ con R = GOO·r, il pomello un’ellisse che si allarga premuta e si allunga in corsa; un secondo campo pesa la temperatura. La cera è dove il campo supera la soglia di una goccia sola al suo raggio; il bordo si mette a una frazione di pixel dividendo per la pendenza del campo, quindi è nitido senza filtri. La stessa pendenza dà la normale di una cupola: luce dall’alto, luce arancio dalla base sul fianco, un riflesso, e la cera spessa che fa luce da dentro. Il colore viene da una tabella di 256 temperature fra i quattro colori di :root.
Luce e quiete
Il calore della lampadina e il tepore del liquido salgono e scendono con due tempi diversi; dal primo dipendono l’alone, la luce sulla scheda, le feritoie, il bordo della base e il nome, scritti solo quando cambiano. Prima di mostrarsi la lampada è calcolata per qualche secondo, così la cera è già dove starebbe. A lampada spenta e ferma il ciclo smette di calcolare e di disegnare finché non la si tocca.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
HEAT | script.js | 1 | Quanto scalda la lampadina da accesa: quanto la cera sale e si muove. |
PREHEAT | script.js | 0.3 | Quanto la lampadina scalda il vetro col mouse sopra, come parte di HEAT (0, niente). |
WAX | script.js | 9 | Quante gocce di cera galleggiano nella lampada, oltre al pomello. |
VISCOSITY | script.js | 1 | Quanto è denso il liquido: più alto, la cera va più piano e si ferma prima. |
STICK | script.js | 1 | Quanto le gocce di cera si attirano fra loro e verso il pomello. |
GOO | script.js | 2 | Fin dove arriva il campo di ogni goccia, nei suoi raggi: più alto, le gocce si uniscono prima e i fili sono più lunghi. |
FLOW | script.js | 34 | Quanto in fretta il liquido caldo gira nel vetro, in pixel al secondo. |
WARMUP | script.js | 1.4 | I secondi che il liquido impiega a scaldarsi (a raffreddarsi un po’ di più). |
SPRING | script.js | 110 | Quanto forte il pomello è tirato verso la sua estremità. |
PEEK | script.js | 4 | Di quanti pixel il pomello si sporge verso l’altra estremità col mouse sopra. |
Quando usarla
Per l’interruttore di una luce d’atmosfera: una luce notturna, una lampada da comodino, le luci di un salotto o di un locale nell’app di una casa intelligente, una modalità serale o di concentrazione in un’app di musica o di meditazione. La lampada dice da sola acceso e spento anche senza colore (la cera in fondo o in giro), e da accesa non sta mai ferma, quindi conviene usarla per un solo interruttore, accanto a interruttori normali.
Sul telefono
La scheda è larga 380 pixel e si stringe fino allo schermo (358 a 390 pixel), la lampada resta 184 per 56. Il tocco accende e spegne; il dito trascinato di lato porta il pomello e la cera, mentre in su e in giù la pagina scorre ancora (touch-action: pan-y). Niente sporgenza sotto il mouse, che col dito non c’è. Il campo si calcola alla densità dello schermo, al massimo 2: circa 25 mila pixel a fotogramma.
Con il movimento ridotto
Niente movimento: la lampada fredda e quella accesa sono calcolate una volta mentre la pagina si apre e disegnate su due canvas, e accendendo la seconda compare in dissolvenza sopra la prima in poco meno di mezzo secondo (spegnendo sparisce); l’alone, la luce sulla scheda, le feritoie e il nome cambiano insieme in dissolvenza. Nessuna goccia si sposta, il pomello non si trascina; il clic, il tocco e la tastiera funzionano come sempre.
Trappole
- Il pomello che urtava la cera la spingeva tutta davanti a sé: la pozza fredda stava proprio sulla sua strada e in un vetro così basso le gocce non hanno spazio per scansarsi, così accendendo arrivava alla base un unico grumo. Ora fra il pomello e le gocce la pelle è molto più sottile e il pomello non viene spostato dal vincolo: attraversa la cera, che si richiude dietro di lui, e se ne porta dietro solo un poco con la sua attrazione.
- Anche la scia del pomello era troppo forte: il liquido trascinato a 400 pixel al secondo portava via tutte le gocce in un decimo di secondo. Ora la scia vale il 14 per cento della sua velocità in un raggio di circa 15 pixel e il liquido frena di più (Stokes), così la cera resta indietro e arriva dopo.
- Accesa, la cera calda si ammucchiava nell’angolo in alto vicino alla base: lì il rullo di convezione, sin(πX), è quasi fermo, e l’attrazione fra le gocce le teneva insieme. Il flusso lungo il vetro tiene il 60 per cento della sua forza anche alle estremità e la cera calda si attacca molto meno di quella fredda: ora si stacca e fa il giro.
- Da fredde le gocce stavano in fila lungo il fondo come un bruco, con un riflesso su ogni gobba. La pelle ora dipende dalla temperatura: la cera fredda si stringe in un grumo, quella calda tiene le gocce tonde.
- Il bordo delle metaball fatto con una soglia netta scalettava, e con uno smoothstep fisso era sfocato sulle gocce grandi e seghettato sulle piccole. Il bordo si calcola come (campo − soglia) diviso per la pendenza del campo: è la distanza dal bordo in pixel, e ogni goccia ha un pixel di sfumatura esatto.
Librerie
GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 13 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 8 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.
