Il pulsante a strati
Pulsanti, Hover, Fisica
Gratis
Tutti i componenti
La barra termocromica
La testata di un bagno di vapore stampata su un foglio di cristalli liquidi termocromici, quelli degli anelli dell'umore: freddo è nero, scaldato diventa rosso, oro, verde, blu e viola. Il puntatore è un polpastrello caldo che lascia scie che si raffreddano; sotto la voce corrente una resistenza tiene caldo il foglio, e scegliendo un'altra voce scivola là come un ferro da stiro, con una coda arcobaleno.
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 thermochromic bar</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/familjen-grotesk@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the top bar of a bathhouse's site, printed on a sheet of black thermochromic film: the pointer warms it like a
fingertip, and a heater under the current link keeps the film hot round the word -->
<header class="bar" data-bar>
<!-- the film: a heat simulation painted through the colours of the liquid crystal -->
<canvas class="bar__film" aria-hidden="true" data-film></canvas>
<canvas class="bar__film bar__film--veil" aria-hidden="true" data-veil></canvas>
<span class="bar__gloss" aria-hidden="true"></span>
<a class="brand" href="#" aria-label="Solvarm, home" data-brand>
<svg class="brand__mark" viewBox="0 0 28 28" aria-hidden="true">
<path class="brand__steam" d="M9.5 13.5c-1.6-1.6 1.6-3.2 0-4.8s1.6-3.2 0-4.8"/>
<path class="brand__steam" d="M14 13.5c-1.6-1.6 1.6-3.2 0-4.8s1.6-3.2 0-4.8"/>
<path class="brand__steam" d="M18.5 13.5c-1.6-1.6 1.6-3.2 0-4.8s1.6-3.2 0-4.8"/>
<path d="M4.5 23.5c1.2-3.6 4.6-6 9.5-6s8.3 2.4 9.5 6z"/>
</svg>
<span class="brand__name">Solvarm</span>
</a>
<nav class="bar__strip" aria-label="Main" data-strip>
<ul class="bar__list" data-list>
<li><a class="bar__link" href="#" data-link data-autoclic><span>Saunas</span></a></li>
<li><a class="bar__link" href="#" data-link data-autoclic><span>Cold baths</span></a></li>
<li><a class="bar__link" href="#" aria-current="page" data-link><span>Treatments</span></a></li>
<li><a class="bar__link" href="#" data-link data-autoclic><span>Memberships</span></a></li>
<li><a class="bar__link" href="#" data-link data-autoclic><span>Journal</span></a></li>
</ul>
</nav>
<a class="bar__cta" href="#" aria-label="Book a visit" data-cta><span>Book<span class="bar__more"> a visit</span></span></a>
</header>
</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 «La barra termocromica» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una barra nera lucida, alta 60 pixel e con gli angoli arrotondati, come un foglio di plastica laminata: a sinistra il marchio Solvarm, tre fili di vapore sopra una pietra, al centro cinque voci in grigio chiaro (Saunas, Cold baths, Treatments, Memberships, Journal), a destra il pulsante crema Book a visit. Sotto la voce corrente il foglio è caldo: la parola sta in una macchia viola e blu, circondata da anelli verdi, oro e rossi che sfumano nel nero, come un dito appoggiato su un termometro a cristalli. All'arrivo la macchia sale dal nero passando per tutti i colori. Col mouse sulla barra il puntatore scalda il foglio come un polpastrello: dove si ferma fiorisce un cerchio che dal rosso arriva al verde, dove passa resta una scia rossa e oro che si raffredda in un paio di secondi; il dito è meno caldo della voce corrente, che resta l'unica viola. La voce puntata si schiarisce e si scalda appena intorno, e anche il pulsante si scalda tutt'intorno. Al clic, nel punto premuto si apre un piccolo fiore di calore, e la resistenza della voce corrente scivola verso quella scelta: più bassa e un po' più fredda per strada, lascia una coda che va dal blu al verde, all'oro e al rosso, mentre la macchia vecchia si raffredda ripassando i colori al contrario e quella nuova si allarga in anelli. Con Tab ogni voce prende un contorno verde acqua e si scalda, Invio la sceglie. Passando sul marchio il vapore sale di nuovo, un filo dopo l'altro.
Come funziona
Il foglio è una griglia di calore
Sotto la barra c'è una griglia di celle, una ogni 4 pixel, col calore di ognuna in un Float32Array. Centottanta volte al secondo, qualunque sia la frequenza dello schermo (il passo di tempo è limitato a 1/30 di secondo), ogni cella va verso la media delle quattro vicine (T += SPREAD · (somma delle vicine − 4T)), perde COOL/180 del suo calore e prende quello del polpastrello. È l'equazione del calore risolta alle differenze finite; ai bordi la vicina che manca è la cella stessa, così dal bordo il calore non esce.
I colori del cristallo
Una tabella di 512 colori, fatta coi colori di :root, va dal freddo al più caldo: nero fino a 0,17, poi un rosso scuro che sale dal nero, rosso a 0,3, oro a 0,45, verde a 0,55, verde acqua, blu, viola a 0,86 e di nuovo nero oltre 1,1, come il cristallo vero passato il punto di schiarimento. La tela è grande la metà della barra: ogni suo pixel legge il calore fra le quattro celle più vicine, dove è caldo si sposta un poco con un rumore fermo (così i bordi dei colori vanno un po' a zig zag) e prende il colore dalla tabella; putImageData lo dipinge e la pagina lo stira.
La resistenza sotto la voce
Sotto le lettere della voce corrente c'è una scatola arrotondata dal bordo morbido (la distanza da un rettangolo arrotondato, sfumata su 5 pixel) che a ogni passo tira le celle verso HOT. Gli anelli intorno non sono disegnati: li fanno la diffusione e il raffreddamento. La scatola è misurata nelle coordinate della striscia (offsetLeft, che non sente lo scorrimento), così al telefono il calore va con la parola, e si spegne vicino ai bordi della striscia.
La scivolata e la pressione
Scegliendo una voce, GSAP porta il posto e la larghezza della resistenza su quella nuova in SLIDE secondi con power3.inOut, e per strada la abbassa al 55 per cento e la indebolisce all'80: le celle che attraversa si scaldano a metà, e dietro resta una coda arcobaleno che si raffredda. La pressione tira il foglio verso il calore del dito con una campana gaussiana larga 10 pixel.
Il polpastrello
A ogni fotogramma il calore del puntatore si posa lungo la strada fatta dal fotogramma prima, una campana ogni 4 pixel. Il totale cresce con la radice della lunghezza: una passata veloce lascia una scia più tenue di una lenta, ma la lascia. Ogni cella prende calore in proporzione alla differenza fra il dito e lei, come fa la pelle: il dito non scalda mai oltre sé stesso, e il suo calore (0,72) sta sotto quello della resistenza, così dove si ferma il foglio arriva al verde e sulla voce corrente non la raffredda. Al telefono il dito arriva con touchmove, che continua anche mentre la striscia scorre.
Fermo quando è fermo
A ogni fotogramma il foglio si confronta con quello di prima: quando nessuna cella cambia più di 0,0012 per dodici fotogrammi di fila, e niente si muove, il ciclo si toglie dal ticker di GSAP e la tela resta com'è; un gesto lo risveglia. Un passo costa 0,03 millisecondi e una pittura 0,2. Col movimento ridotto il foglio assestato si calcola in un colpo (900 passi) e il cambio di voce è una dissolvenza su una seconda tela.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
HOT | script.js | 0.9 | Quanto è caldo il foglio sotto la voce corrente: 0,3 rosso, 0,45 oro, 0,55 verde, 0,75 blu, 0,9 viola, oltre 1 torna scuro. |
WARM | script.js | 0.4 | Quanto si scalda una voce puntata o raggiunta con Tab, e il pulsante. |
FINGER | script.js | 20 | Quanto calore passa dal puntatore al foglio: più alto, scie più accese e anelli più grandi. |
SPREAD | script.js | 0.07 | Quanto in fretta il calore si allarga nel foglio: più alto, anelli più larghi e morbidi. |
COOL | script.js | 0.95 | Quanto in fretta il foglio torna nero: più alto, scie più corte. |
SLIDE | script.js | 0.7 | I secondi che la resistenza impiega a scivolare sulla voce scelta. |
PRESS | script.js | 1 | Quanto calore lascia un clic o un tocco nel punto premuto (0, niente). |
Quando usarla
Per la testata di chi vende calore o benessere: saune, bagni di vapore, terme, centri benessere, torrefazioni, laboratori di ceramica col forno, chi fa stufe o abiti termici. Sta bene anche su un sito di tecnologia scuro (sensori, termocamere, hardware) che vuole una barra che si ricorda. È una barra da mostrare: una per sito, in cima, su una pagina chiara o scura.
Sul telefono
La barra è alta 56 pixel e larga quanto lo schermo meno 32; resta il segno del marchio senza il nome e il pulsante dice solo Book (il nome per chi legge lo schermo resta Book a visit). Le voci scorrono di lato dentro la barra, che sfuma dal lato dove ce ne sono altre nascoste; la voce scelta scivola al centro e il calore la segue. Il dito scalda il foglio mentre tocca e mentre trascina la striscia, e un tocco preme e sceglie insieme.
Con il movimento ridotto
Niente polpastrello, niente scie e niente scivolata: il foglio compare già assestato intorno alla voce corrente. Scegliendo un'altra voce, il foglio vecchio sparisce in una dissolvenza sopra quello nuovo, già caldo intorno alla parola scelta; al telefono, scorrendo la striscia, il calore segue la parola senza ritardo. Puntare una voce la schiarisce soltanto, il vapore del marchio non sale e le pressioni non rimpiccioliscono niente.
Trappole
- La resistenza alta quanto la voce (40 pixel in una barra di 60) faceva anelli tagliati sopra e sotto, una colonna colorata più che un dito sul cristallo: ora sta sulle lettere, e una diffusione più lenta tiene gli anelli dentro la barra.
- Dopo un clic il mouse resta sulla voce, e il suo calore sommato a quello della resistenza superava il punto di schiarimento: sotto la parola si apriva un buco nero. Ora il dito scalda in proporzione alla differenza fra lui e il foglio, come la pelle, e la pressione tira verso quel calore invece di aggiungersi: non si va mai oltre.
- Col dito caldo quanto la resistenza, il puntatore fermo lasciava un disco viola con l'anello arcobaleno: somigliava a un pallino luminoso sotto il cursore e faceva concorrenza alla voce corrente. Ora il dito è più freddo della resistenza e arriva al verde: il viola è solo della pagina in cui si è.
- Col calore del puntatore diviso per la lunghezza della strada, una passata normale del mouse non lasciava quasi niente: il totale cresce con la radice della lunghezza, e la scia si vede anche andando svelti.
- Per capire se il foglio è fermo non basta guardare la diffusione: all'equilibrio la resistenza rimette a ogni passo il calore che la diffusione le porta via. Si confronta il foglio con quello del fotogramma prima, e il ciclo dorme dopo dodici fotogrammi calmi.
- Scegliendo una voce durante l'entrata, killTweensOf sulla resistenza fermava anche il suo riscaldamento, che restava spento: ora si fermano solo il posto, la larghezza, la forza e l'altezza.
- Col movimento ridotto il ciclo non gira, e al telefono, scorrendo la striscia, la macchia restava ferma mentre la parola se ne andava: a ogni fotogramma di scorrimento il foglio si riassesta partendo da com'è, in 160 passi.
- Al telefono gli eventi pointer si fermano (pointercancel) appena il dito comincia a far scorrere la striscia: il dito si segue con touchmove, che continua.
Librerie
GSAP 3.15.0, Familjen Grotesk (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 10 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 5 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.
