Feedback & States

Success Check

Mint-green ring sweeps closed and a checkmark draws in with a springy pop and expanding halo; auto-replays and responds to click or spacebar.

svgmedium 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

Form submission confirmations, payment success screens, onboarding step completions, or any positive feedback state.

When not to

Error or warning states — color and motion are hardcoded for success. Avoid in contexts requiring immediate programmatic control without auto-replay.

Working with an AI agent

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

Change accent color from mint (#34d399) to gold (#f59e0b), slow the ring sweep to 800ms by changing the `520` value in `ms < 520`, and increase spring overshoot by raising `0.42` to `0.6`. 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

accent color (#34d399)
ring sweep duration (ms < 520)
spring overshoot amplitude (0.42)
auto-replay gap (AUTO_GAP = 2600)
tick stroke width (stroke-width:11)
theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

IIFE wrapper
prefers-reduced-motion guard (drawOneFrame fallback)
visibilitychange pause/resume
aria-live region for screen readers
theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

Light re-theme via the [data-theme=light] token block; catalog bg/accent describe the dark default
Auto-cycles indefinitely — remove nextAuto scheduling before using as a one-shot production component

successcheckmarkfeedbacksvgmicrointeractionspringhalo

More Feedback & States components

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…
Hold to ConfirmPress-and-hold fills a tick-marked ring; full hold rotates center square 45° into a green check; early release flashes red cross (cancelled).
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.