UI Micro-interactions
Crate Avatar Group
Overlapping collector avatar stack that fans open on hover or expand with toggleable check badges and gliding tooltip.
csslight complexitysubtle 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
Assignee pickers, collaborator lists, and crate contributor bars.
When not to
Very large user directories over 20 members.
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.