∞ forever components

UI Micro-interactions

Add to Cart Fly

Native Add button flings a product clone into a cart; first input cancels unfinished attract flights, while each manual action keeps its full 680ms flight and badge feedback.

csslight complexitymoderate motionclickmobile-ready

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →
1

When to use it

E-commerce product cards, shopping cart add actions, any buy/collect CTA needing tactile feedback.

When not to

Passive display contexts — remove the auto-cycle loop before shipping. Avoid on pages with many simultaneous cart actions (no queue). Autonomous preview ends at first deliberate input and never resumes.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Change product emoji, --c02-* palette tokens, 680ms flight duration and arc height. Preserve native Add button, visible focus, Enter/Space activation, attract/manual flight distinction and sticky takeover. Cancel unfinished attract flights on first input; retain manual completion. Theme: :root defaults, [data-theme="light"] and forever:theme hook.

Safe to edit

  • fly animation duration (680ms)
  • arc height offset (-50px)
  • product emoji (🎧)
  • accent color (#5cc8ff)
  • badge bounce scale (1.6)
  • autonomous preview until first input cadence (FIRST=400 / DEMO_EVERY=2800 ms)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • visibilitychange pause/resume
  • reduced-motion populated static cart fallback
  • Web Animations API animate() calls
  • IIFE wrapper
  • empty-cart badge state (.um02-badge.um02-empty)
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)
  • demo-v1 preview lifecycle: initialize demoEnabled from window.__foreverPreview and stop attract work on the window forever:interactive event; retain manual feedback, settling, cleanup and explicit sessions
  • native Add button, visible focus and keyboard activation; attract flight cancellation keeps manual flights intact

Known limitations

  • Standalone attract cycle runs until first input; cancel pending attract flights at takeover.
  • No queue: rapid clicks spawn multiple fly elements simultaneously
  • State remains local to each mounted instance; format/theme remount preserves takeover, not component values.

ecommercecartflyarcmicrointeractionbadgeweb-animations

More UI Micro-interactions components

  • 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.
  • 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.