∞ forever components

Inputs & Switches

Spring Stepper

Mint stepper with native minus/plus buttons and a number reel that settles with spring feedback. First deliberate input stops automatic steps; the chosen value stays put.

cssmedium 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

Quantity selectors, numeric inputs, settings with discrete integer steps where tactile spring feedback adds polish.

When not to

Ranges beyond 0–9 unless the digit strip and clamps are expanded together.

Working with an AI agent

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

Adjust spring stiffness .16 and damping .62 in frame(). Expand the digit strip and value clamp together for a wider range. Keep native buttons, output value, reduced-motion snapping and sticky demoEnabled. Theme: dark tokens live in :root; the [data-theme="light"] block and forever:theme message switch palette.

Safe to edit

  • spring stiffness (k=0.16)
  • damping factor (damp=0.62)
  • accent color (#5fffcf)
  • auto-cycle interval (auto>90)
  • button/num box border-radius and size
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • prefers-reduced-motion guard (static translateY fallback)
  • visibilitychange pause guard
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)
  • native controls, visible focus and keyboard handlers
  • sticky preview demo lifecycle (forever-preview-lifecycle demo-v1; __foreverPreview.demoEnabled; forever:interactive window event)
  • visibilitychange suspension with manual settling retained
  • 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

  • Value clamps to 0–9; wider ranges require rebuilding the digit strip and clamps.
  • Local UI example; connect value updates to application data.
  • State remains local to each mounted instance; format/theme remount preserves takeover, not component values.

stepperspringnumber-reelcounterui-controlphysicsmint

More Inputs & Switches components

  • Liquid ToggleSVG liquid toggle with a goo filter, trailing droplets and a native button. First deliberate input stops the idle demo; the chosen on/off state settles fully.
  • Glow SliderSVG range slider with a muted plum-to-teal fill, glow and value bubble, driven by a native range input. First input stops demo oscillation; drag and…
  • Segmented ControlSlate-to-sage pill slides between four native segment buttons with elastic spring stretch. First input stops automatic cycling; committed selection remains.
  • Checkbox MorphThree native amber checkbox buttons animate their check strokes and expose pressed state. First input stops the demo; checked values remain.
  • Star RatingFive gold SVG star radio controls commit ratings on click or keyboard input and settle with a scale bounce. First input stops automatic sweeping.
  • OTP BoxesFour native numeric OTP inputs support typing, paste, focus advance and Backspace navigation. Initial digits are populated; first input stops scripted entry.