Feedback & States

Copied!

A flat copy button presses down on click; a green "Copied!" tooltip springs up with a notch, holds, then retreats. Auto-demos on loop.

cssmedium 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

Code snippets, share links, or any "copy to clipboard" CTA that needs tactile confirmation feedback.

When not to

Contexts needing actual clipboard write — remove the auto-cycle and wire navigator.clipboard before shipping.

Working with an AI agent

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

Change tooltip color from green (#34d399) to blue (#60a5fa), update the hold duration from 1400 to 2000ms, and change the label from "Copy" to "Copy link". 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

tooltip color (#34d399)
hold duration (HOLD = 1400)
button label text ('Copy')
spring overshoot amplitude (0.5)
auto-replay gap (AUTO_GAP = 1900)
theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

IIFE wrapper
aria-live region (#fb08-live)
prefers-reduced-motion guard (drawCopied static fallback)
visibilitychange pause/resume
theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

Does not write to clipboard — add navigator.clipboard.writeText() in userPlay() for production
Auto-cycles by default — remove nextAuto trigger when embedding in real UI

tooltipfeedbackcopyspringmicrointeractionui-control

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…
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.