Il pulsante a strati
Pulsanti, Hover, Fisica
Gratis
Tutti i componenti
Il pulsante della crisalide
Il pulsante Upgrade plan di un'app, con una crisalide color giada appesa a un rametto nella punta tonda della pillola. Il clic è il passaggio al piano Pro: l'involucro si scurisce e diventa trasparente finché dentro si vedono le ali blu ripiegate, si spacca in fondo, e una farfalla esce e resta appesa sotto il guscio vuoto con le ali piccole, bagnate e accartocciate. Le gonfia in tre spinte, le asciuga con due battiti lenti e vola fuori dalla pillola su una curva un po' incerta, fino a posarsi sul suo bordo di sopra, dove apre e chiude le ali. Il blu non è un colore dipinto: lo script calcola a ogni angolo la luce riflessa dai sottili strati delle scaglie, come nelle vere morpho, quindi le ali lampeggiano azzurre di fronte e diventano viola scuro quando si inclinano.
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 chrysalis button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the chrysalis button: the Upgrade plan button of an app, with a jade chrysalis hanging from a twig in the round
left end of the pill. A click is the upgrade: the case clears and shows the blue wings folded inside, splits,
and a butterfly climbs out, pumps its wings to full size, dries them and flies out of the pill to settle on its
top edge, opening and closing its wings. Their blue is not a paint: it is worked out from the light reflected
by the thin layers in the scales, so it flashes and turns violet as the wings tilt -->
<div class="chry" data-chrysalis>
<button class="chry__btn" type="button" data-btn data-autoclic>
<span class="chry__fill" aria-hidden="true"></span>
<span class="chry__well" aria-hidden="true"></span>
<span class="chry__faces">
<span class="chry__face" data-face="rest">
<span class="chry__word" data-wide="Upgrade plan" data-rest-text>Upgrade plan</span>
</span>
<span class="chry__face chry__face--busy" data-face="busy" aria-hidden="true">
<span class="chry__shine" data-busy-text>Upgrading…</span>
</span>
<span class="chry__face chry__face--done" data-face="done" aria-hidden="true">
<span class="chry__done" data-done-text>Welcome to Pro</span>
</span>
</span>
</button>
<canvas class="chry__air" aria-hidden="true" data-air></canvas>
<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.
23 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 della crisalide» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una pillola verde bosco scuro, alta 60 pixel, con un filo di luce in alto e un'ombra morbida sotto. Nella punta tonda di sinistra c'è un pozzetto scuro, incavato, e di traverso in alto un rametto marrone con un piccolo ramo laterale; dal rametto, attaccata con un cuscinetto di seta bianca, pende una crisalide color giada, lucida, con una sottile riga d'oro intorno alle spalle. A destra, in Mona Sans color avorio, Upgrade plan. All'arrivo il pulsante sale piano e la crisalide dondola un poco. Passando sopra la pillola la scritta si allarga, il fondo si gonfia con un rimbalzo e la crisalide ha uno scatto, come fanno quelle vere quando le si tocca, e dondola fino a fermarsi. Al clic arriva Upgrading… con un riflesso che la attraversa; la crisalide dà due scatti mentre si scurisce, e attraverso l'involucro diventato trasparente si vedono le ali blu ripiegate. Poi l'involucro si spacca in fondo e diventa un guscio vuoto, chiaro e trasparente, con i due lembi aperti: la farfalla scende fuori e resta appesa sotto di lui con la testa in alto, le ali piccole, opache e accartocciate. Le gonfia in tre spinte, ogni volta un po' più grandi e più lisce, mentre si asciugano e prendono il loro blu; poi le apre e le chiude due volte, piano. Infine si stacca: vola fuori dal pozzetto, sale sopra la pillola battendo le ali sette volte al secondo, con la testa che segue la strada e piccoli sbandamenti, e scende a posarsi sul bordo di sopra della pillola, a destra, con le zampe sul bordo. La scritta diventa Welcome to Pro e la farfalla apre e chiude le ali qualche volta, sempre più piano, poi resta con le ali aperte. A ogni battito il blu cambia: di fronte è un azzurro acceso, inclinato diventa blu profondo, poi viola e quasi nero sul taglio; il bordo delle ali resta nero, e sul blu si vedono le venature. Muovendo il puntatore vicino alla farfalla la luce si sposta e il lampo scorre da un'ala all'altra; passando sulla pillola la farfalla riapre e chiude le ali. Un altro clic la lascia andare: vola via in alto a destra e sparisce, il guscio vuoto svanisce e una crisalide nuova si gonfia dal rametto con un rimbalzo e dondola; la pillola torna a Upgrade plan. Con la tastiera il fuoco mostra un anello e saluta come il puntatore; Invio o Spazio fanno il clic.
Come funziona
Il blu calcolato dalla luce
Le scaglie delle morpho sono pile di strati sottili di chitina e aria, e il loro blu è la luce riflessa da quegli strati quando le onde vanno in fase. Per ogni grado di inclinazione da 0 a 90 lo script calcola dove cade il picco del primo ordine, due volte lo spessore ottico di una coppia di strati (70 nanometri di chitina con indice 1,56, più l'intercapedine d'aria LAYER), ciascuno col suo coseno interno dato dalla legge di Snell; una banda gaussiana intorno al picco, più larga quando la luce entra di sbieco, è lo spettro riflesso. Lo spettro si pesa con le curve del colore dell'occhio (l'approssimazione a gaussiane di Wyman, Sloan e Shirley delle CIE 1931), il risultato XYZ diventa sRGB con la sua curva, e i colori fuori dallo schermo si avvicinano al grigio della stessa luminosità invece di essere tagliati. Ne esce una tabella di 91 colori: azzurro di fronte, blu profondo, viola, quasi nero sul taglio. Con LAYER a 160 la stessa fisica dà il verde, a 190 l'oro.
Le ali in 3D su un canvas
Ogni ala è una forma di tre curve di Bézier misurata in lunghezze dell'ala anteriore, dalla radice sul torace. La farfalla si vede dall'alto: un'ala alzata di φ gradi verso l'occhio si accorcia di cos φ in larghezza, e il suo colore è quello della tabella all'angolo φ, più o meno l'inclinazione della luce (con segni opposti per le due ali, così una lampeggia mentre l'altra si spegne). La stessa forma, rimpicciolita verso la radice, è la parte blu dentro il bordo nero; un gradiente lungo l'ala usa tre angoli un po' diversi, perché l'ala è curva. Sopra, le venature e le righe sottili delle scaglie. Per l'ala appena uscita, ogni punto della forma riceve una spinta fissa a caso, moltiplicata per crumple, e un velo grigio, moltiplicato per wet: le due variabili scendono a zero mentre la grandezza sale in tre spinte.
Il volo su una spline
La strada è una spline di Catmull-Rom per sei punti, dal guscio fin sopra la pillola e giù sul bordo, percorsa a velocità costante con una tabella delle lunghezze (240 campioni e una ricerca binaria). GSAP porta il punto lungo la strada con sine.inOut; sopra c'è uno sbandamento di traverso, la somma di due seni che si spegne ai due capi, e a ogni colpo d'ala un piccolo sollevamento. La testa segue la tangente della strada, con un'oscillazione a metà del ritmo delle ali, e all'inizio e alla fine gira dolcemente verso l'alto, per staccarsi e posarsi dritta. Le ali battono a BEATS colpi al secondo fra -24 e 84 gradi, e il battito si mescola con la posa ferma attraverso fly.amt.
La crisalide e le molle
La crisalide è una goccia di quattro curve con un gradiente dalla luce in alto a sinistra, la riga d'oro e un riflesso; si scurisce verso il colore del pozzetto mentre una forma blu ritagliata dentro di lei diventa visibile, poi si incrocia col guscio vuoto, chiaro e aperto in fondo. Gira sul suo gancio con una molla smorzata (1,5 oscillazioni al secondo), spinta dal puntatore e dagli scatti della timeline. Posata, la farfalla apre e chiude le ali con un inviluppo che si smorza in un secondo e mezzo, e la luce segue il puntatore con un ritardo esponenziale, più forte quanto più è vicino. Il passo di tempo è limitato a 1/30 di secondo e diviso in passi di 1/240.
I tempi e gli stati
Una timeline GSAP fa tutto: crisalide che si schiarisce (un secondo), spacco, uscita, tre spinte, due battiti, volo di 1,7 secondi, atterraggio; PACE ne cambia la velocità con timeScale. Il pulsante è un button vero: aria-disabled mentre la farfalla nasce e mentre vola via, una zona aria-live dice Upgrading your plan… e Welcome to Pro., e il clic successivo è accettato solo quando le ali si sono calmate (6,2 secondi), così il clic dell'anteprima ogni 2,8 secondi lascia la farfalla posata per un giro intero. Il disegno si ferma quando nessun valore cambia: un'impronta di tutte le variabili decide se ridisegnare, e il canvas copre la pillola e l'aria sopra di lei senza mai prendere il puntatore.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LABEL | script.js | Upgrade plan | La scritta a riposo. Se una delle tre scritte è troppo lunga per lo spazio, il carattere si rimpicciolisce. |
BUSY | script.js | Upgrading… | La scritta mentre la farfalla esce e vola. |
DONE | script.js | Welcome to Pro | La scritta quando la farfalla si è posata; la dice anche la zona aria-live. |
PACE | script.js | 1 | Il passo di tutta la nascita: 2 ci mette il doppio, 0,5 la metà. |
LAYER | script.js | 130 | Lo spessore dell'aria fra gli strati delle scaglie, in nanometri: 130 è il blu delle morpho, 100 viola, 160 verde, 190 oro. Il colore delle ali viene da qui. |
BEATS | script.js | 7 | I colpi d'ala al secondo in volo. |
SIZE | script.js | 1 | La grandezza della farfalla. |
TWITCH | script.js | 1 | Quanto scatta la crisalide sotto il puntatore e mentre si apre. 0 resta ferma. |
Quando usarla
Per il passaggio a un piano a pagamento in un'app o in un SaaS: Upgrade plan, Go Pro, Unlock premium, o la fine di una prova gratuita. Va bene anche per un'azione che trasforma qualcosa (pubblica, attiva, porta in produzione) in un prodotto con un tono caldo. Il passaggio è simulato: in un'app vera il clic apre il pagamento o chiama il server, e lo stato fatto aspetta la sua risposta; il secondo clic che fa volare via la farfalla serve alla demo, in un'app porterebbe alla pagina del piano.
Sul telefono
La pillola è larga circa 210 pixel e la farfalla vola sopra di lei per una quarantina di pixel ai lati: a 390 pixel tutto sta dentro, e se una scritta è più lunga dello spazio il carattere si rimpicciolisce. Il tocco fa scattare la crisalide, schiaccia il fondo e fa nascere la farfalla; il dito al posto del puntatore sposta la luce sulle ali.
Con il movimento ridotto
Niente scatti, niente volo e niente battiti: al clic la crisalide si scurisce e diventa il guscio vuoto in dissolvenza, e la farfalla compare già posata sul bordo, con le ali aperte, in dissolvenza; Upgrading… e Welcome to Pro arrivano in dissolvenza. La pillola non si gonfia (sotto il mouse il fondo si schiarisce appena). Un altro clic fa sparire la farfalla e rimette la crisalide, sempre in dissolvenza.
Trappole
- Il primo modello del colore metteva un riflesso fisso del 3 per cento a tutte le lunghezze d'onda: sul taglio le ali diventavano grigio chiaro invece che nere. Ora sotto il riflesso c'è solo il pigmento bruno-nero, e il riflesso cala col coseno dell'angolo.
- Con l'angolo delle ali usato pari pari, a 30 gradi il blu era già viola e la farfalla in volo sembrava di un altro colore. Le creste delle scaglie non sono tutte inclinate allo stesso modo: l'angolo dentro gli strati è sei decimi di quello dell'ala, e la banda si allarga quando la luce entra di sbieco. Così il blu regge per gran parte del battito e il viola arriva solo verso il taglio.
- Appesa sotto il guscio, con le ali piccole al 24 per cento e alzate a 62 gradi, la farfalla appena nata era un bastoncino: le ali, accorciate da cos φ, quasi non si vedevano sul fondo scuro del pozzetto. Ora partono al 34 per cento e a 40 gradi, e il velo bagnato è grigio azzurro chiaro invece che bruno.
Librerie
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 15 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 13 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.
