∞ forever components

Inputs & Switches

Bristle Slider

A gold handle drags through a field of teal bristles that bend, spring back, and shift gold near the cursor; autonomous sweep runs when idle.

canvasmedium 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

Range inputs or scrubbers needing tactile, organic feel. Hero sections with interactive ambient motion.

When not to

Forms requiring precise value readout — no numeric label is displayed. Low-end mobile where spring physics per frame may stutter.

Working with an AI agent

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

Change bristle color at rest from teal to deep purple by editing cr/cg/cb base values (56,102,70) to (80,40,140), and increase bristle count density by changing the divisor in Math.round(bw/9) to bw/6. 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

  • bristle density (bw/9 divisor)
  • bristle resting color (cr/cg/cb base values)
  • spring stiffness (k=120) and damping (damp=11)
  • handle/accent color (AC='#ffd23f')
  • bristle reach radius (gap*4.2)
  • autonomous sweep speed (dt*0.9)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • DPR-aware canvas sizing and setTransform
  • visibilitychange stop/start guards
  • reduced-motion static fallback (single resting frame)
  • IIFE wrapper
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • No numeric value readout — not suitable as a production form input without adding a label
  • Autonomous sweep overrides user position after 1.4s idle — intentional but may surprise in embedded contexts

slidercanvasbristlephysicsspringinputgenerative

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.