Inputs & Switches

Spring Stepper

Mint-themed +/- stepper with a number reel that springs and overshoots between digits 0–9; auto-cycles as a demo. Dark green palette.

cssmedium 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

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

When not to

Ranges beyond 0–9 (strip is hardcoded 12 rows). Remove auto-cycle timer before shipping in production.

Working with an AI agent

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

Change the value range to 0–99 by rebuilding the strip with 100 rows, set spring stiffness k=0.22, and change accent color from #5fffcf to #a78bfa. 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

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)

Known limitations

Value clamped 0–9; strip only contains 12 rows so ranges beyond single digits need a rebuild
Auto-cycles every ~90 frames — remove for production
Buttons are divs with no aria role or keyboard support

stepperspringnumber-reelcounterui-controlphysicsmint

More Inputs & Switches components

Liquid ToggleSVG toggle with a goo filter — the knob slides with trailing liquid droplets; track color fades between off and on states.
Glow SliderSVG range slider with a plum-to-teal gradient fill, glowing knob, and a floating value bubble that tracks the handle; auto-oscillates when idle.
Segmented ControlSlate-to-sage gradient pill slides between Day/Week/Month/Year segments with elastic spring stretch. Auto-cycles; click pauses briefly.
Checkbox MorphThree amber rounded checkboxes auto-cycle and respond to clicks; the box fills and a checkmark strokes in via animated dashoffset.
Star RatingFive gold stars auto-sweep ratings up and down; the active star pops with a scale bounce. Pointer sets the hover rating instantly.
OTP BoxesFour teal monospace OTP cells auto-fill digits with a slide-up bounce and blinking caret; sequence clears and loops. Dark background with glow on active cell.