The vase in the sun
Cards, 3D, Physics, Hover, Transitions
NewFree
All components
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. At a click real sheets of gold leaf are laid on it, one after another from the point clicked: each sheet floats down rippling, is drawn down by the wetted bole, jumps onto it and sticks with its wrinkles. Then the burnisher passes, the wrinkles are pressed flat, the gold sticking out breaks off in flakes and the words stay cut through to the red: Welcome to Gold.
The code
A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN. The React and Vue tabs hold the same demo as a ready component, which switches its animations off when it leaves the page.
<!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
Change values, colours and text with the controls and watch the animation respond live. Or write in the code yourself. Then download the folder with your changes.
21 values to change
Or ask Claude Code for it
With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:
Take “The gold leaf button” from Animorio and fit it into my siteWhat it does
On a white background a pill 60 pixels tall of polished red bole, the red clay gilders lay gold on, with its dark edge underneath and a soft sheen up at the left. On it Upgrade to Gold in gold leaf letters, with the dark shade sign writers put under gold. With the mouse over it, a strip lamp follows the pointer: a long glint runs over the letters and lights them up to white, and the polished bole takes a soft light. Pressed, the pill sinks. At a click the words turn to Upgrading and the sheets of gold come down one after another, first the one over the point clicked and then its neighbours: square sheets taller than the pill, very thin, that float down rippling and trembling with their shadow under them. When they come within a few pixels of the wetted bole they jump onto it and stick wherever they touch, with the air they had trapped in wrinkles that run here and there, and with gold sticking out past the pill. Where the gold covers the words, the words turn red. Once every sheet is laid, the burnisher runs from left to right with a streak of light: behind it the wrinkles are pressed almost flat, the gold past the edge breaks off in flakes that fly away turning over, and what is left is a pill of burnished gold, with faint marks of the sheets, a gilded edge and the words Welcome to Gold cut through to the bole. The strip lamp runs over it following the pointer. After a few seconds, or at another click, the wind lifts the gold from the left side, sheet after sheet: the sheets curl up, fly away upwards and fade, and the gilded letters of Upgrade to Gold come back. With the keyboard the focus shows a ring and a glint runs over the letters; Enter or Space gild the pill from the middle. On a phone a tap gilds from the finger, and the lamp follows the finger while it presses.
How it works
A sheet of gold is a cloth
Every sheet is a grid of 15 × 15 points moved with Verlet, four steps a frame, linked to their neighbours (it does not stretch), across the cells (it does not shear) and to the points two away with a stiffness of 0.08 (it bends with almost no resistance, as real leaf does). The lengths of the links are those of the sheet in flight: a soft wave with two or three swells and a fine roughness. So in the air the sheet stays smooth, and only when it is pressed onto the flat does that wave turn into wrinkles. The tilt of the sheet in flight is a rotation, which stretches no link, and the inner points are a little out of line, so the wrinkles do not run along the diagonals of the grid.
The air and the wet bole
The sheet is drawn towards the pill, held back by the air and moved by a breeze that changes along it, so it ripples. The air holds back the face of the sheet much more than its length: a tilted sheet glides sideways. A small force on its middle point steers it to its place, as the gilder's brush does. Within 7 pixels of the bole the sheet is drawn down hard: it jumps onto it, and every point that touches the bole sticks where it is, pulled just a little towards the first point that touched. The rest of the sheet has to come down round the points already stuck, and the spare cloth stays up in ridges.
The burnisher
Once every sheet is still, the burnisher runs along the pill in half a second: behind it every point goes down to 15% of its height (BURNISH 0.85), with a streak of light where it passes. The triangles of a sheet that lie wholly outside the pill break off in flakes, which fly away turning about a random axis (Rodrigues' formula) and fade; the rest of the gold is clipped to the shape of the pill. At the end the edge of the pill turns gold too.
The light on the gold
Every triangle is a flat facet with its own normal. The light it sends to the eye is the room it reflects (a soft sky and a window up at the left), a little diffuse light, and the glint of a strip lamp that follows the pointer: an anisotropic lobe, in Ward's manner, wide along the pill and narrow across it, so the glint on burnished gold is a band and not a round spot. The intensity picks one of 128 levels of a gold ramp made once from the CSS colours, and the triangles of the same level are filled with a single path, a hair larger than they are so no gap is left between neighbours. The shadows of the sheets in flight are drawn at a quarter of the size and enlarged, so they come out soft.
The words in two materials
The words are a mask drawn on the canvas in Brygada 1918 and used twice. Where there is no gold under them they are gilded letters: the same facets lit by the same lamp, cut to the mask, with a dark shade underneath. Where gold covers them, even a sheet still in flight, they are letters the colour of the bole with the cut edge of the gold lit under each letter. The border is set by the alpha of the gold layer, with destination-in and destination-out, so the letters change material pixel by pixel as the gold comes or goes, and they are never covered.
The states
At rest, gilding (aria-busy, the words Upgrading), gilded (the is-gold class, an aria-live region saying Welcome to Gold), while the gold blows away, and at rest again. A click while the gold comes or goes does nothing. After HOLD seconds, or at a click, the wind frees the points of each sheet from left to right, with a little jump: the sheet lifts, curls and fades, drawn whole on a canvas of its own so its overlapping facets do not show as a net. When nothing moves and the lamp is still, the canvas is not drawn again.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
BUSY | script.js | Upgrading | The words while the gold is laid. |
DONE | script.js | Welcome to Gold | The words once the pill is gilded. |
HOLD | script.js | 3.4 | The seconds the pill stays gilded before the wind takes the gold off by itself; 0, it stays gilded until it is clicked. |
LEAF | script.js | 74 | The side of a sheet of gold, in pixels: smaller, there are more sheets (below the height of the pill, in two rows). |
STAGGER | script.js | 0.08 | The seconds between one sheet and the next. |
DRIFT | script.js | 1 | How much the sheets sway and ripple on the way down: 0, they come straight down. |
CRUMPLE | script.js | 1 | How wrinkled the sheets land: 0 as few as can be (the breeze always leaves some), 2 crumpled. |
BURNISH | script.js | 0.85 | How flat the burnisher presses the wrinkles: 1 a mirror, 0 they all stay. |
SHINE | script.js | 1 | How strong the lamp's glint on the gold is: 0, matte gold. |
LAMP | script.js | 1 | How closely the lamp follows the pointer: 0, it stays still up at the left. |
When to use it
For moving up to a higher plan or loyalty tier: Upgrade to Gold, Become a member, Go premium, the gold of an award or a milestone. It belongs where gold is at home: galleries, framers and restorers, bookbinders, jewellers, spirits and perfumes, invitations to a golden wedding. It is a button to show off, one to a page, not one for a toolbar.
On phones
The pill is 60 pixels tall like the other buttons and 320 wide, or the screen less 32; the canvas reaches 34 pixels past the sides and 48 above and below, for the sheets still in flight, and the page does not scroll sideways. A tap gilds from the finger, and the lamp follows the finger while it presses. The physics is the same as on a computer.
With reduced motion
No sheets coming down, no flakes and no wind. At a click the gold appears already laid and burnished in a half-second fade, and goes with the same fade backwards; the words change in a fade, one after the other, without sliding. The lamp still follows the pointer, since it only changes the light on the gold and moves nothing. Pressed, the pill darkens a little instead of shrinking.
Pitfalls
- The first sheets looked like crumpled kitchen foil, and red holes were left between one sheet and the next: the links were as long as those of a crumpled sheet, the solver crushed it already in the air, and a crumpled sheet covers less. Now the links take their length from the sheet's shape in flight, a soft wave with a fine roughness: in the air it stays smooth, and it only wrinkles when it is pressed onto the bole.
- Tilting the sheet by adding x times a slope to its height stretched every link by up to 1%: the solver shortened them and the sheet crinkled in flight. The tilt is a rotation, which stretches nothing.
- The wrinkles ran in steps along the diagonals of the grid and showed they were triangles: the inner points are a little out of line, so the folds wander as real ones do.
- Sheets fading out showed the net of their triangles: neighbouring facets overlap by a hair so no gap is left, and when translucent they added up. A fading sheet is drawn whole on a canvas of its own and fades all at once.
- The lamp's glint on burnished gold was a white round spot following the pointer, and it looked like a glowing dot. The lamp is a strip, with Ward's anisotropic lobe: the glint is a long narrow band, like a window on gilding. And it fell below the pointer, since the eye looks a little from the front: the lamp stands further ahead, so the glint falls where the pointer is.
- With the motion reduced, the two words fading in the same place overlapped into one unreadable word: the old ones go and then the new ones come. And the gold's fade is done inside the gold layer, so the letters change colour together with the gold appearing.
- The thread of light on the rim of the pill, which sits over the canvas so it shows on the gold too, also showed over the sheets still in the air, like the outline of the pill seen through them: while the gold comes or goes the rim goes out.
Libraries
GSAP 3.15.0, Brygada 1918 (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 18 KB; the libraries: GSAP 28 KB.
Testing
Tested on 12 October 2026
- Desktop: Done
- Phone: Done
- Reduced motion: Done
- Safari on iPhone: To do
License
Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.
