Il pulsante di vetro liquido
Pulsanti, WebGL, Hover, Fisica
NuovaGratis
Tutti i componenti
Il pulsante con l’aurora
Lo Start your free trial di un’app per andare a caccia dell’aurora boreale: la pillola è una finestrella su una notte artica, con un crinale di neve, una fila di abeti e un’aurora vera disegnata in WebGL. Il bordo basso della tenda di luce è una corda di 32 nodi che si muove con l’equazione delle onde: sotto il puntatore l’aurora si sveglia, si piega verso di lui e apre i raggi a ventaglio da lì, come se il vento solare arrivasse da quel punto. Premuto, la corda riceve un colpo, un’onda di luce attraversa la pillola, l’orlo diventa rosa come in una tempesta vera e la prova è partita.
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 aurora button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the Start your free trial button of an app for chasing the northern lights. Inside the pill, dark as an arctic
night over a ridge of snow and a line of spruces, a real aurora drawn in WebGL: curtains of green and violet
light with vertical rays, hanging from a string that moves like a rope. Under the pointer the aurora wakes,
bends towards it and fans its rays out from it, as if the solar wind came from there; pressed, it breaks into
a wave of light that runs across the pill, and the trial has started -->
<div class="aurora" data-aurora>
<div class="aurora__pill" data-pill>
<!-- without WebGL: the same sky in CSS and SVG -->
<div class="aurora__flat" aria-hidden="true">
<div class="aurora__lean" data-flat-lean><div class="aurora__curtain"></div></div>
<div class="aurora__front" data-front></div>
<div class="aurora__front" data-front></div>
<svg class="aurora__land" data-land preserveAspectRatio="none"><path class="aurora__ridge" data-ridge/><path class="aurora__trees" data-trees/></svg>
</div>
<canvas class="aurora__canvas" data-canvas aria-hidden="true"></canvas>
<button class="aurora__btn" type="button" data-btn data-autoclic>
<span class="aurora__face" data-face="rest">
<span class="aurora__words">Start your free trial</span>
<svg class="aurora__icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h13M13 6.5l5.5 5.5-5.5 5.5"/></svg>
</span>
<span class="aurora__face" data-face="done" aria-hidden="true">
<svg class="aurora__icon aurora__icon--check" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.6l4.3 4.3L19 7.2" pathLength="1" data-check/></svg>
<span class="aurora__words">Trial started</span>
</span>
</button>
</div>
<p class="aurora__hint" data-rise><span data-hint>14 nights free, then $4.99 a month</span></p>
<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.
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 «Il pulsante con l’aurora» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero una pillola scura come un cielo artico, con un filo di bordo freddo e la scritta Start your free trial con una freccia. Dentro, in basso, un crinale innevato e una fila di piccoli abeti neri; sopra, un’aurora quieta: un orlo verde e una tenda di raggi verticali che sale e sfuma nel viola. Sotto, in grigio, 14 nights free, then $4.99 a month. Passando col mouse l’aurora si sveglia: si accende intorno al puntatore, il suo orlo sale verso di lui, i raggi si inclinano a ventaglio come se partissero da lì e scorrono nella direzione in cui il mouse si muove; una passata veloce lascia una scia di increspature che corrono lungo la tenda. La luce esce appena dal bordo della pillola e illumina la neve del crinale, e le lettere si allargano un poco. Premendo, la pillola si abbassa e torna su elastica; dove si è premuto la tenda riceve un colpo, due fronti di luce bianca e verde corrono verso i due lati, l’orlo si tinge di rosa e tutto il cielo fa un lampo. Arriva Trial started con una spunta che si disegna, e sotto Tonight: Kp 5, look north after 22:40. Dopo qualche secondo torna Start your free trial, e lontano dal puntatore l’aurora rallenta e si ferma.
Come funziona
Una corda con l’equazione delle onde
Il bordo basso dell’aurora è una fila di 32 nodi che va un poco oltre i due lati della pillola. Ogni nodo è tirato verso il suo posto da una molla e verso i vicini dalla tensione della corda (la differenza seconda, cioè l’equazione delle onde in piccolo), con un poco di attrito; i passi sono di 1/240 di secondo, così anche una tensione alta resta stabile. La tensione si calcola dalla velocità voluta: WAVE è quante mezze altezze della pillola percorre un’increspatura in un secondo. Agli ultimi quattro nodi di ogni lato l’attrito cresce: l’onda esce dalla pillola invece di rimbalzare indietro.
La spline che la fa morbida
A ogni fotogramma le altezze dei nodi e la luce che portano vanno allo shader come due array di uniform. Lo shader li legge con una B-spline cubica: per ogni pixel somma i quattro nodi vicini coi loro pesi (in un ciclo a indice costante, l’unico permesso da WebGL 1), e con la derivata dei pesi ha anche la pendenza della corda. Dove la tenda si piega, la si vede di taglio, e lì è più luminosa.
La tenda e i raggi
Sopra l’orlo lo shader appende la tenda: un orlo verde stretto e brillante, un corpo che sfuma verso l’alto e passa al viola, un alone sotto. I raggi sono rumore a una dimensione letto lungo la tenda, due ottave, e ogni raggio ha la sua altezza presa da un terzo rumore: è la palizzata delle aurore vere. Dietro c’è una seconda tenda più lontana e più debole; davanti, il crinale di neve che prende la luce verde in cima e gli abeti a tre palchi, fatti con celle e numeri a caso, tutto nello stesso shader.
Il vento che viene dal puntatore
Il puntatore, in mezze altezze della pillola e smorzato, fa tre cose. Tira su l’orlo vicino a sé con un peso a campana (WIND). Inclina ogni raggio perché punti verso di lui, una spinta che cresce con la distanza e ha un limite: è la corona, i raggi che si incontrano sopra la testa quando si guarda in su lungo il campo magnetico (FAN). E con la sua velocità spinge la corda e fa scorrere i raggi nella sua direzione.
Il colpo e l’onda di luce
Premuto, i nodi vicini al punto ricevono una spinta verso il basso e un carico di luce: l’equazione delle onde la porta da sola ai due lati. Insieme GSAP fa correre due fronti di luce nello shader alla stessa velocità, alza i raggi al loro passaggio, accende il lampo del cielo e tinge di rosa l’orlo, come il bordo basso delle aurore vere durante una tempesta. Il testo cambia mentre i fronti partono, la spunta si disegna con stroke-dashoffset.
Si ferma quando è ferma
Il tempo dell’aurora corre solo da sveglia: lontano dal puntatore rallenta fino a zero e la corda si posa. A ogni fotogramma lo script confronta i valori animati e quanto si sono mossi i nodi: se niente è cambiato non calcola e non disegna. L’anteprima della libreria fa un giro intero con un clic da script: una mano finta passa sopra la pillola, preme, l’onda corre, Trial started, e si torna a riposo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WIND | script.js | 0.6 | Quanto la tenda si piega verso il puntatore, come se il vento solare venisse da lì. |
FAN | script.js | 0.6 | Quanto i raggi si aprono a ventaglio dal puntatore, come la corona vista proprio sopra la testa. |
DRIFT | script.js | 0.5 | Quanto in fretta l’aurora si muove mentre è sveglia. |
RAYS | script.js | 3.4 | Quanto sono fitti i raggi: di più è una tenda più fine. |
WAVE | script.js | 6.5 | Quanto veloce corre un’increspatura lungo la tenda, in mezze altezze della pillola al secondo. |
BURST | script.js | 1 | Quanto è forte l’onda di luce quando si preme il pulsante. |
GLOW | script.js | 0.55 | Quanta luce esce intorno alla pillola. |
DONE | script.js | 3.4 | I secondi in cui dice Trial started prima di tornare a riposo da solo. |
Quando usarla
Per l’azione che conta in un’app o un sito che parla di cielo, notte e viaggi al nord: un’app di astronomia o di previsioni dell’aurora, un tour in Lapponia o in Islanda, una baita di vetro, un abbonamento a un servizio di foto notturne. Un pulsante solo, su un fondo scuro e calmo; i colori del cielo, dell’aurora e della terra si cambiano dalle variabili del CSS.
Sul telefono
La pillola resta della sua misura e a 390 pixel niente sfora; il canvas è disegnato al massimo a due volte la risoluzione. Il dito fa da puntatore: appena tocca, l’aurora si sveglia sotto il punto toccato e, finché resta giù, trascinandolo la tenda lo segue e i raggi scorrono con lui; alzandolo parte il colpo e l’onda di luce, come al computer.
Con il movimento ridotto
L’aurora è ferma: non ondeggia, non segue il puntatore e i raggi non scorrono né si inclinano. Al passaggio e alla pressione cambia solo la luce, in dissolvenza: la tenda si accende e si spegne, il cielo fa un lampo morbido, l’orlo si tinge di rosa. Le scritte cambiano con una dissolvenza e la spunta compare già disegnata.
Trappole
- Il primo bagliore sulla neve era calcolato con un esponenziale che cresceva sopra il crinale: le punte degli abeti si accendevano di verde come candeline. L’esponenziale va tenuto sotto lo zero, solo verso il basso.
- Con l’inclinazione dei raggi senza limite, lontano dal puntatore i raggi diventavano quasi orizzontali e la tenda sembrava pioggia di traverso: l’inclinazione è tagliata a 0,9.
- Il riflesso del vetro, una fascia chiara in cima alla pillola, era troppo largo e si vedeva come una striscia grigia sopra il cielo: è diventato un velo sottile, stretto ai lati.
- Senza attrito agli estremi l’onda del colpo rimbalzava sui due lati e tornava indietro sotto le parole: gli ultimi quattro nodi di ogni lato la assorbono.
- Nel cambio di scritta la nuova parola entrava mentre la vecchia stava ancora uscendo, e per un attimo erano una sull’altra: la nuova aspetta che la vecchia sia sparita, anche col movimento ridotto.
- Nella versione senza WebGL un pettine regolare di raggi in CSS sembrava un codice a barre: i raggi sono un pettine irregolare e la luce è fatta di più macchie.
Librerie
GSAP 3.15.0, Instrument 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 17 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.
