Il pulsante di vetro liquido
Pulsanti, WebGL, Hover, Fisica
NuovaGratis
Tutti i componenti
Il pulsante del prisma
Il pulsante Upgrade to Pro di una pagina dei prezzi, su fondo nero: dentro la pillola un piccolo prisma di vetro apre un raggio di luce bianca nel suo spettro, che attraversa la pillola e colora la scritta. È ottica vera, calcolata per sedici lunghezze d’onda con la legge di Snell, l’indice di Cauchy e i riflessi di Fresnel, e disegnata da uno shader WebGL che somma le fasce di colore. Il puntatore gira il prisma su una molla e lo spettro si sposta, si apre e si stringe; premuto, il prisma gira, lo spettro spazza la pillola come un faro e la scritta diventa Welcome to Pro.
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 prism button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/inter-tight@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the prism button: the Upgrade to Pro button of a pricing page. Inside the pill a small glass prism splits a ray
of white light into its spectrum, worked out with Snell's law for sixteen wavelengths, and the colours light the
words. The pointer turns the prism; pressed, it spins and the spectrum sweeps the whole pill -->
<div class="pro" data-pro>
<span class="pro__halo" aria-hidden="true" data-halo></span>
<div class="pro__pill" data-pill>
<canvas class="pro__canvas" aria-hidden="true" data-canvas></canvas>
<button class="pro__btn" type="button" data-btn data-autoclic>
<span class="pro__face" data-face="rest">Upgrade to Pro</span>
<span class="pro__face" data-face="busy" aria-hidden="true">Upgrading</span>
<span class="pro__face" data-face="done" aria-hidden="true">Welcome to Pro</span>
</button>
</div>
<p class="pro__note" data-rise><span data-note>$12 a month, billed yearly · cancel anytime</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.
20 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 prisma» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero c’è una pillola scura con un bordo sottile. A sinistra, dentro, un prisma di vetro triangolare con gli spigoli che prendono la luce; un raggio bianco sale dall’angolo in basso, entra nel prisma (una piccola parte si riflette sulla prima faccia e torna indietro verso l’alto) e ne esce aperto in un ventaglio di colori: rosso in alto, poi arancio, giallo, verde, azzurro, blu e viola. Vicino al prisma le fasce si sovrappongono ancora e la luce è quasi bianca; andando a destra si separano. Il ventaglio passa sulla scritta Upgrade to Pro, e le lettere si accendono dei colori che le colpiscono, molto più del fondo scuro intorno; sotto, la riga $12 a month, billed yearly · cancel anytime. Muovendo il mouse sulla pillola il prisma gira verso il puntatore su una molla, con un piccolo dondolio: a sinistra lo spettro si alza e si apre, a destra si abbassa e si stringe, e la luce si fa un po’ più forte. Premendo, la pillola si abbassa appena, il prisma comincia a girare e lo spettro spazza tutta la pillola come il fascio di un faro mentre la scritta dice Upgrading e la riga sotto Setting up your workspace. Dopo un momento il prisma rallenta e si ferma con un dondolio sulla faccia successiva, la scritta diventa Welcome to Pro, lo spettro si apre più largo e più luminoso e sotto la pillola si accende un alone di tutti i colori; la riga dice Pro is on · every feature unlocked. Dopo qualche secondo torna Upgrade to Pro.
Come funziona
Sedici raggi con la legge di Snell
Ogni fotogramma in cui il prisma si muove, lo script segue sedici raggi, dal viola a 409 nanometri al rosso a 691. Per ognuno trova la prima faccia che il raggio incontra, ne prende la normale e piega il raggio con la legge di Snell in forma vettoriale; dentro il vetro trova la faccia d’uscita e lo piega di nuovo. L’indice cambia col colore secondo la formula di Cauchy, n = INDEX + SPREAD / λ², più alto per il blu: per questo il blu si piega di più e i colori si separano. Se un raggio arriva su una faccia più radente dell’angolo limite, la faccia fa da specchio (riflessione totale) e il raggio esce da un’altra.
Fresnel: quanta luce passa
A ogni faccia una parte della luce si riflette, con le equazioni di Fresnel per la luce non polarizzata (la media delle due polarizzazioni): quello che passa è la luce rimasta per il raggio, e quello che si riflette sulla prima faccia diventa un raggio bianco che torna indietro, più forte quando la luce arriva radente. Per ogni colore lo shader riceve il punto d’entrata, quello di un eventuale rimbalzo, il punto d’uscita e la direzione, con la luce rimasta scritta nella lunghezza della direzione (due vec4 a raggio: poche uniform, che bastano anche ai telefoni).
Il colore di una lunghezza d’onda
Il colore di ogni raggio viene dalle funzioni colorimetriche CIE 1931 scritte come somme di gaussiane asimmetriche (Wyman, Sloan e Shirley), poi da XYZ a sRGB lineare, tagliando le parti negative che lo schermo non sa mostrare. I sedici colori sono scalati perché tutti insieme facciano il bianco: dove le fasce si sovrappongono, vicino al prisma, la luce torna bianca, e più in là si apre l’arcobaleno, come in un prisma vero.
Lo shader somma le fasce
Per ogni pixel lo shader sommma la luce di ogni raggio: una fascia con un nucleo netto e un bagliore largo, che si allarga lungo il cammino e si fa più tenue in proporzione, così l’energia resta la stessa. Le lettere sono una texture disegnata una volta (le tre scritte nei tre canali rosso, verde e blu) e prendono la luce più del fondo, come la carta stampata sotto un raggio. Il prisma ha una tinta leggera e spigoli lucidi, più chiari sulle facce girate verso l’alto; alla fine una curva morbida, che non arriva mai al bianco piatto, e la correzione gamma.
Il riposo, la molla e il faro
All’avvio lo script cerca la rotazione di deviazione minima, la posizione classica in cui lo spettro è più ordinato, e l’angolo d’entrata del raggio bianco che manda il verde nel mezzo della scritta. Il puntatore aggiunge fino a TURN radianti su una molla (STIFF e DAMP); premendo, il prisma gira a SPIN giri al secondo per WAIT secondi e poi la molla lo ferma sul terzo di giro successivo, dove un triangolo è uguale a prima. Lo shader si ridisegna solo quando qualcosa cambia.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
INDEX | script.js | 1.48 | L’indice di rifrazione del vetro (la A di Cauchy): di più, la luce si piega di più. |
SPREAD | script.js | 0.032 | Quanto l’indice cambia col colore (la B di Cauchy, in micrometri quadrati): di più, un arcobaleno più largo. Un vetro vero sta sotto 0,01: qui è esagerato perché si veda. |
TURN | script.js | 0.3 | Di quanto il puntatore può girare il prisma, in radianti da ogni parte. |
STIFF | script.js | 70 | Quanto forte la molla gira il prisma dove lo vuole il puntatore. |
DAMP | script.js | 9 | Quanto presto il prisma smette di dondolare. |
SPIN | script.js | 1.4 | I giri al secondo del prisma mentre l’upgrade va avanti. |
WAIT | script.js | 1.6 | I secondi dell’upgrade finto. |
DONE | script.js | 3.4 | I secondi in cui il pulsante dice Welcome to Pro prima di tornare da solo. |
GAIN | script.js | 1 | Quanto è forte la luce. |
Quando usarla
Per il pulsante che conta di una pagina dei prezzi su fondo scuro: Upgrade, Go Pro, Start free trial, Get early access. Sta bene da solo, nella colonna del piano consigliato, o nell’intestazione di un’app di creativi e sviluppatori; il prisma dice luce e qualità senza bisogno di icone. Va usato una volta per pagina: è un effetto che attira lo sguardo.
Sul telefono
La pillola si stringe alla larghezza dello schermo (al massimo 360 pixel) e il prisma, la scritta e lo spettro si ricalcolano per la sua misura. Senza mouse il dito gira il prisma mentre tocca e lo spettro lo segue; il tocco preme il pulsante. Il canvas lavora al massimo a due volte la densità dello schermo.
Con il movimento ridotto
Il prisma sta fermo nella sua posizione di riposo: niente molla, niente rotazione verso il puntatore e niente giro alla pressione. Lo spettro resta dov’è; premendo, le scritte cambiano in dissolvenza, la luce si fa più forte, lo spettro si apre senza muoversi e l’alone compare.
Trappole
- Con un angolo d’entrata qualunque lo spettro usciva sempre in basso: un prisma devia la luce almeno della sua deviazione minima, circa 47 gradi. Il raggio bianco deve salire, e lo script cerca da sé l’angolo che porta lo spettro sulla scritta.
- Cercando solo la rotazione che manda il verde sulla scritta, lo script trovava un’uscita radente: il blu finiva in riflessione totale e i colori arrivavano in disordine. Il riposo è la deviazione minima, dove il cammino nel vetro è simmetrico.
- Il raggio mirato al centro del prisma entrava vicino a uno spigolo e il viola usciva dalla faccia sbagliata: ora è mirato al centro della faccia d’entrata.
- Le funzioni colorimetriche danno colori fuori dallo schermo, con componenti negative: tagliate a zero e scalate perché la somma sia bianca, le fasce sovrapposte tornano bianche come devono.
- Una uniform per ogni colore, ogni punto e ogni intensità superava le 64 uniform dei telefoni: entrata e rimbalzo in un vec4, uscita e direzione nell’altro, e l’intensità nella lunghezza della direzione.
- Le due scritte, una che esce e l’altra che entra nello stesso momento, si vedevano una sopra l’altra: la vecchia esce del tutto prima che entri la nuova.
Librerie
GSAP 3.15.0, Inter Tight (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 11 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 5 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.
