Il vaso al sole
Card, 3D, Fisica, Hover, Transizioni
NuovaGratis
Tutti i componenti
Il pulsante a foglia d'oro
Il pulsante Upgrade to Gold di una pagina degli abbonamenti, dorato come fa un doratore: la pillola è di bolo rosso lucidato, l'argilla che si stende sotto l'oro, con le parole dorate sopra. Al clic ci vengono posati dei fogli d'oro veri, uno dopo l'altro a partire dal punto cliccato: ogni foglio scende ondeggiando, viene attirato dal bolo bagnato, ci salta sopra e si incolla con le sue grinze. Poi passa il brunitoio, le grinze si spianano, l'oro che sporge si stacca in scaglie e le parole restano incise fino al rosso: Welcome to Gold.
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 gold leaf button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/brygada-1918@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the gold leaf button: the Upgrade to Gold button of a membership page, gilded the way a gilder does it. The pill
is polished red bole, the clay laid under gold, with the words gilded on it. A click lays real sheets of gold
leaf on it, one after another: they float down, jump onto the pill and stick in wrinkles; the burnisher
presses them flat, the gold past the edge breaks off, and the words show through in the red of the bole -->
<div class="gilt" data-gilt>
<button class="gilt__btn" type="button" data-btn data-autoclic>
<canvas class="gilt__art" aria-hidden="true" data-art></canvas>
<span class="gilt__words" data-words>Upgrade to Gold</span>
</button>
<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 a foglia d'oro» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una pillola alta 60 pixel di bolo rosso lucidato, l'argilla rossa su cui i doratori stendono l'oro, con il suo spessore scuro sotto e un riflesso morbido in alto a sinistra. Sopra c'è scritto Upgrade to Gold in lettere dorate a foglia, con l'ombra scura che i pittori d'insegne mettono sotto l'oro. Col mouse sopra, una lampada a striscia segue il puntatore: sulle lettere passa un riflesso lungo che le accende fino al bianco, e il bolo lucido prende una luce morbida. Premendo, la pillola si abbassa. Al clic la scritta diventa Upgrading e i fogli d'oro arrivano dall'alto uno dopo l'altro, prima quello sopra il punto cliccato e poi i vicini: fogli quadrati più alti della pillola, sottilissimi, che scendono ondeggiando e tremando con la loro ombra sotto. Quando arrivano a pochi pixel dal bolo bagnato ci saltano sopra e si incollano dove toccano, con l'aria che avevano rimasta presa in grinze che corrono qua e là, e con l'oro che sporge oltre la pillola. Dove l'oro copre le parole, le parole diventano rosse. Quando tutti i fogli sono posati, il brunitoio passa da sinistra a destra con una striscia di luce: dietro di lui le grinze si spianano quasi del tutto, l'oro che sporge oltre il bordo si stacca in scaglie che volano via girando, e resta una pillola d'oro brunito, coi segni leggeri dei fogli, il bordo dorato e la scritta Welcome to Gold incisa fino al bolo. La lampada a striscia ci scorre sopra seguendo il puntatore. Dopo qualche secondo, o con un altro clic, il vento solleva l'oro dal lato sinistro, foglio dopo foglio: i fogli si arricciano, volano via in alto e svaniscono, e tornano le lettere dorate di Upgrade to Gold. Con la tastiera il fuoco mostra un anello e un riflesso corre sulle lettere; Invio o Spazio dorano la pillola a partire dal centro. Al telefono il tocco dora a partire dal dito, e la lampada segue il dito mentre preme.
Come funziona
Un foglio d'oro è una stoffa
Ogni foglio è una griglia di 15 × 15 punti mossi con Verlet, quattro passi per fotogramma, legati ai vicini (non si allunga), in diagonale (non si deforma) e ai punti a due di distanza con una rigidezza di 0,08 (si piega quasi senza resistenza, come la foglia vera). Le lunghezze dei legami sono quelle del foglio in volo: un'onda morbida con due o tre rigonfiamenti e una ruvidità fine. Così in aria il foglio resta liscio, e solo quando viene schiacciato sul piano quell'onda diventa grinze. L'inclinazione del foglio in volo è una rotazione, che non allunga nessun legame, e i punti interni sono un po' fuori riga, così le grinze non corrono lungo le diagonali della griglia.
L'aria e il bolo bagnato
Il foglio è tirato verso la pillola, frenato dall'aria e mosso da una brezza che cambia lungo il foglio, così ondeggia. L'aria frena molto di più contro la faccia del foglio che lungo di essa: un foglio inclinato plana di lato. Una piccola forza sul punto di mezzo lo guida al suo posto, come fa il pennello del doratore. A meno di 7 pixel dal bolo il foglio viene tirato giù con forza: ci salta sopra, e ogni punto che tocca il bolo si incolla lì dove si trova, tirato appena verso il primo punto che ha toccato. Il resto del foglio deve scendere intorno ai punti già incollati, e la stoffa in più resta in creste.
Il brunitoio
Quando tutti i fogli sono fermi, il brunitoio corre lungo la pillola in mezzo secondo: dietro di lui ogni punto scende al 15% della sua altezza (BURNISH 0,85), con una striscia di luce dove passa. I triangoli del foglio che stanno tutti fuori dalla pillola si staccano in scaglie, che volano via girando su un asse a caso (formula di Rodrigues) e svaniscono; il resto dell'oro si ritaglia sulla forma della pillola. Alla fine il bordo della pillola diventa dorato anche lui.
La luce sull'oro
Ogni triangolo è una faccetta piana con la sua normale. La luce che manda all'occhio è quella della stanza che riflette (un cielo morbido e una finestra in alto a sinistra), un po' di luce diffusa, e il riflesso di una lampada a striscia che segue il puntatore: un lobo anisotropo, alla maniera di Ward, largo lungo la pillola e stretto di traverso, così il riflesso sull'oro brunito è una banda e non un tondo. L'intensità sceglie uno di 128 livelli di una rampa d'oro fatta una volta dai colori del CSS, e i triangoli dello stesso livello si riempiono con un solo tracciato, un pelo più grandi del vero perché fra due vicini non resti una fessura. Le ombre dei fogli in volo si disegnano a un quarto della misura e si ingrandiscono, così vengono morbide.
Le parole in due materiali
Le parole sono una maschera disegnata sul canvas in Brygada 1918 e usata due volte. Dove sotto non c'è oro sono lettere dorate: le stesse faccette illuminate dalla stessa lampada, ritagliate sulla maschera, con un'ombra scura sotto. Dove l'oro le copre, anche un foglio ancora in volo, sono lettere del colore del bolo con il taglio dell'oro acceso sotto ogni lettera. Il confine lo decide l'alfa del livello dell'oro, con destination-in e destination-out, quindi le lettere cambiano materiale pixel per pixel mentre l'oro arriva o se ne va, e non sono mai coperte.
Gli stati
A riposo, mentre si dora (aria-busy, la scritta Upgrading), dorato (la classe is-gold, una zona aria-live che dice Welcome to Gold), mentre l'oro vola via, e di nuovo a riposo. Un clic mentre l'oro arriva o se ne va non fa niente. Dopo HOLD secondi, o con un clic, il vento libera i punti di ogni foglio da sinistra a destra, con un piccolo salto: il foglio si solleva, si arriccia e svanisce, disegnato intero su un canvas a parte perché le faccette sovrapposte non mostrino la rete. Quando niente si muove e la lampada è ferma, il canvas non si ridisegna.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
BUSY | script.js | Upgrading | La scritta mentre si posa l'oro. |
DONE | script.js | Welcome to Gold | La scritta quando la pillola è dorata. |
HOLD | script.js | 3.4 | I secondi in cui la pillola resta dorata prima che il vento porti via l'oro da solo; 0, resta dorata finché non la si clicca. |
LEAF | script.js | 74 | Il lato di un foglio d'oro, in pixel: più piccolo, i fogli sono di più (sotto l'altezza della pillola, in due file). |
STAGGER | script.js | 0.08 | I secondi fra un foglio e il successivo. |
DRIFT | script.js | 1 | Quanto i fogli ondeggiano e tremano scendendo: 0, scendono dritti. |
CRUMPLE | script.js | 1 | Quante grinze fanno i fogli posandosi: 0 il meno possibile (qualcuna la fa sempre la brezza), 2 stropicciati. |
BURNISH | script.js | 0.85 | Quanto il brunitoio spiana le grinze: 1 uno specchio, 0 restano tutte. |
SHINE | script.js | 1 | Quanto è forte il riflesso della lampada sull'oro: 0, oro opaco. |
LAMP | script.js | 1 | Quanto la lampada segue il puntatore: 0, resta ferma in alto a sinistra. |
Quando usarla
Per il passaggio a un piano più alto o a un livello di fedeltà: Upgrade to Gold, Become a member, Go premium, l'oro di un premio o di un traguardo. Sta bene dove l'oro è di casa: gallerie, corniciai e restauratori, legatorie, gioiellerie, liquori e profumi, inviti per le nozze d'oro. È un pulsante da far vedere, uno per pagina, non da mettere in una barra di comandi.
Sul telefono
La pillola è alta 60 pixel come gli altri pulsanti e larga 320, o lo schermo meno 32; il canvas sporge di 34 pixel ai lati e di 48 sopra e sotto, per i fogli ancora in volo, e la pagina non scorre di lato. Il tocco dora a partire dal dito, e la lampada segue il dito mentre preme. La fisica è la stessa del computer.
Con il movimento ridotto
Niente fogli che scendono, niente scaglie e niente vento. Al clic l'oro compare già posato e brunito in una dissolvenza di mezzo secondo, e se ne va con la stessa dissolvenza al contrario; le scritte cambiano in dissolvenza, una dopo l'altra, senza scivolare. La lampada continua a seguire il puntatore, perché cambia solo la luce sull'oro e non sposta niente. Premuta, la pillola si scurisce appena invece di rimpicciolire.
Trappole
- I primi fogli sembravano carta stagnola appallottolata, e fra un foglio e l'altro restavano buchi rossi: i legami avevano la lunghezza di un foglio tutto stropicciato, il risolutore lo schiacciava già in aria e un foglio accartocciato copre meno. Ora i legami prendono la lunghezza dalla forma del foglio in volo, un'onda morbida con una ruvidità fine: in aria resta liscio e fa le grinze solo quando viene schiacciato sul bolo.
- Inclinare il foglio sommando x per una pendenza all'altezza allungava ogni legame fino all'1%: il risolutore lo accorciava e il foglio si raggrinziva in volo. L'inclinazione è una rotazione, che non allunga niente.
- Le grinze correvano a scalini lungo le diagonali della griglia e si vedeva che erano triangoli: i punti interni sono un po' fuori riga, così le pieghe girano come quelle vere.
- I fogli che svanivano mostravano la rete dei triangoli: le faccette vicine si sovrappongono di un pelo per non lasciare fessure, e trasparenti si sommavano. Un foglio che svanisce si disegna intero su un canvas a parte e svanisce tutto insieme.
- Il riflesso della lampada sull'oro brunito era un tondo bianco che seguiva il puntatore, e sembrava un pallino luminoso. La lampada è una striscia, col lobo anisotropo di Ward: il riflesso è una banda lunga e stretta, come una finestra su una doratura. E cadeva sotto il puntatore, perché l'occhio guarda un po' da davanti: la lampada sta più avanti, così il riflesso cade dove c'è il puntatore.
- Col movimento ridotto le due scritte in dissolvenza nello stesso posto si sovrapponevano in una parola illeggibile: la vecchia se ne va e poi arriva la nuova. E la dissolvenza dell'oro si fa dentro il livello dell'oro, così le lettere cambiano colore insieme all'oro che compare.
- Il filo di luce sul bordo della pillola, che sta sopra il canvas perché si veda anche sull'oro, si vedeva pure sopra i fogli ancora in aria, come la sagoma della pillola in trasparenza: mentre l'oro arriva o se ne va il bordo si spegne.
Librerie
GSAP 3.15.0, Brygada 1918 (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 18 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.
