Feedback & States
Ripple Ring
A still pool with a waiting crab: press and hold to weave in an item as a rippling ring, tap to remove the newest. Clean modern: off-black and verdigris with a light theme. From the daily-team 'Control in process' set (2026-10-21 to 2026-10-25).
canvasmedium complexitymoderate motionpointer+keyboardaccessible
Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited
1
When to use it
Working with an AI agent
Every component ships agent-ready metadata. An example instruction for this one:
Palette: clean modern, off-black and verdigris (docs/style-clean-modern.md). Edit the colour tokens on :root and the light block; keep the demo-v1 lifecycle intact.
Safe to edit
- colour tokens on :root and the light block
- idle demo steps and interval
Keep intact
- demo-v1 preview lifecycle: initialize demo from window.__foreverPreview and stop the idle demo on the window forever:interactive event or the first pointer or key input; retain manual feedback, settling, cleanup and explicit sessions
- IIFE scope, prefers-reduced-motion snap, visibilitychange pause, forever:theme listener and ?theme bootstrap
Known limitations
- At most 8 items. A hold is about 520 ms per ring; a tap under 240 ms removes.
- State remains local to each mounted instance; format/theme remount preserves takeover, not component values.
- Silent: the original daily-team build had sound where noted; it was removed so the tile stays quiet on the wall.
More Feedback & States components
- Success CheckMint-green ring sweeps closed and a checkmark draws in with a springy pop and expanding halo; initial replay stops after first input; click or Space runs…
- 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,…
- 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 BurstRose-and-verdigris enamel palette: a heart spring-pops with 96 dots and ring shards. First input stops the demo; later input toggles the liked state.