UI Micro-interactions
Crate Emoji Reactions
Reaction pill row featuring an add-emoji picker, floating SVG bursts, and vertical rolling digit counters.
cssmedium complexitymoderate motionpointer+keyboardmobile-readyaccessible
Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited
1
When to use it
Release notes, community comments, and tracklist feedback bars.
When not to
Full-text review forms.
Working with an AI agent
Every component ships agent-ready metadata. An example instruction for this one:
Edit --b/--i/--c/--l tokens in :root and [data-theme="light"].
Safe to edit
- theme CSS tokens (--b/--i/--c/--l), data arrays & timings
Keep intact
- IIFE + crNN- prefix, reduced-motion, visibilitychange, theme/demo-v1
Known limitations
- Demo state resets on remount
More UI Micro-interactions components
- Add to Cart FlyNative Add button flings a product clone into a cart; first input cancels unfinished attract flights, while each manual action keeps its full 680ms flight…
- Notification BellSVG bell swings and rings with a ripple wave on click; a red badge counter pops in with a springy bounce and increments each ring. Auto-cycles every 2…
- Copy ConfirmCopy icon morphs to a drawn-stroke checkmark with a green button flash and a "Copied!" toast on click; auto-cycles as a demo loop.
- Swipe Card StackTinder-style draggable card stack — drag the top card left/right to reveal NOPE/LIKE stamps; fling-away animates it off-screen and cycles to the next card.
- Pull to RefreshA phone-frame list supports pointer/touch pull and a native Refresh button. First input stops attract refreshes; manual refresh completes its spinner, row…
- Accordion ExpandThree FAQ panels smoothly expand and collapse with a CSS height transition; a chevron rotates 180 degrees to indicate open state. Auto-cycles as demo.