∞ forever components

UI Micro-interactions

Stepper Quantity Bump

Lime-green digit stepper with skeuomorphic ± keys; pressing rolls the number up or down with a spring overshoot and per-digit motion blur.

css+canvasmedium 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

Cart quantity selectors, seat pickers, or any numeric input needing satisfying tactile feedback.

When not to

Large numeric ranges (only shows single digit 0–9 wrap); contexts where the auto-cycle demo loop would be distracting. 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 the accent color from lime (#A3E635) to cyan (#22D3EE) and slow the roll animation to 700ms by editing the `dur` value in the `anim` object inside `trigger()`. Theme: dark tokens live in :root, the light variant in :root[data-theme="light"]; ?theme=light or a {type:'forever:theme'} postMessage switches at runtime.

Safe to edit

  • accent color (--acc: #A3E635)
  • animation duration (dur: 520 in trigger())
  • spring parameters (w=10, z=0.42 in easeSpring)
  • auto-loop interval (autoT > 900)
  • button squash scale (.82,.82 in trigger())
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • three-cell roll structure (cells array)
  • IIFE wrapper
  • prefers-reduced-motion guard
  • visibilitychange stop/start
  • 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

Known limitations

  • Only displays the last digit (0–9 mod 10) — wraps silently for values ≥ 10
  • Auto-cycle loop runs by default; remove the autoT block before shipping in production Autonomous preview ends at first deliberate input and never resumes.
  • Buttons are divs without role=button — add ARIA roles for accessibility
  • State remains local to each mounted instance; format/theme remount preserves takeover, not component values.

steppercounterdigit-rollspringmotion-blurmicrointeractionui-control

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.