The vase in the sun
Cards, 3D, Physics, Hover, Transitions
NewFree
All components
The dandelion button
The Add to wishlist button of a shop, with a real dandelion clock in the round end of the pill, where the icon would be: a hundred and twenty seeds set on the sphere by phyllotaxis, each with its achene, its thin beak and its umbrella of a pappus. The pointer is a breeze that makes them lean and tremble, and a quick stroke pulls one or two away. At a click a gust blows them all off, up and to the right, and every seed flies as a little parachute over the whole page; the bare receptacle stays on its stalk, the words say Saved to wishlist with a tick that draws itself, and a moment later the clock grows again.
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 dandelion button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the dandelion button: the Add to wishlist button of a shop, with a dandelion clock at its right end where an
icon would be. The seed head is drawn on a canvas, seed by seed: the pointer is a breeze that makes the seeds
lean and tremble, and the click is a gust that blows them all away, up and to the right, each one flying as a
little parachute on a second canvas over the whole page. The words say Saved to wishlist, and a moment later
the head grows its seeds again -->
<div class="wish" data-wish>
<button class="wish__btn" type="button" data-btn data-autoclic>
<span class="wish__label" data-label>
<span class="wish__face" data-face="rest"><span data-rest-text>Add to wishlist</span></span>
<span class="wish__face" data-face="done" aria-hidden="true">
<svg class="wish__tick" viewBox="0 0 20 20" aria-hidden="true"><path d="M4.4 10.6l3.6 3.5 7.6-8.2" pathLength="1" data-tick/></svg>
<span data-done-text>Saved to wishlist</span>
</span>
</span>
<canvas class="wish__head" aria-hidden="true" data-head></canvas>
</button>
<p class="sr" aria-live="polite" data-live></p>
</div>
<canvas class="wish__air" aria-hidden="true" data-air></canvas>
</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.
20 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 dandelion button” from Animorio and fit it into my siteWhat it does
On a black background a graphite pill 60 pixels tall, with a hairline edge and a thread of light along the top. On the left, in an ivory serif, Add to wishlist; in the round right end, where an icon would be, a dandelion clock: a ball of white fluff about 45 pixels across on a sage green stalk that comes up from the lower edge of the pill. Every seed is drawn in the finest lines: the brown achene near the middle, the long thin beak, and on top the pappus, a small umbrella of bristles that spread and turn up towards their tips. The seeds in front are brighter, the ones behind barely show through the fluff, the upper left side catches the light, and in the middle you glimpse the darker core of the achenes. On arrival the clock grows: the seeds sprout from the receptacle one after another along the spiral, from the top down to the stalk. At rest it barely breathes in the still air. With the mouse over the pill a breeze comes: every seed leans away from the pointer, more the closer it is, and trembles on a spring of its own; sweeping fast across the head, a gust pulls one or two seeds off, which fly away and grow back a few seconds later. At a click the gust crosses the head from the windward side: the seeds bend and let go in a wave, one after another, and leave up and to the right, away from the words, opening out like a fan. In the air each one is a parachute: the pappus turns to face the air rushing at it with the achene hanging behind, spins slowly about itself, tilts towards the viewer and away, comes nearer or drifts further, and the cloud scatters in the eddies and fades far off. The bare receptacle stays, a small pale pitted dome, with the bracts bent down along the stalk. The words rise away in a blur and Saved to wishlist comes up from below, with a tick that draws itself. After a few seconds the seeds sprout again from the middle in the order of the phyllotaxis, each with a little pop as it opens its pappus, and Add to wishlist comes back. With the keyboard the focus shows an ivory ring and a breath runs through the head; Enter or Space blow. On a phone the finger is the breeze and the tap the gust.
How it works
The head by phyllotaxis
The SEEDS seeds sit on a sphere, in steps of equal area from the top down to 146 degrees (below is the stalk), each turned from the one before by the golden angle, 137.5 degrees: the sunflower's spiral, on a ball. The axis of the flower faces up, a little to the right and towards the eye, so the head is seen a little from above. Every seed lies along its radius: the achene from the receptacle (radius 4.4) for 4 pixels, the beak for another 10.2, and there the pappus with 14 bristles 8.6 pixels long. A seed's light comes from how far in front it is and how much it faces the lamp at the upper left, in 24 levels of colour made once; the seeds behind are drawn first, then the stalk and the receptacle, then the ones in front.
The pappus in 3D
The bristles are vectors in space: cos α · axis + sin α · (cos φ · e1 + sin φ · e2), with e1 and e2 square to the seed's axis, α the opening (76 degrees) and φ going round the axis. Each bristle is a quadratic curve that leaves a little flatter and turns up at the tip, like the ribs of a small umbrella; on the screen its projection is taken. So a pappus seen face on is a star, one seen side on a fan, and the outline of the ball comes by itself. The same sums draw the seeds in flight, with the axis and the spin changing every frame.
Breeze and gust
Every seed follows, on a spring of its own (frequency 15, damping 0.32, so it trembles), the point the air would bend it to: a breath of slow Perlin noise at rest; with the pointer over it a push away from the pointer, up to 4.6 pixels and stronger within 24 pixels, plus a tremor of quick noise. The beak bends in a curve and the pappus follows. If the pointer passes at more than 700 pixels a second within 22 pixels of the middle of the head, the seed on the near side closest to its track lets go (two above 1500), the way the pointer went but turned up and to the right, and grows back after 2.4-4 seconds; ten at most are missing.
The click's gust
The wind blows up and to the right, steeper where there is little room to the right (between 32 and 78 degrees). Every seed has its own moment to go, by where it sits along the wind: from the windward side to the leeward one in 0.7 / √GUST seconds, and in the 0.2 seconds before it bends in the wind. When it goes it passes from the head's canvas to a fixed canvas the size of the window, from the same point and with the same axis, and takes its own slice of the gust's fan: a seed on the upper side of the ball goes higher, by up to half a radian, one on the lower side flatter, by up to three tenths: the cloud always rises.
The parachute's flight
In the air a seed is a body with a strong drag: a = DRAG · (air − v) + weight, so it soon takes the speed of the wind and falls slowly (36 / DRAG pixels a second). The air is the gust (250 · GUST pixels a second at its height, rising in 0.07 seconds and dying in 1.05, caught by every seed in its own measure), a steady breeze and a little rising air, the eddies of the curl of a noise field (two octaves, which never heap the seeds up) and a flutter of each pappus's own. The pappus turns on a spring to face the air rushing at it, tilts towards the eye and away, spins, and a depth makes it larger and brighter or smaller; it fades with age and with distance. Steps of 1/120 of a second, the frame capped at 1/30, and only the rectangle drawn last time is cleared.
The regrowth and the states
Rest, gust, bare head, regrowth. The bare receptacle is a dome with its dimples in a spiral and the bracts bent down; the stalk and the receptacle are lost in the fluff the fuller the head is. After HOLD seconds the seeds sprout again in order of index over 1.1 seconds, each on a spring that goes past one (frequency 14, damping 0.42): the beak comes out of the receptacle with the pappus shut and opens it with a pop. The button is aria-disabled and ignores clicks from the gust to the end of the regrowth; an aria-live region says Saved to wishlist. At rest, if it only breathes, the head is redrawn on half the frames; out of sight it stops.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
LABEL | script.js | Add to wishlist | The words at rest. If they are too long for the room left of the clock, the type gets smaller. |
DONE | script.js | Saved to wishlist | The words once the seeds have flown, with the tick; it is also what the aria-live region says. |
SEEDS | script.js | 120 | How many seeds the clock holds: fewer, the ball thins out and the stars of the single pappi show; more, it is fuller. |
GUST | script.js | 1 | How hard the click blows: 0.5 a sigh, the seeds let go slowly and rise gently; 2 a gale that sweeps them off in a moment. |
DRAG | script.js | 3.2 | How hard the air holds a seed back: higher, the seeds sink slower and follow the wind more closely; lower, they are heavier and keep their momentum. |
TURBULENCE | script.js | 1 | How much the eddies of the air turn and scatter the seeds in flight: 0, a smooth stream. |
BREEZE | script.js | 1 | How much the air stirs the seeds on the head, at rest and under the pointer: 0 they keep still (and the clock is not redrawn until something happens), and the pointer pulls none away. |
HOLD | script.js | 2.6 | The seconds the head stays bare, saying Saved to wishlist, before the seeds sprout again. |
When to use it
For the action that puts a wish aside: a shop's wishlist, favourites, saving for later, a wedding or gift list, a greeting card. The dandelion suits florists, plant and homeware shops, natural cosmetics, sites for children and for gift givers. It is a button to show off, one to a page, on a dark background; the seeds fly over the whole page, so it wants some open air above and to the right.
On phones
The pill is 60 pixels tall and 272 wide, or the screen less 32; the clock always keeps its size and the words, if they do not fit, get smaller. The finger resting on it is the breeze (the seeds lean away from it) and the tap the gust. With little room to the right the wind blows steeper, up to 78 degrees, and the seeds rise upwards; they leave by the sides of the screen without ever making it scroll, because they fly on a fixed canvas the size of the window.
With reduced motion
No flight, no breathing, no breeze or trembling and no growth on arrival. At a click the seeds fade away where they are in six tenths of a second and the bare receptacle stays; Saved to wishlist fades in with the tick already drawn. After HOLD seconds the seeds fade back and the words return to Add to wishlist. Pressed, the pill only lightens a little instead of shrinking.
Pitfalls
- The seeds flew all together in a lump, like a ball moving away: they had the same speed, and the eddies, 150 pixels wide, are the same over a cloud 50 wide. Now the gust leaves the head as a fan and every seed takes its own slice of it by where it sat on the ball, with a grip, a weight and a flutter of its own.
- With the eddies stronger than the steady breeze the seeds stalled in mid-air in a vertical line: bodies with inertia in a turning field gather where the vortex opposes the stream. Now the steady breeze is stronger (64 pixels a second against the eddies' 40), the eddies have a second, smaller and quicker octave that leaves no time to settle, and every pappus flutters on its own.
- The stalk, drawn solid, crossed the front of the ball like the stick of a lollipop: the fine strokes of the bristles do not hide what lies behind. The stalk and the receptacle are now lost in the fluff the more so the fuller the head is.
- The middle of the ball was a light, warm patch, like a lamp lit inside: lit achenes and a pale receptacle. The achenes are now darker and the receptacle, under a full head, lies in the shade of the seeds, like the brown core of a real dandelion clock.
- Seeds pulled off by a stroke of the pointer to the left flew over the words: their way is now the pointer's turned always up and to the right, and a seed near the pill, left of the head, is only lifted.
- The canvas of the seeds in flight is fixed to the window, but a fixed element inside a transformed one is no longer fixed: the entrance moves the button with a transform. The canvas sits outside the button's block.
- The bracts under the receptacle, dark and dense, looked like a cage: they are now thin, in two tones, the ones in front the colour of the stalk.
Libraries
GSAP 3.15.0, Newsreader (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 16 KB; the libraries: GSAP 28 KB.
Testing
Tested on 7 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.
