The layered button
Buttons, Hover, Physics
Free
All components
The sensitive plant button
The Pause notifications button of a team chat app, with a living leaf of mimosa pudica inside, the plant that folds its leaflets when you touch it. A pointer brushing it makes the pairs of leaflets round it fold shut, in a wave that runs along the leaf and dies out on the way. At a click the signal runs down the whole leaf: every pair folds in turn, the leaf droops, evening falls on the pill and the notifications are paused. Then the leaf wakes, one pair after another.
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 sensitive plant button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/rosario@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the sensitive plant button: the Pause notifications button of a team chat app, with a living leaf of mimosa
pudica inside, the plant that folds its leaflets shut when it is touched. Its two pinnae wrap round the words;
the pointer brushing them makes the leaflets fold away in a ripple, and a click sends the signal down the
whole leaf: every pair folds shut, the leaf droops, and the notifications are paused -->
<div class="mimosa" data-mimosa>
<button class="mimosa__btn" type="button" data-btn data-autoclic>
<canvas class="mimosa__shade" aria-hidden="true" data-shade></canvas>
<canvas class="mimosa__leaf" aria-hidden="true" data-leaf></canvas>
<canvas class="mimosa__leaf mimosa__ghost" aria-hidden="true" data-ghost></canvas>
<span class="mimosa__dusk" aria-hidden="true" data-dusk></span>
<span class="mimosa__label" data-label>
<span class="mimosa__words" data-words>Pause notifications</span>
</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.
24 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 sensitive plant button” from Animorio and fit it into my siteWhat it does
On a white background a pill 60 pixels tall, light sage, lit from the upper left. From the left comes the reddish stalk of a mimosa pudica leaf, which splits into two pinnae: two feathers of long narrow leaflets in pairs, almost touching, that open in a fork and then run along the pill, one above and one below the words Pause notifications. Every leaflet has its vein and its soft shadow on the pill, and no two are quite the same green. With the mouse over it the pill lifts a little; the pointer passing over the leaf touches it: the pairs under it fold shut, turning up and leaning towards the tip of the feather, each leaflet against its partner, and a wave of closing runs back and forth along the feather and dies out after a few pairs; passing quickly the wave goes further, and a fast stroke near the joint makes the whole leaf droop. After a second the leaflets open again, slowly, leaning forward as the real ones do. Pressing, the pill sinks and the pairs under the finger fold at once. At a click the words turn to Pausing and the signal starts from the point touched: it runs both ways along the feather, crosses the joint into the other feather, and every pair folds in turn, until the two feathers are two braided cords of olive green, glowing with the light that comes through the leaflets. Then the leaf droops with a little bounce, its shadow tightens under it, and a cool evening light falls on the pill from the right. The words turn to Paused for 1 hour, a little lighter. After a few seconds, or at another click, the evening goes, the leaf rises and the pairs open one after another from the joint to the tips, and the words go back to Pause notifications. The leaf also arrives shut and wakes. With the keyboard the focus shows a green ring and a breath runs along the leaf; Enter or Space pause, and the signal starts from the stalk. On a phone a finger drawn over the leaf touches it like the mouse, and a tap pauses from where it touched.
How it works
The leaf
The stalk comes in from the left and splits at the joint into two pinnae. The rib of each pinna leaves at 27 degrees and bends on a quadratic curve until it runs along the pill, then curls in a pixel and a half towards the tip. The pairs of leaflets sit every SPACING pixels from 9 pixels past the joint: 138 pairs in a pill 340 wide. The leaflets are a little smaller near the joint and much smaller at the tip. The rib runs where the inner leaflets leave the band of the words free, and the words go in the longest stretch where both pinnae, with leaflets of their real size at that point, let them through.
The signal
A touch is a signal with an energy of its own, at a place on the leaf. Distance is measured along the leaf: on the same pinna along the rib, between the two pinnae down one and up the other through the joint. Every pair reached with energy − distance / 150 ≥ 0.1 folds at the moment the signal gets there, at SPEED pixels a second; if at the joint the energy is still 0.9, the whole leaf droops. A pair that has folded cannot fold again until it has opened past half. The pointer gives an energy that grows with its speed up to 900 pixels a second, 0.1 + REACH · (0.07 + 0.8 · v / 900); a press 0.42; a click 99, which reaches everywhere and folds even the pairs that are opening again.
Every leaflet in 3D
A leaflet is a blade that turns about the rib by an angle from 0 to 92 degrees, while its axis leans towards the tip of the pinna from 70-78 degrees (open) to 42. That gives three vectors: along the leaflet, across it towards the tip, and the normal of its upper side. The view is from above but a little from the front (a point h high rises on the screen by 0.34 · h), and the leaflet is drawn on the canvas with its own setTransform, an affine made of two of those vectors. Its shadow is the same shape projected on the pill along the direction of the lamp, on a second canvas blurred by the CSS.
Light and colour
It works out which side the eye sees and how much light reaches it from the lamp at the upper left: the upper side is full green, the underside paler. A side seen from away from the lamp is lit from behind, yellow-green, like a thin leaf against the light: that is what makes the closed feathers glow. The shading is 40 levels of light for each of the three colours, made once as gradients in the leaflet's own units, so the gradient follows it through its transform. Every leaflet has a small fixed shift of tint of its own.
The springs
Every leaflet follows its target on a spring: to fold, a quick spring with a little bounce (damping 0.58, frequency 2.5 / SNAP), to open, a slow one with no bounce (4.6 / WAKE). The spring is chosen by the target, not by the position, so the bounce of the fold comes back quickly. The sums run on GSAP's ticker in steps of 1/240 of a second, with the frame capped at 1/30. The whole leaf too drops on a spring with a bounce and rises on a slow one; drooping, the height it casts its shadow from goes down and, seen from above, it gets a little shorter towards the stalk.
The states
At rest, closing, paused, waking. While paused the times for opening again are held; waking, the leaf rises and the pairs start to open one after another, from the joint to the tips, over three quarters of a second. The evening is a veil in multiply over the leaf and under the words. The words change with a blur and a slide, their weight goes from 560 to 470 while paused, and they keep the width of the longest of them; the button has aria-busy while it closes, and an aria-live region says Notifications paused for 1 hour and Notifications on. When nothing moves the canvas is not drawn again.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
BUSY | script.js | Pausing | The words while the leaf folds shut. |
DONE | script.js | Paused for 1 hour | The words once the leaf has closed. |
HOLD | script.js | 4 | The seconds it stays paused before the leaf wakes by itself (a click wakes it sooner). |
SPEED | script.js | 320 | How fast the signal runs along the leaf, in pixels a second: lower, the wave of closing is seen passing more slowly. |
REACH | script.js | 1 | How far a touch of the pointer carries along the leaf: 0, the leaf takes no notice. |
SNAP | script.js | 0.15 | The seconds a leaflet takes to fold shut. |
WAKE | script.js | 2.2 | The seconds a leaflet takes to open again. |
LINGER | script.js | 1.3 | The seconds a touched leaflet stays shut before it starts to open. |
LEAFLET | script.js | 8.6 | The length of the leaflets, in pixels: the pinnae spread or close in to always leave room for the words. |
SPACING | script.js | 3.9 | The room between one pair of leaflets and the next, in pixels: wider, the feather turns into a fishbone. |
DROOP | script.js | 1 | How far the whole leaf droops when it closes: 0, not at all. |
When to use it
For the action that silences, holds or puts something to sleep: pausing notifications, do not disturb or focus mode, snoozing a reminder, quiet hours, the night setting of a smart home. It belongs in wellness and meditation apps, nurseries and plant shops, botany sites and wherever calm is the product. It is a button to show off, one to a page, not one for a toolbar.
On phones
The pill is 60 pixels tall and 340 wide, or the screen less 32; the leaf is built again at the real width, with fewer pairs (112 on a 320 phone) and the words always between the two pinnae, smaller only if they do not fit. A finger drawn over the leaf touches it like the mouse (touch-action: pan-y, so up and down the page still scrolls); a tap folds the pairs under the finger and pauses starting from there.
With reduced motion
No waves, no leaflets moving, no drooping leaf, no breath on focus, and the pointer folds nothing. At a click the open leaf fades away in half a second over the closed one, while the evening falls; the words change in a fade, and waking is the same fade backwards. Pressed, the pill darkens a little instead of shrinking.
Pitfalls
- The shadows fell towards the lamp instead of away from it: there was a pale halo above the leaflets and a light band over the stalk. The shadow of a point h high falls at P + h · (−Lx/Lz, −Ly/Lz), away from the lamp, and the same goes for the vectors of the shadow's affine.
- The words ended up outside the leaf, cut against the right edge: the test of where the words have room had half a pixel of difference between top and bottom and never passed. Now the room is the longest stretch where the inner leaflets of both pinnae, at their real size at that point, leave the band of the words free.
- With the pairs 5.4 pixels apart the feather looked like a fishbone or a fern; at 3.9, almost touching as in the real plant, it reads as a mimosa.
- The first pairs, right at the joint, crossed the leaflets of the other pinna in an X: the pairs start 9 pixels from the joint.
- The closed feather was a dark, dead line: seen a little from the front, the sides in view are the ones turned away from the lamp, and leaflets folded almost along the rib disappeared. Now the folded ones stay leaning 42 degrees towards the tip (the herringbone of the real plant) and a side seen against the light is lit from behind, yellow-green.
Libraries
GSAP 3.15.0, Rosario (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 13 KB; the libraries: GSAP 28 KB.
Testing
Tested on 6 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.
