Undo Snackbar

A snackbar whose deadline is drawn along its edge and stops the moment your pointer arrives.

Message moved to Archive

5s left · hover to hold

Build an undo snackbar with a visible, pausable deadline. Structure: a dark bar with the message on the left, an Undo action on the right, and a thin progress rail along the bottom edge. Two things make this different from a toast: 1. THE DEADLINE IS DRAWN. The rail shrinks from 100% to 0 over the bar's lifetime (about 5s), updated on a 100ms interval with a linear width transition. Without it the bar vanishes for no visible reason and reads as a glitch rather than an expiry. 2. THE TIMER PAUSES UNDER THE POINTER. Wire onMouseEnter/onMouseLeave AND onFocus/onBlur to a paused flag that stops the interval. A bar that keeps counting while the cursor is on it takes the undo away from the one person who was already reaching for it - and the focus handlers give a keyboard user the same reprieve. Change the rail's colour while paused so the hold is visible, not just felt. Give the Undo action a hit area larger than its text using padding with matching negative margins, so the target grows without moving the layout. It is the reason the bar exists. The bar slides up from y 26 on a spring (stiffness ~320, damping ~28) and exits the same way. Accessibility: the message is aria-live="polite", announced once. Do NOT make the countdown live - a ticking live region is unusable. Under prefers-reduced-motion, render the bar in place with no timer and no slide; an auto-expiring bar is itself a motion problem. Colors as tokens: ink bar, paper text, one accent for the Undo action and the running rail. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.

Rate it
0
0

We'd like to measure how the site gets used, with Google Analytics. It sets cookies. Everything the site needs to work runs either way. How we handle data