Component theme

Feedback & States

31 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.
• Specimen TrayAn empty tray with a hermit crab: press and hold the crab to catalog an entry; a delete count button and the arrow keys remove entries. Clean modern:…
• WaterlineA still waterline with one snail: tap to drop items in, tap or press Delete to lift them out, drag to stir the water. Clean modern: off-black and…
• Still WeftA list woven as cloth on a still pool: drag right to weave in an item, left to pull one out. Clean modern: off-black and verdigris with a light theme.…
• Accession StackAn empty tray with one hermit crab: drag down, scroll or tap to unfold accession labels, drag up to fold them away. Clean modern: off-black and verdigris…
• Last SnailA list as a snail in a still tide pool: tap the snail or press Enter to add an item that settles into its shell, tap the water or press Delete to remove…
• Swallowed ItemA stack of list entries above an anemone: fling an entry into it to delete, then tap the anemone within 5 seconds to bring it back. Clean modern:…
• Ripple RingA 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…
• Tide ChartA list as a tide line with a crab riding it: drag, scroll or arrow-key sideways to raise or drain entries, with a live item count. Clean modern: off-black…
• Plankton FieldAn empty list as a plankton pool: tap the water to add an item, tap the copepod to remove the last; the plankton parts around your pointer. Clean modern:…