Feedback & States

Hold to Confirm

Press-and-hold fills a tick-marked ring; full hold rotates center square 45° into a green check; early release flashes red cross (cancelled).

canvasmedium complexitymoderate motionclick

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →

Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

When to use it

Destructive or irreversible actions (delete, submit, purchase) where accidental taps must be prevented. Replaces "Are you sure?" dialogs with a tactile hold gesture.

When not to

Frequent or low-stakes actions where the hold delay frustrates users. Not suitable when pointer input is unavailable.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Change HOLD_MS from 1100 to 2000 to require a longer press, and update all #34d399 occurrences in the draw function to #6366f1 to shift the confirmed state to indigo. Theme: dark tokens live in :root, the light variant in :root[data-theme="light"]; ?theme=light or a {type:'forever:theme'} postMessage switches at runtime.

Safe to edit

hold duration (HOLD_MS=1100)
confirmed color (#34d399)
abort color (#f43f5e)
ring radius (R=W*0.30)
tick mark count (i<24)
demo idle timeout (idle>3600)
theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

state machine (ST_IDLE/ST_HOLD/ST_OK/ST_ABORT)
visibilitychange pause/resume
reduced-motion static frame fallback
aria-live region for screen-reader announcements
theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

Hold physics blends spring + linear — changing HOLD_MS without tuning spring constants may feel off
Auto-demo cycles continuously; remove demoStep() call before shipping in production
Background hardcoded to #0b0d12 in both CSS and canvas fill — must update both

holdconfirmprogress-ringcanvasstate-machinemicrointeractionfeedback

More Feedback & States components

Success CheckMint-green ring sweeps closed and a checkmark draws in with a springy pop and expanding halo; auto-replays and responds to click or spacebar.
Error ShakeDark email input shakes horizontally with decaying-sine, border flushes red, X icon pops in with overshoot spring, validation message slides up.
Toast StackDark notification toasts spring up from the bottom, drain a colored progress bar, then slide off right. Four types cycle: success, error, warning,…
Slide to ConfirmDraggable pill slider fills green on full slide; early release triggers a red shake. Spring physics snap thumb back. Auto-demos with an occasional failure…
Empty StateA Bauhaus open vessel sits empty while 26 mint motes drift in a slow orbital cloud above it; poking scatters them and they spring back to settle.
Like BurstHeart dips then spring-pops into a magenta-mint gradient, firing a 96-particle synthwave burst of dots and ring shards. Auto-cycles when idle.