The slide-to-confirm button
Buttons, Physics, Transitions
NewFree
All components
The popping cork toast
The notification of good news, an order confirmed or a goal reached, delivered like a bottle of sparkling wine: the neck of the bottle comes in from the edge, the wire cage is untwisted and slips off, the cork pops out turning, falls and bounces away, and the golden foam gushes out with its bubbles, fills the shape of the notification and settles into its background, where the message is written. When it closes, the foam sinks back and its bubbles burst.
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, viewport-fit=cover">
<title>The popping cork toast</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the good news toast of a wine shop and a savings app, delivered like a bottle of sparkling wine: the neck of
the bottle comes in from the edge, the wire cage is untwisted and slips off, the cork creeps out and pops
(it flies, turns, falls and bounces away), and the golden foam gushes out with its bubbles, fills the shape
of the notification and settles into its background, where the message is written. When it closes, the foam
sinks back, its bubbles bursting. The bottle, the cork, the foam and the bubbles are painted by script.js
on the canvas; the words and the buttons are real HTML on top -->
<div class="cellar" data-cellar>
<div class="slot" data-slot>
<canvas class="fizz" aria-hidden="true" data-fizz></canvas>
<section class="card" aria-label="Notification" data-card inert>
<svg class="card__icon" viewBox="0 0 28 28" aria-hidden="true" data-icon>
<path class="card__wine" d="M10.9 8.2h6.2l-.35 4.2a2.75 2.75 0 0 1-5.5 0z" data-wine/>
<path class="card__glass" d="M10 3.5h8l-.62 8.9a3.4 3.4 0 0 1-6.76 0zM14 15.8v7.6M10.4 23.9h7.2" data-glass/>
</svg>
<div class="card__text">
<p class="card__title" data-title></p>
<p class="card__body" data-body></p>
</div>
<button class="card__close" type="button" aria-label="Dismiss notification" data-close>
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg>
</button>
</section>
</div>
<button class="trigger" type="button" data-trigger data-autoclic>
<span class="trigger__label" data-trigger-label></span>
</button>
<p class="sr" role="status" aria-live="polite" aria-atomic="true" 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.
34 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 popping cork toast” from Animorio and fit it into my siteWhat it does
On a black background, alone in the middle, a thin cream button, Place order. Pressing it, in the notification's place (380 by 70 pixels) the outline of its shape barely shows, and from the left edge, coming out of the dark, the neck of a green glass bottle comes in: the gold foil torn under the neck, with its folds catching the light, the burgundy band, the cork and the silver wire cage with its gold cap on top. The little loop of the cage is untwisted, turning over and over, the cage loosens and slips off, falling; the bottle tips up, the cork creeps out trembling under the pressure and then pops: it flies along the neck turning over, falls with gravity, bounces on the floor and rolls away, while a breath of gas comes out of the neck. Then the foam comes out, golden, with drops of wine and bubbles: first a strong gush, then less and less as the bottle tips down to pour and goes back. The foam lands in the shape of the notification, piles up, runs and sloshes, fills it and settles: it becomes a cushion of foam from cream at the top to gold at the bottom, full of bubbles, with its top edge broken by the bubbles and a warm light on the floor. The bubbles rise, burst at the surface and slow down until they stop. The message is written on the foam: the glass draws itself and fills, the letters of Your order is confirmed come up out of the foam one by one, thin and then full, and the line Two bottles of Brut · arriving Friday slides in widening; then the cross. With the pointer on it (or a finger) the bubbles start rising again. After five seconds, with the cross or with Esc, the words go and the foam sinks back: it goes down, dozens of bubbles burst on the falling surface, and the black is left. Meanwhile the button has moved on to the next piece of news, Add the last €40, which pops another cork for You hit your goal.
How it works
The bottle, the cork and the cage drawn on the canvas
The bottle is a profile along its axis (the round lip, the bead, the neck, the shoulder) drawn twice, above and below, and filled with a gradient across it; on top come the reflections, the foil with its torn edge, the folds that catch the light or not, and the band. The cork and the cage are drawn in the same frame: the cage's loop, seen from the side, widens and narrows with the cosine of its turn as it is untwisted. The bottle sits on a layer of its own, erased with two gradients in destination-out: so it comes out of the dark at the left and under the floor.
The cork flies with the physics of a throw
The cork leaves along the neck with a speed worked out from the equations of a throw, the one that brings it down near the far end of the notification (POP multiplies it), and a steady spin. Then it is gravity, a bounce on the floor with BOUNCE, and friction that slows the run and turns part of the speed into spin, like a rolling cork; past the edge it fades. The cage, slipped off a moment earlier, falls the same way and is gone before it reaches the button.
The spray is made of particles
While the gush is strong up to 820 particles a second leave the mouth, in a fan that opens as the push weakens: foam (lighter, slowed by the air), drops of wine and bubbles. Fast ones are drawn as streaks along their speed, slow ones as drops with a glint. The strength of the gush is a GSAP tween falling as (1 − t)², while the bottle tips down to pour.
The foam that has landed runs like a liquid
The foam that has landed is a row of columns, one every three pixels, moved by the shallow water equations on a staggered grid: the difference in height pushes the flow between two columns, the flow carries the height, with a strong damping because foam is thick and a little slumping that rounds the fronts. Each particle that lands adds its volume to the columns under it and some of its push; no column stands much taller than the notification, what is too much slides to the sides. The volume of each particle is worked out so that the gush fills about four fifths of the shape.
It settles into the shape of the notification
To settle, the columns are pulled, harder and harder, to the profile of a rounded rectangle: the notification's shape, corners and all. A dome bouncing on an elastic ease and the top edge broken by bubbles (two sines in absolute value, which calm down at rest) do the rest; the foam is painted with a gradient from cream to gold, shade at the sides and at the bottom, a sheen at the top and a warm light on the floor. On closing, the same pull takes the columns to zero and the foam sinks.
The bubbles, the words and the gestures
The bubbles are a pool of circles that rise while the foam is fresh, show only under the surface and burst into an opening ring when they reach it; when the surface goes down, they all burst. The words are real HTML over the canvas: the title's letters (Fraunces) come up with their weight growing from 250 to 620, the line under it (Instrument Sans) widens on the wdth axis. A role="status" line reads them out, the cross and Esc close it, and the time stops under the pointer, under a finger and with the keyboard's focus. The drawing loop stops by itself when nothing moves.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
MESSAGES | script.js | due, Your order is confirmed e You hit your goal | The good news, in turn: the words on the button, the title and the line under it. |
LIFE | script.js | 5 | The seconds the notification stays before its foam sinks (0: until it is dismissed); it waits under the pointer. |
PRESSURE | script.js | 0.45 | The seconds the cork creeps out, trembling, before it pops. |
POP | script.js | 1 | How hard the cork pops: 1 lands near the far end of the notification, 1.3 flies over it. |
SPIN | script.js | 20 | How fast the cork turns in the air, in radians a second. |
BOUNCE | script.js | 0.42 | How much the cork bounces when it lands: 0 not at all, 0.8 a lot. |
FOAM | script.js | 1 | How much spray comes out: 0.5 a trickle, 1.8 a gush (the notification fills the same). |
BUBBLES | script.js | 1 | How many bubbles there are in the foam: 0.3 few, 1.8 many. |
SETTLE | script.js | 0.8 | The seconds the foam takes to settle into the shape of the notification. |
FIRST | script.js | 0 | The seconds before a first cork pops by itself (0: it waits for the button). |
When to use it
For news worth a toast, one at a time: an order confirmed in a wine shop or a store, a savings goal reached, a booking for a party, a milestone in an app. The show lasts about four seconds, so it does not suit everyday notifications; for a quieter site lower FOAM and BUBBLES. The notification's place needs a little air above it, where the cork flies.
On phones
The notification takes the width of the screen minus 32 pixels (358 at 390) and below 420 pixels the gaps and the text get a little narrower; the bottle comes in a little closer to the edge and the cork's speed is worked out again from the width, so it still lands inside the notification. With a finger on the notification the bubbles start again and the time stops; the cross has a touch area bigger than the drawn one. When the size changes the foam's columns are resampled, even in the middle of the gush.
With reduced motion
No bottle, no flying cork and no spray: the foam notification fades in already settled, with its bubbles still, and the words fade in. On closing, foam and words fade out.
Pitfalls
- The particles landed on top of the pile of foam and made it grow even more: under the mouth a tower rose more than twice as tall as the notification. Now landing is measured against a height at most a little over the notification, and what is too much in a column slides to its neighbours.
- With the shallow water equations alone the fronts of the foam stayed vertical walls, like blocks: a little slumping between neighbouring columns rounds them into slopes.
- A spray of big white lumps looked like popcorn: now it is smaller cream lumps, golden drops and a few bubbles, drawn as streaks when they go fast.
- With a column every three pixels the top corners of the notification were cut off straight: when the foam settles it is also clipped to the true rounded rectangle, and the rim's highlight stops before the corners.
- Thrown at a fixed speed, on the phone the cork fell outside the notification and bounced on nothing: the speed comes from the width, with the equations of a throw, so that it lands near the far end.
- The library's preview clicks from a script: that click plays the whole round (cork, foam, message, closing) and the clicks arriving during it are ignored; Enter from the keyboard, which also has detail 0, is a real click (isTrusted) and works like the mouse.
Libraries
GSAP 3.15.0, Fraunces (font variabile) 5.3.0, Instrument Sans (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 17 KB; the libraries: GSAP 28 KB.
Testing
Tested on 17 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.
