∞ 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 motionclick

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 →
Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

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.

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)

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
  • Buttons are divs without role=button — add ARIA roles for accessibility

steppercounterdigit-rollspringmotion-blurmicrointeractionui-control

More UI Micro-interactions components

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