Component theme

Feedback & States

12 components, each a single self-contained HTML file — no frameworks, no build step. Preview them here, or see them live on the canvas.

• 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.
• 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.
• 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.
• DeniedRed no-entry disk head-shakes with decaying sine spring and lateral buzz; impact sparks radiate on first beat. Auto-cycles, click triggers on demand.
• Save → SavedGreen pill morphs to a circle, sweeps a spinner arc, then springs a checkmark into view on click. Auto-cycles as a demo loop.
• Star RatingFive SVG stars fill green from a clipped well with spring stagger on hover and commit; shake animation and red flash for denied state, status readout below.
• Undo SnackbarA dark snackbar slides up with an SVG countdown ring draining over 4.2s; clicking UNDO restores the deleted item and flashes a checkmark before dismissing.