The slide-to-confirm button
Buttons, Physics, Transitions
NewFree
All components
The fogged glass toast
The notification of a payment with Undo, where the time to undo is breath on glass: the dark glass notification slides out from under the button and fogs up, a fingertip writes Undo in the condensation, and the fog evaporates from its edges in towards the word. When even the outline of the word has gone the payment is done; Undo wipes the glass with one swipe and puts the payment back in the button.
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 fogged glass toast</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/golos-text@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the pay button of a money app and, under it, the notifications of the payments, made of dark glass. Each one
fogs up as it comes out, like a cold glass breathed on, and a fingertip writes Undo in the fog: that patch is
the Undo button, and the time to undo is the fog clearing from its edges. When the last of it has gone, the
payment is final. The button's words and the notifications are made by script.js, from PAYMENTS -->
<div class="wallet" data-wallet>
<button class="pay" type="button" data-pay data-autoclic>
<span class="pay__label" data-label></span>
</button>
<section class="stack" aria-label="Payments" data-stack>
<ol class="stack__list" data-list></ol>
</section>
<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.
33 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 fogged glass toast” from Animorio and fit it into my siteWhat it does
On a black background an ivory button 60 pixels tall, Send €24.00 to Mara. Pressing it, the notification of the payment slides out from under the button, a plate of dark glass 70 tall: Sent €24.00 to Mara, Train tickets to Lyon and the cross. As it comes out, the glass on the right fogs up from the middle outwards like a cold glass breathed on, and a fingertip writes Undo in the condensation, letter after letter: where the finger passes the glass is dark and clean again, and on both sides of its trail a lighter line of water is left. That patch of condensation is the Undo button. Then the fog evaporates: it draws back from its edges towards the word, faster and faster, until only the outline of the word is left, where the water pushed aside by the finger is thicker, and in the end that goes too. With the glass clear the payment is done: the tick of Paid draws itself where the fog was and the notification goes. Meanwhile the button’s words have moved on to the next payment. Undo wipes the fog off with one swipe from left to right: the notification says Payment canceled, €24.00 is back in your wallet, with the mark of Undo where the fog was, and slides back in under the button, which offers the same payment again. With the pointer on a notification, the keyboard’s focus inside or a finger holding it, the fog stops evaporating. Payments line up under the button, the newest on top, three at most: one more closes the oldest at once, and it is pushed out at the bottom. The cross or Esc close a notification, and its fog evaporates at once. When the page opens a first payment goes by itself.
How it works
Breath on glass
Condensation is a film of water made of tiny drops, and every pixel of the patch knows how much water it holds. The breath leaves more in the middle and less and less towards the edge: the thickness falls as 1 − d³, with d the distance from the middle of a rounded rectangle (a superellipse), made uneven by two octaves of noise, so the edge is ragged like a real breath’s. The patch is painted at up to twice its CSS size, so it stays sharp on dense screens.
It evaporates at the same pace everywhere
Every second the same amount of water goes from every point: the water left is the thickness minus the rate times the time. So the glass clears first where there was less water, at the edges, and the clear edge moves in towards the word, faster and faster because the thickness is flat in the middle. The rate comes from the thickest point, so the glass is clear exactly LIFE seconds later. The fog’s time adds up only when nothing holds it.
The fingertip writes Undo
The word is a handwritten path of nineteen cubic curves, broken into points each with the length so far. The finger draws it in WRITE seconds on a hidden canvas, with round ends, up to where it has got; then two masks are read back: the trail (no water left there) and the trail widened, the two lines of water pushed to its sides. On those lines the water is RIM times the thickest breath, the same all along the word: the word’s outline is the last thing to go, and it goes all at once.
Light in the drops
Where there is still water the drops scatter light: the opacity rises with a smoothstep over the last EDGE of the water (the soft edge), is a little more transparent where the film is thin, and has the grain of the drops, a random value per pixel softened with its neighbours. It is all written into an ImageData and painted with putImageData; the patch is repainted only when something has changed.
The breath settling, and the swipe
Coming out, the fog appears from the middle outwards in BREATH seconds, then the finger writes. Undo is a swipe: a stroke 46 pixels wide that crosses the patch from left to right in 0.28 seconds and takes the water away where it passes; what is left fades in 0.2 seconds, and the patch gives its place to the mark of Undo. Closed with the cross, the water left evaporates in a quarter of a second while the notification fades.
The line and the time
The notifications are list items, the newest at the top, 80 pixels apart; they come out from under the button because the pile is cut by a clip-path right at its bottom edge, and Undo takes them back in there. The time stops with the pointer on a notification (also in the gap between two, kept by a pseudo-element), with the keyboard’s focus inside (only :focus-visible, because a click also focuses the button), with a finger holding it and with the page hidden. Past MAX payments the oldest closes at once. A role="status" line reads the words out, Undo is reached with the Tab key and Esc closes the newest notification.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
LIFE | script.js | 6 | The seconds to undo a payment: as long as its fog lasts (it waits under the pointer). |
BREATH | script.js | 0.4 | The seconds the glass takes to fog up. |
WRITE | script.js | 0.6 | The seconds the fingertip takes to write Undo in the fog. |
RIM | script.js | 1.1 | The water the finger pushes beside its trail, against the thickest breath: at 1 the word goes with the rest, higher and its outline stays longer. |
EDGE | script.js | 0.05 | How soft the edge of the drawing-back fog is: 0.01 sharp, 0.3 blurred. |
GRAIN | script.js | 0.06 | The grain of the tiny drops: 0 smooth, 0.3 coarse. |
HOLD | script.js | 1.4 | The seconds a notification stays after Paid or after Undo. |
MAX | script.js | 3 | How many payments can wait at once: one more closes the oldest at once. |
FIRST | script.js | 0.8 | The seconds before a first payment goes by itself (0 for none). |
CURRENCY | script.js | € | The sign before the amounts. |
PAYMENTS | script.js | quattro, da Mara Ilić 24 a Jonah Petit 9.20 | Who is paid, in turn: the name, the amount and the note. |
When to use it
For an action that moves something precious and can still be undone for a few seconds: a payment, paying a friend back, a tip, a one-click purchase. A few notifications at a time, with a line of title and one of detail; the fog drawing back says how much time is left with no number and no bar, and reads even when small.
On phones
The column takes the width of the screen minus 32 pixels (358 at 390) and the fog is painted at up to twice its size. With a finger on a notification the fog stops evaporating for as long as the finger stays; the Undo patch is a 112 by 52 pixel target and the cross has a touch area bigger than the drawn one.
With reduced motion
No spreading breath and no writing finger: the fog fades in with the word already written, and it still evaporates from its edges, which thin out where they are with nothing moving. Undo makes the fog fade instead of the swipe; the notifications fade in and out and the button’s words change in a fade.
Pitfalls
- With the fog fading out slowly (1 − e^(−water/softness)) the visible patch shrank long before the water did: at a third of the time half of it had gone and the time could not be read. Now the fog is full as long as there is water, with a narrow soft edge (EDGE of the thickest water), and only gets a little more transparent where the film is thin.
- With the finger’s lines of water proportional to the breath under them, the ends of the word, where the breath is thinner, went first and the word read “nd”. Now the water on those lines is the same all along the word (RIM times the thickest breath) and the outline goes all at once.
- A thickness measured from the word’s box made the fog a grey rectangle, more a label than a breath. The patch is now round and ragged, with a thickness of 1 − d³: flat in the middle, so it stays large for a while and then draws back faster and faster.
- The word written too big (94 pixels in 112) reached the edges, where the fog is thin, and read “Indo”: 60 pixels wide it sits well inside the fog.
- Undo pressed from the keyboard disabled the button with the focus on it, and the focus ended up on the body. Now keyboard focus moves to the cross before the patch is disabled; focus left by a click or a tap is let go, and only the keyboard’s focus stops the time, or after a tap on Undo the notification never left.
- The grain as a random value per pixel looked like a television’s snow: softened with its neighbours and lighter, it looks like drops.
Libraries
GSAP 3.15.0, Golos Text (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 12 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.
