∞ forever components

Inputs & Switches

Thumbwheel Scrubber

Denim-blue cylindrical thumbwheel with curved ribs you drag and fling; flywheel friction, detent ticks, and a FRAME counter readout.

canvasheavy complexitymoderate motionpointer

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

Timeline scrubbers, video frame selectors, or any UI needing tactile precision input with inertia feel.

When not to

Accessibility-first contexts — drag/fling only, no keyboard nav or ARIA roles. Reduced-motion users get a static frozen frame.

Working with an AI agent

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

Change the accent color from denim-blue to amber by setting ACC='#f59e0b', update the rib gradient midpoint colors to match, and slow friction from 0.975 to 0.96 for a longer coast. 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='#507E95')
  • flywheel friction (vel*=0.975)
  • rib pitch/spacing (PITCH=0.30)
  • initial velocity (vel=1.9)
  • wheel dimensions (wW, wH scale factors)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • DPR-aware canvas sizing
  • visibilitychange pause/resume
  • prefers-reduced-motion guard (static single frame)
  • IIFE wrapper
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Reduced-motion renders one static frame — wheel is non-interactive for those users
  • No keyboard scrubbing — pointer-only interaction
  • FRAME counter is a demo value, not wired to any real data source

thumbwheelscrubbercylindricalphysicsflywheelcanvasui-control

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.
  • Spring StepperMint-themed +/- stepper with a number reel that springs and overshoots between digits 0–9; auto-cycles as a demo. Dark green palette.
  • 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.