Component theme

Feedback & States

22 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; 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.
• DeniedRed no-entry disk head-shakes with decaying sine spring and lateral buzz; impact sparks radiate on first beat. Initial demo stops after first input; click…
• 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.
• Achievement Unlocked Pixel TrophyAchievement Unlocked Pixel Trophy control in the 8-Bit Gaming system.
• Type Tile DeleteNaval-paper red register: matching letters fill a spring tile grid before delete scatters the name; Restore rebuilds it.
• Polygon Ring DeleteNaval-paper red register: name matching rounds a polygon ring and fills its confirmation arc before collapse.
• Particle Ring DeleteNaval-paper red register: a particle cloud aligns into a ring as the name matches, then disperses on deletion.
• Magnetic Disc DeleteNaval-paper red register: an evasive magnetic disc becomes a filled Delete control when the name matches.
• Polygon Weave DeleteStone-and-parchment terracotta register: matching letters trace a polygon weave that contracts after deletion.
• Hex Lattice DeleteStone-and-parchment terracotta register: typing lattice flips concentric hexagonal cells before their staggered disappearance.
• Triangle Slide DeleteStone-and-parchment terracotta register: typing final2.psd fills triangular letter tiles; a slider releases them across the frame.
• Nested Square Hold DeleteStone-and-parchment terracotta register: typing quadra builds nested squares; holding Delete contracts the geometry.
• Letter Fall DeleteLamplight indigo-and-ochre register: matching cat-pics-2 warms individual letters before they tumble away on deletion.
• Lamplight Hold DeleteLamplight indigo-and-ochre register: typing cat-pics-2 fills a textured ring; holding Delete winds the ring into its center.
• Lamplight Slide DeleteLamplight indigo-and-ochre register: typing cat-pics-2 arms an inertial slide-to-delete pill with an ochre trail.
• Firefly Scatter DeleteLamplight indigo-and-ochre register: matching cat-pics-2 lights dotted letters, which disperse into bounded firefly particles on deletion.