Il pulsante di vetro liquido
Pulsanti, WebGL, Hover, Fisica
NuovaGratis
Tutti i componenti
Il pulsante di mercurio
Un pulsante pieno di metallo liquido, disegnato da uno shader WebGL con i riflessi cromati di uno studio fotografico: il mercurio si allunga verso il puntatore e lo insegue con una lingua quando va veloce; al clic si spezza in gocce che schizzano, ricadono e si riuniscono, una perla corre lungo il bordo finché la richiesta aspetta, e alla fine si versa di nuovo nel pulsante. La scritta resta nitida sopra, in HTML.
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 mercury button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/geist@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the mercury button: a pill of liquid metal drawn in WebGL under a real button. The mercury reaches for the
pointer, breaks into drops when pressed, runs round the rim while the request waits, and pours back together
when it is done. The words stay in HTML, sharp, over the metal -->
<div class="mercury" data-mercury>
<div class="mercury__pool" data-pool>
<canvas class="mercury__canvas" data-canvas aria-hidden="true"></canvas>
<button class="mercury__btn" type="button" data-btn data-autoclic>
<span class="mercury__face" data-face="rest">
<span>Join the waitlist</span>
<svg class="mercury__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="mercury__face" data-face="busy" aria-hidden="true">Saving your spot</span>
<span class="mercury__face" data-face="done" aria-hidden="true">
<svg class="mercury__icon mercury__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>You’re on the list</span>
</span>
</button>
</div>
<p class="mercury__hint" data-rise><span data-hint>2,480 people ahead of you</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.
22 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 di mercurio» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero un pulsante a pillola di metallo liquido: cromo vivo, con in alto il riflesso chiaro di una parete, una linea d’orizzonte netta, il basso scuro e due lampade che brillano sui bordi tondi. Sopra, incisa nel metallo, la scritta nera Join the waitlist con una freccia; sotto, 2,480 people ahead of you. All’arrivo il metallo atterra come una perla al centro e si allarga di lato fino a diventare il pulsante, con un piccolo rimbalzo. A riposo respira appena. Avvicinando il mouse le gocce più vicine si sporgono verso di lui e sul bordo cresce una gobba lucida; passandoci sopra si alza un rigonfiamento morbido sotto il puntatore e i riflessi girano verso di lui; muovendo il mouse in fretta il metallo lo insegue con una lingua che resta indietro e poi rientra. Premendo, il metallo si ammacca sotto il dito; al clic il pulsante si strozza nel mezzo e si spezza: una ventina di gocce schizzano in alto e di lato, ricadono e si riuniscono in due metà che si richiudono. La scritta diventa Saving your spot e la riga Holding a place for you, mentre una perla di mercurio con una coda di gocce più piccole corre lungo il bordo del pulsante. Dopo 2,4 secondi la perla rientra con un piccolo sobbalzo del pulsante, si disegna una spunta con You’re on the list e la riga dice You’re number 2,481. We’ll be in touch; dopo 3,2 secondi, o con un clic, il pulsante torna com’era.
Come funziona
Un campo di distanze
Il metallo è un solo triangolo che copre un canvas più grande del pulsante, e uno shader che per ogni pixel calcola la distanza dal bordo del metallo: due pillole (le due metà del pulsante) e DROPS cerchi, fusi con un minimo morbido (smooth minimum) che li unisce quando sono più vicini di GOO pixel. Le due metà sono unite col minimo duro: a riposo sono una pillola sola, e solo quando si separano fra loro si forma un collo di liquido.
Dalla distanza al cromo
La distanza diventa un’altezza: un quarto di cerchio dal bordo, profondo quanto il raggio della forma che sta lì (mezza altezza nel corpo, il raggio della goccia dentro una goccia, una media pesata in mezzo), così ogni goccia esce tonda come una perla. La pendenza si legge dal campo in tre punti a 2,5 pixel di distanza, abbastanza lontani perché in mezzo a una goccia o in un collo la normale giri piano invece di fare una piega. Con la normale si riflette uno studio fatto di numeri: una parete chiara alle spalle, un orizzonte netto, un pavimento scuro, due lampade a strisce e una luce piccola che segue il puntatore.
Le gocce sono molle
Ogni goccia ha il suo posto dentro il pulsante e una molla (STIFF, DAMP, con un po’ di rigidità diversa per ognuna) che la riporta lì, sul ticker di GSAP col passo limitato a 1/30 di secondo. Il puntatore sposta il bersaglio: le gocce più vicine vanno verso di lui per GATHER della distanza, e la velocità del puntatore, misurata e smorzata, le tira indietro lungo la corsa, così un mouse veloce si porta dietro una lingua di metallo.
Lo schizzo e il ritorno
Al clic le due metà si separano di colpo nel mezzo (il collo si allunga e si spezza) e ogni goccia riceve una spinta di circa SPLASH pixel al secondo, lontano dal punto premuto e un po’ in alto. Per un secondo le molle sono quasi slegate e una gravità tira le gocce giù; poi la presa torna con power1.in e le gocce si riuniscono da sole. In volo sono un po’ più piccole: sembra uno spruzzo.
La perla sul bordo
Mentre la richiesta finta aspetta (WAIT secondi) quattro gocce, le più vicine al punto di partenza, si disegnano su punti che corrono lungo il perimetro del pulsante (due tratti dritti e due mezzi cerchi), un giro ogni LAP secondi: la prima più grande, le altre sempre più piccole dietro, così il campo le fonde in una cometa che scivola sul bordo. Alla fine tornano al loro posto e il pulsante sobbalza su una molla.
La scritta sopra
Il pulsante vero è un button trasparente sopra il canvas, con tre facce di testo una sopra l’altra (riposo, attesa, fatto) che cambiano con una sfocatura; il testo ha un’ombra chiara di un pixel sotto, come inciso nel metallo. Invio e Spazio lo premono dal centro, aria-live dice lo stato, aria-disabled lo segna mentre aspetta. Senza WebGL resta una pillola cromata disegnata col CSS.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
REACH | script.js | 130 | Da quanti pixel lontano dal pulsante il mercurio sente il puntatore. |
GATHER | script.js | 0.6 | Quanta strada fa il mercurio verso il puntatore, come parte della distanza. |
STIFF | script.js | 150 | Quanto tira la molla che riporta ogni goccia al suo posto: la tensione del metallo. |
DAMP | script.js | 10 | Quanto in fretta il metallo smette di tremare. |
SPLASH | script.js | 520 | Quanto veloci schizzano via le gocce al clic, in pixel al secondo. |
GOO | script.js | 14 | A quanti pixel due gocce cominciano a fondersi in una. |
DROPS | script.js | 14 | Di quante gocce è fatto il mercurio. |
LAP | script.js | 1.3 | I secondi di un giro della perla lungo il bordo mentre la richiesta aspetta. |
WAIT | script.js | 2.4 | I secondi della richiesta finta. |
DONE | script.js | 3.2 | I secondi in cui il pulsante dice che è fatto, prima di tornare da solo. |
Quando usarla
Per l’azione principale di una pagina di lancio, una lista d’attesa, un prodotto con un’estetica metallica o futuristica (audio, orologi, tecnologia, moda): un pulsante solo, su un fondo scuro e calmo, con spazio intorno per gli schizzi. Non per una pagina con molti pulsanti uguali.
Sul telefono
Il canvas si stringe alla larghezza dello schermo e a 390 pixel non sfora. Senza un mouse che si avvicina, il dito che preme fa da puntatore: il metallo si ammacca dove tocca e lo segue finché il dito resta giù; poi lo schizzo e la perla come al computer. La densità dei pixel è limitata a 2.
Con il movimento ridotto
Il metallo resta fermo e lucido: non respira, non insegue il puntatore, non si schizza e non corre lungo il bordo. Le scritte cambiano con una dissolvenza, durante l’attesa la scritta pulsa piano, e la spunta compare già disegnata.
Trappole
- La normale presa con due differenze a un pixel faceva una piega dove la pendenza cambia verso (in mezzo a una goccia e nel collo fra due): i riflessi uscivano a frastagli. Leggendo il campo in tre punti a 2,5 pixel la piega si ammorbidisce, ed è più veloce di quattro letture.
- Il raggio della curvatura scelto col massimo fra le forme cambiava di colpo dove due gocce si toccano, e il cambio si vedeva come una riga nel riflesso: va fatto con una media pesata dalla profondità.
- Le due metà del pulsante, fuse col minimo morbido a riposo, facevano un rigonfiamento nel mezzo: a riposo devono essere unite col minimo duro, e il collo morbido si accende solo mentre si separano.
- Molte gocce sparse dentro la pillola, ognuna tonda per conto suo, a riposo davano una pillola bitorzoluta: devono essere più piccole del corpo e stare tutte sulla linea di mezzo, così il corpo le copre.
- La perla che corre lungo il bordo, tirata da una molla, restava indietro e si staccava a ogni curva: si disegna direttamente sul bordo, e la molla resta sotto per quando la lascia.
- La scritta Saving your spot compariva mentre le gocce erano in aria, senza metallo sotto, e non si leggeva: arriva 0,6 secondi dopo, quando il metallo è tornato.
- I colori dello studio stanno nel CSS e lo shader li legge una volta all’avvio: cambiati dal vivo serve ricaricare l’anteprima.
Librerie
GSAP 3.15.0, Geist (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 11 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 4 ottobre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Fatto
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.
