Component theme

UI Micro-interactions

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

• Add to Cart FlyProduct tile flings a mini clone in a bezier arc into a cart icon on click; badge count bumps with a spring bounce. Auto-cycles as demo.
• 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 mockup with draggable list rows; pulling down reveals a teal arc spinner that fills and rotates, then triggers a skeleton-row flash on release.
• 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.
• Tooltip PopHeart icon button springs a mint-green tooltip above it on hover with a cubic-bezier spring pop; click triggers a subtle press-bounce via Web Animations API.
• Skeleton to ContentDark profile card cycles shimmering placeholders then resolves into avatar, image, and text. CSS shimmer sweep plus a JS class toggle drive the reveal.
• Magnetic Button PressGlowing teal pill auto-cycles a press: squash/bulge, white ripple burst, and label that drifts magnetically toward an orbiting cursor dot.
• Radio Dot BloomRadio list where selecting dips the ring, blooms a spring dot with overshoot, and fires an outward pulse. Auto-cycles through 5 options.
• Volume Slider PulseAuto-cycling volume slider with a glowing thumb and 13 spring-bouncing equalizer bars that react to slider position; numeric readout counts 0–100.
• FAB Speed DialPink FAB rotates plus-to-X and fans three labeled mini action buttons on a springy arc with overshoot; auto-cycles open/close as a demo.
• Star Rating CascadeFive gold stars fill left-to-right in a staggered cascade with squash-pop scaling and sparkle flicks off each tip, then drain in reverse and repeat.
• Search Bar MorphA pill-shaped magnifier icon elastically expands into a full search bar, types a query with a blinking caret, then collapses back — looping automatically.
• Stepper Quantity BumpLime-green digit stepper with skeuomorphic ± keys; pressing rolls the number up or down with a spring overshoot and per-digit motion blur.
• Battery Charge FillBattery cycles amber-to-mint as a wobbling liquid level rises; segment ticks light in sequence, bubbles rise inside, and a bolt pulses at center.
• Inverted Reading GlassA white circular lens tracks the cursor using mix-blend-mode:difference, inverting text colors beneath it to reveal near-invisible dark text on black.