Il pulsante da far scorrere
Pulsanti, Fisica, Transizioni
NuovaGratis
Tutti i componenti
L’interruttore del caminetto
La scheda Fireplace dell’app di una casa intelligente, e l’interruttore è il caminetto a gas: una feritoia di vetro nero nel muro. Acceso, il gas prende fuoco dietro la manopola e la fiamma le corre dietro lungo il bruciatore, poi si alza in un fuoco vero, un fluido calcolato a ogni fotogramma con i colori di Planck, che scalda la manopola e il muro. Spento, la manopola ripassa nel fuoco e le fiamme si spengono dietro di lei.
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 fireplace switch</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/wix-madefor-text@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the tile of a gas fireplace in a smart home app, and the switch is the fireplace: a slot of black glass set
into the wall. Turned on, the knob draws the flame out of the burner behind it and the gas catches all the
way along; turned off, the knob sweeps back through the fire and the flames die down behind it -->
<div class="tile" data-tile>
<span class="tile__warmth" aria-hidden="true" data-warmth></span>
<span class="tile__text">
<label class="tile__name" for="fire-switch" data-label>Fireplace</label>
<span class="tile__room" id="fire-room">Living room</span>
</span>
<button class="fire" id="fire-switch" type="button" role="switch" aria-checked="false" aria-describedby="fire-room" data-switch data-autoclic>
<span class="fire__box" aria-hidden="true"></span>
<canvas class="fire__flames" aria-hidden="true" data-flames></canvas>
<canvas class="fire__flames fire__was" aria-hidden="true" data-was></canvas>
<span class="fire__glass" aria-hidden="true"></span>
<span class="fire__knob" aria-hidden="true" data-knob>
<span class="fire__puck" data-puck>
<span class="fire__lit fire__lit--left" data-lit-left></span>
<span class="fire__lit fire__lit--right" data-lit-right></span>
</span>
</span>
</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.
21 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 del caminetto» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una scheda grigio chiaro a pillola, con la scritta Fireplace e sotto Living room, e a destra l’interruttore: una feritoia di vetro nero incassata nel muro, con un riflesso lungo sul vetro, un bruciatore sottile in basso, sotto di lui un pavimento di vetro, e una grossa manopola bianca. Accendendo, la manopola corre all’altra estremità e rimbalza un poco; appena si stacca, il gas prende fuoco dietro di lei: una riga di fiammelle esce da sotto la manopola e corre lungo il bruciatore a inseguirla, ogni getto si ravviva un attimo mentre prende, e in meno di un secondo le fiamme si alzano in un fuoco vero, giallo nel cuore, arancio ai bordi e blu alla base, che lecca, si arriccia e non sta mai fermo. Il fuoco si specchia debolmente nel pavimento di vetro, scalda d’arancio il fianco della manopola che lo guarda e getta una luce calda sul muro intorno alla feritoia. Spegnendo, la manopola ripassa nel fuoco e chiude ogni getto che supera: dietro di lei le fiamme si abbassano, si fanno piccole e rosse e si spengono, mentre l’ultima aria calda sale via e la luce sul muro si spegne. Si può anche trascinare la manopola col dito o col mouse: il fuoco brucia fin dove arriva lei. Sotto il mouse la manopola si sporge verso l’altra parte; premuta si allarga. Anche un clic sulla scritta accende e spegne.
Come funziona
Un interruttore vero
È un button con role switch e aria-checked, con la sua label for (Fireplace) e aria-describedby sulla stanza: Invio e Spazio lo accendono e lo spengono, il clic sulla scritta anche. Dentro ci sono il fondo della feritoia col bruciatore e il pavimento, il canvas del fuoco, il vetro davanti (ombra interna e riflesso) e la manopola, con due veli arancio sui fianchi che lo script accende quanto il fuoco li illumina. La scheda ha un velo caldo suo, la luce sul muro.
L’aria è un fluido
La feritoia sopra il bruciatore è una griglia di celle da un pixel e mezzo, con una velocità, una temperatura e del gas non bruciato (stable fluids di Jos Stam). A ogni fotogramma: il gas brucia e scalda l’aria, l’aria calda sale (spinta che cresce con la temperatura, frenata dall’aria ferma intorno), la vorticity confinement rimette il vortice che la griglia spiana, la velocità si trasporta lungo sé stessa e una sola proiezione di pressione, Gauss-Seidel partito dalla pressione del fotogramma prima, la rende senza divergenza. Le pareti sono chiuse ai lati e aperte in alto e in basso, da dove entrano il gas e l’aria.
Il bruciatore
Ogni colonna è un getto: il gas entra come una corrente dal bordo di sotto, con una ricchezza che tremola su un rumore suo, e una spinta in su. Un fronte corre lungo il bruciatore dietro la manopola a FRONT pixel al secondo e apre i getti che raggiunge; un getto appena acceso ha una scintilla di calore alla base e per un attimo spinge di più, così l’accensione si vede correre. La manopola chiude ogni getto che ripassa, e il gas che resta brucia via in qualche decimo di secondo.
Fiamme nitide
Il gas e il calore si trasportano con MacCormack: avanti, poi indietro, e metà della differenza rimessa, tenuta fra le quattro celle da cui viene. Il trasporto semplice spianava il fuoco in una tenda; così le lingue restano separate e finiscono a punta. Una goccia di viscosità sulla velocità toglie lo zig-zag fra una riga e l’altra che il trasporto nitido avrebbe trasformato in strisce.
I colori di Planck
All’avvio una tabella di 256 temperature: la legge di Planck integrata contro le funzioni colorimetriche CIE 1931 (nella forma a gaussiane di Wyman, Sloan e Shirley), portata in sRGB lineare. Brilla la fuliggine dove il gas brucia ed è caldo, col colore del corpo nero alla temperatura dell’aria; l’esposizione è fatta canale per canale, così il rosso si riempie per primo e il cuore del fuoco passa dall’arancio al giallo come all’occhio. Il blu è il gas che brucia ancora freddo, solo alla base. L’immagine si fa a due pixel per cella e si posa ingrandita; sotto il bruciatore la stessa immagine capovolta, tenue e arrossata, è il riflesso nel vetro.
Luce, manopola, quiete
La luce di ogni colonna del fuoco, pesata con la distanza, accende il fianco sinistro o destro della manopola e la luce sul muro, sempre col colore del corpo nero. La manopola è una massa su una molla con le pareti (SPRING, BOUNCE) e spinge piano l’aria quando corre; trascinata oltre 5 pixel prende il puntatore, e lasciata decide la direzione del lancio se è veloce, altrimenti la metà in cui si trova. Spento il fuoco e ferma la manopola, la simulazione si addormenta e non disegna più niente.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
FRONT | script.js | 520 | Quanto in fretta il gas prende fuoco lungo il bruciatore dietro la manopola, in pixel al secondo. |
GAS | script.js | 1 | Quanto gas lascia passare il bruciatore: quanto sono alte le fiamme (0,7 basse, 1,3 alte). |
HOT | script.js | 1900 | La temperatura più alta delle fiamme, in kelvin: più bassa un rosso più cupo, più alta un giallo più bianco. |
BLUE | script.js | 1 | Quanto blu si vede alla base delle fiamme, dove il gas brucia. |
SWIRL | script.js | 12 | Quanto le fiamme si arricciano e leccano: il vortice rimesso nell’aria. |
GLOW | script.js | 0.75 | Quanto il fuoco illumina la manopola e il muro intorno alla feritoia. |
MIRROR | script.js | 0.32 | Quanto le fiamme si specchiano nel pavimento di vetro sotto di loro (0, niente). |
SPRING | script.js | 170 | Quanto forte la molla tira la manopola verso la sua estremità. |
BOUNCE | script.js | 0.3 | Quanta velocità tiene la manopola rimbalzando sul fondo (0, niente rimbalzo). |
PEEK | script.js | 4 | Quanto si sporge la manopola verso l’altra parte sotto il mouse, in pixel. |
Quando usarla
Per l’interruttore di qualcosa che fa fuoco o calore: un caminetto a gas o elettrico, una stufa, il riscaldamento di una terrazza, un braciere da giardino, nell’app di una casa intelligente o di un albergo. Il fuoco dice da solo che cosa accende l’interruttore, e la luce sul muro dice che sta scaldando. In un elenco di dispositivi conviene usarlo per uno solo, accanto a interruttori normali.
Sul telefono
La scheda è larga 380 pixel e si stringe fino allo schermo (358 a 390 pixel), l’interruttore resta 184 per 56. Il tocco accende e spegne; il dito trascinato di lato porta la manopola e il fuoco brucia fin dove arriva, 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 fuoco costa un paio di millisecondi a fotogramma mentre brucia, e niente quando è spento.
Con il movimento ridotto
Il fuoco è un’immagine ferma, calcolata a pezzi mentre la pagina si apre: nessuna fiamma cambia forma. Accendendo si scalda dove sta, dal rosso scuro al giallo, in poco più di un terzo di secondo, e spegnendo si raffredda allo stesso modo, come un fuoco che si abbassa; la manopola svanisce da una parte e ricompare dall’altra, e la luce sulla manopola e sul muro va e viene in dissolvenza. Premuta non si allarga e non si trascina; il clic e la tastiera funzionano come sempre.
Trappole
- Col fondo della feritoia chiuso il calore restava steso sul bruciatore e non saliva mai: uno strato caldo largo quanto la griglia sta in equilibrio con la pressione, perché nessuna aria può entrare da sotto. Il fondo è aperto: da lì entrano il gas e l’aria, e le fiamme salgono.
- Senza attrito l’aria calda accelerava all’infinito e il gas arrivava in cima senza bruciare, una tenda blu: ora l’aria ferma intorno frena le fiamme, il gas brucia in pochi pixel e il calore si raffredda in fretta quando è molto caldo.
- Facendo brillare l’aria calda il fuoco era una tenda arancio sfocata, e col trasporto semplice le lingue si fondevano: brilla la fuliggine dove il gas brucia, e gas e calore si trasportano con MacCormack, tenuto fra le celle da cui viene.
- Il gas messo nella riga di fondo una volta a fotogramma usciva a strisce orizzontali: il trasporto nitido teneva separato lo sbuffo di ogni fotogramma. Ora entra come una corrente dal bordo di sotto, e una goccia di viscosità toglie lo zig-zag della velocità fra una riga e l’altra.
- Il colore del corpo nero normalizzato e moltiplicato per la luminosità non arrivava mai al giallo: le fiamme erano marroni. L’esposizione canale per canale fa riempire prima il rosso e poi il verde, come all’occhio.
- La manopola trattata come un solido che cancella il fuoco lasciava un taglio verticale nelle fiamme quando ci passava: ora spinge soltanto l’aria, piano, e il fuoco dietro di lei resta nascosto. Il riflesso giallo nel vetro scuro diventava verde oliva: è arrossato con un velo source-atop. Nel movimento ridotto, la dissolvenza dell’immagine faceva lo stesso; ora il fuoco si raffredda dove sta.
- La simulazione non si addormentava mai: i getti sotto la manopola spenta contavano come aperti. Contano solo quelli dove il bruciatore c’è davvero. Due proiezioni partite da zero costavano 3,7 millisecondi a fotogramma: una sola, che parte dalla pressione di prima, ne costa circa 2,4 col disegno.
Librerie
GSAP 3.15.0, Wix Madefor Text (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 14 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 6 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.
