Il pulsante a strati
Pulsanti, Hover, Fisica
Gratis
Tutti i componenti
Il pulsante del bastoncino luminoso
Il pulsante Activate wristband dell'app di un festival è un bastoncino luminoso: dentro il tubo di plastica smerigliata una fiala di vetro sottile sta sul fondo e scivola quando il puntatore lo inclina. Premuto, il bastoncino si piega e la fiala si spezza; lasciato, scatta dritto e viene scosso. I due liquidi fanno luce solo dove si incontrano: la luce nasce dalla crepa, corre lungo la fiala rotta e sale in riccioli quasi bianchi mentre le scosse li rimescolano, poi si allarga verso le due estremità finché tutto il tubo brilla: Wristband active.
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 glow stick button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/unbounded@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the glow stick button: the Activate wristband button of a festival app is a glow stick. Inside the frosted
tube a thin glass vial lies loose in the liquid. Pressed, the stick bends and the vial snaps; then it is
shaken, the two liquids meet and light up where they mix, in curls that run along the tube, until the whole
stick glows: Wristband active -->
<div class="stick" data-stick>
<div class="stick__rig" data-rig>
<canvas class="stick__halo" aria-hidden="true" data-halo></canvas>
<button class="stick__btn" type="button" data-btn data-autoclic>
<canvas class="stick__tube" aria-hidden="true" data-tube></canvas>
<span class="stick__window" data-window>
<span class="stick__label" data-label>
<svg class="stick__tick" viewBox="0 0 16 16" aria-hidden="true" data-tick>
<path d="M3.2 8.6 6.5 11.7 12.9 4.6" data-tick-path/>
</svg>
<span class="stick__words" data-words>Activate wristband</span>
</span>
</span>
</button>
</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.
16 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 del bastoncino luminoso» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero c'è un bastoncino luminoso spento, alto 56 pixel e largo 304: un tubo di plastica smerigliata color salvia chiaro, tondo, con un riflesso lungo sul dorso, le due estremità di plastica piena un po' più lattiginose e, stampato sopra in un sans largo e scuro, Activate wristband. Sul fondo del tubo, quasi da un capo all'altro, è sdraiata una fiala di vetro sottile un po' storta, col suo filo di luce sul bordo alto e una bolla d'aria allungata a un'estremità. Col puntatore sopra la plastica prende un po' più di luce e il bastoncino si inclina di meno di un grado dalla parte del puntatore: la fiala, che dentro è libera, scivola verso il lato basso e rimbalza piano contro la fine del liquido. Tenendo premuto il bastoncino si piega, il centro in su e le estremità in giù, e le lettere seguono la curva, ognuna col suo piccolo giro. Al clic la fiala si spezza in un punto vicino al centro, coi due mozziconi dalle estremità rotte che si alzano e ricadono, qualche scheggia, e il bastoncino scatta dritto, va un poco oltre e si assesta; la scritta sale via e da sotto arriva Activating…. Dalla crepa nasce un punto di luce: il liquido della fiala spruzza fuori in un piccolo fungo, e la luce corre in un attimo lungo tutta la fiala rotta. Poi il bastoncino viene scosso tre volte, a destra e a sinistra, sempre meno: il liquido resta indietro, gira in grandi rulli e in vortici, e i due liquidi si stirano in riccioli che si accendono dove si toccano, quasi bianchi dove si incontrano di più e verde lime intorno; a ogni scossa la fiala si rompe ancora in un pezzo e i pezzi traballano sul fondo. Finite le scosse la luce si allarga dalla crepa verso le due estremità, prima in basso e poi in alto, finché tutto il tubo è acceso: brilla un attimo più forte, una luce verde si spande sulla pagina tutto intorno e la scritta diventa Wristband active con una spunta che si disegna. Dopo un momento la luce si spegne piano, i pezzi di vetro tornano una fiala intera al suo posto e il bastoncino è di nuovo pronto; appena la scritta torna Activate wristband si può già ripremere, e l'ultima luce si spegne mentre il bastoncino nuovo si piega. Al telefono il dito fa la stessa cosa: premuto piega, alzato spezza. Con la tastiera il fuoco mostra un anello lime, Invio lo attiva, e la barra spaziatrice tenuta giù lo piega come una mano.
Come funziona
Due liquidi su una griglia
Il liquido nel tubo è una griglia di 192 per 30 celle con due concentrazioni: A, l'attivatore che sta nella fiala, e B, la tinta che riempie il tubo. Finché la fiala è intera sono separati; quando si spezza, le celle dentro la fiala diventano A = 1 e B = 0, tutte le altre il contrario. La luce di una cella è il prodotto A × B, cioè quanto in fretta va la reazione, diviso per il valore che avrà a liquido tutto mescolato: così dove i due si incontrano più forte la luce passa 1 e diventa quasi bianca, e alla fine tutto il tubo sta a 1, verde lime.
Un flusso che non comprime
Il liquido si muove con una funzione di corrente ψ, e la velocità è u = ∂ψ/∂y, v = −∂ψ/∂x: così non si comprime mai e, con ψ moltiplicata per sin(πy) e smorzata alle due estremità, non attraversa le pareti. ψ è la somma di tre cose: lo sciabordio (la parte alta e quella bassa del liquido vanno in versi opposti mentre il tubo si muove), cinque rulli lungo il tubo che girano con la scossa, e vortici gaussiani che nascono vicino alle estremità dei pezzi di vetro e si spengono in mezzo secondo. A ogni inversione della scossa i rulli si spostano a caso lungo il tubo: un flusso a celle che lampeggiano, che mescola in modo caotico invece di tornare indietro.
Trasporto e sfumatura
A ogni fotogramma ogni cella prende quello che c'era a monte di lei (avvezione semi-lagrangiana con interpolazione bilineare), poi i due liquidi si sfumano un poco fra celle vicine. La luce è scoperta a partire dalla crepa, con un fronte che corre lungo la fiala in poco più di un decimo di secondo. Verso la fine del tempo MIX ogni cella si avvicina al valore mescolato, e comincia tanto più tardi quanto più è lontana dalla crepa (e in alto un po' dopo che in basso): la luce si allarga verso le estremità e il tubo è tutto acceso proprio allo scadere.
Il vetro
A riposo la fiala è libera sul fondo: la sua accelerazione è proporzionale al seno dell'inclinazione del bastoncino, con l'attrito del liquido e un rimbalzo contro la fine del liquido. Al clic si spezza vicino al centro con un bordo a zigzag uguale sui due pezzi, e una coppia di vortici opposti spinge in su il liquido fra loro, il piccolo fungo. A ogni inversione della scossa il pezzo più lungo si rompe ancora; ogni pezzo scivola per l'inerzia del tubo, non attraversa i vicini e si posa un po' storto su una molla. Le schegge seguono il flusso e affondano.
La piega
Tutto il bastoncino è disegnato dritto su un canvas a parte (la plastica, il liquido, il vetro, l'ombra del tondo e i riflessi), poi copiato su quello visibile una colonna di pixel alla volta, ognuna spostata in giù di bend × (u² − 1/3), dove u va da −1 a 1 lungo il tubo: il centro sale e le estremità scendono. Ogni lettera della scritta è una casella a sé, spostata dalla stessa parabola e girata della sua pendenza.
Le parole e la luce sulla pagina
La scritta cambia rotolando dentro una finestra con i bordi sfumati (una maschera): la riga vecchia sale e se ne va mentre la nuova sale al suo posto, sempre a una riga di distanza, così non si sovrappongono mai e una scritta c'è sempre. La luce sulla pagina è un secondo canvas a metà risoluzione, sfocato col CSS: ci si disegna solo la luce, con un bordo vuoto perché sfumi senza spigoli, e la luce debole conta meno (alla potenza 2,2), così mentre è acceso solo un ricciolo non resta un alone sporco.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
BUSY | script.js | Activating… | La scritta mentre il bastoncino viene scosso e la luce si allarga. |
DONE | script.js | Wristband active | La scritta quando tutto il bastoncino brilla. Se è troppo lunga per il tubo, il carattere si rimpicciolisce. |
BEND | script.js | 6 | Quanto si piega il bastoncino prima che la fiala si spezzi, in pixel: 0 non si piega. |
SHAKES | script.js | 3 | Quante volte viene scosso per mescolare i due liquidi: 0, la luce nasce dalla crepa e si allarga da sola. |
MIX | script.js | 1.9 | I secondi dalla crepa al bastoncino tutto acceso: quanto dura l'attivazione. |
SWIRL | script.js | 1 | Quanto si arricciano i liquidi mentre si mescolano: 0 sfumano soltanto l'uno nell'altro. |
HOLD | script.js | 1.8 | I secondi in cui il bastoncino resta acceso, con Wristband active, prima di tornare pronto. |
HALO | script.js | 1 | Quanta luce si spande sulla pagina intorno al bastoncino: 0 niente. |
Quando usarla
Per l'azione che accende qualcosa e lo rende valido: attivare un braccialetto, una tessera, un biglietto, una eSIM, una licenza, una carta appena arrivata. Il bastoncino che si piega e poi si accende racconta l'attesa breve di un'attivazione, quindi sta bene dove l'azione dura davvero un paio di secondi. È un pulsante da far vedere, uno per pagina, nelle app di festival, concerti, serate, sport all'aperto e viaggi.
Sul telefono
Il bastoncino è alto 56 pixel e largo 304, o lo schermo meno 32. Senza puntatore non si inclina e la fiala resta al suo posto; il dito fa tutto il resto: premuto piega il bastoncino, alzato spezza la fiala. Se il dito scivola via per scorrere la pagina, il bastoncino torna dritto senza spezzarsi. La luce sulla pagina esce dai lati ma non fa scorrere la pagina.
Con il movimento ridotto
Niente piega, niente scosse, niente riccioli e il bastoncino non si inclina. Al clic la fiala intera sfuma nei due pezzi spezzati e la luce si accende in dissolvenza, uguale in tutto il tubo, nel tempo di MIX; poi Wristband active con la spunta già disegnata, e alla fine la luce si spegne e la fiala torna intera, sempre in dissolvenza. Le scritte cambiano sfumando una nell'altra al loro posto.
Trappole
- La scritta cambiava sparendo e poi ricomparendo: per un fotogramma o due il bastoncino restava senza parole, e con la dissolvenza incrociata le due scritte si sovrapponevano illeggibili. Ora cambia rotolando dentro una finestra con i bordi sfumati, la vecchia che sale e la nuova che arriva da sotto sempre a una riga di distanza; e la nuova viene messa sotto subito, prima del fotogramma dopo, se no per un fotogramma stava sopra la vecchia.
- La luce restava ferma sul fondo vicino alla fiala e poi tutto il tubo si accendeva di colpo: il flusso, moltiplicato per sin(πy) per non attraversare le pareti, è debolissimo proprio sul fondo dove sta la fiala. Ora ci sono rulli che sollevano il liquido e cambiano posto a ogni scossa, vortici vicino ai pezzi di vetro, e la parte finale del mescolamento parte dalla crepa e va verso le estremità, invece che dappertutto insieme.
- La fiala corta al centro, sotto la scritta, sembrava una barra di avanzamento, e dopo la crepa i pezzi in fila sembravano una riga tratteggiata. Ora la fiala è lunga quasi quanto il liquido, sottile, un po' storta e con la sua bolla d'aria; i pezzi si posano storti e a luce accesa il vetro quasi sparisce, come nel liquido vero.
- La luce sulla pagina aveva gli spigoli: la piccola immagine della luce era piena fino al bordo e, allargata, faceva un rettangolo. Ora ha un bordo vuoto di quattro celle. Mentre era acceso solo il fondo, poi, la luce debole spandeva sotto il bastoncino un alone verde oliva che sembrava sporco: ora la luce conta per la pagina alla potenza 2,2.
- Con HALO sopra 1 l'alone più largo toccava i bordi del suo canvas e tornava rettangolare: sopra 1 la luce diventa più forte, non più larga.
- La piega fatta col CSS non era possibile (una trasformazione non curva un elemento) e un filtro SVG di spostamento sugli elementi HTML è incerto in Safari: il bastoncino si disegna dritto e si copia una colonna di pixel alla volta; le lettere, che sono HTML, seguono la stessa parabola una per una.
- Mentre la luce si spegneva il pulsante diceva già Activate wristband ma non rispondeva per quasi un secondo; e ripartendo subito, liquido e vetro tornavano nuovi in un fotogramma e la luce rimasta spariva di colpo. Ora un clic durante lo spegnimento fa spegnere l'ultima luce in un decimo di secondo mentre il bastoncino nuovo si piega, e solo allora svuota il liquido vecchio.
- L'inclinazione verso il puntatore fatta con gsap.quickTo, uccisa da killTweensOf quando partono le scosse, dava l'avviso «rotation not eligible for reset» al passaggio successivo del mouse: ora è un tween normale con overwrite: 'auto'.
Librerie
GSAP 3.15.0, Unbounded (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 15 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.
