Component theme

Inputs & Switches

22 components, each a single self-contained HTML file — no frameworks, no build step. Preview them here, or see them live on the canvas.

• 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…
• Spring StepperMint stepper with native minus/plus buttons and a number reel that settles with spring feedback. First deliberate input stops automatic steps; the chosen…
• 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.
• Tag ChipsRust-and-stone tag entry with native text input, Add and remove buttons, spring feedback and status announcements. Initial tags are populated; first…
• Reactive EQSeven visual EQ bands support pointer drag and keyboard adjustment. First input stops undulation; selected values settle and remain.
• Detent KnobKnurled rotary knob snaps through 12 detents via a Hooke's-law spring; tick marks flash orange on land and a two-digit value readout counts up.
• Toggle LatchHazard-striped red safety cover lifts, chrome lever throws to armed, commit flash races across the cover as it slams shut. Click to trigger.
• Crown DialCream drum dial with engraved tick bars scrolling as it rotates; a milled crown wheel ratchets on drag or click. Numeric readout below.
• Slide Throw LeverDraggable orange lever slides along a coil spring that snaps home with motion-blur ghost trails and a ringing track wobble on impact.
• Pressure PadTeal concentric-ring pad dimples inward and pulses while held; releases with a spring rebound. Live grams-of-force readout updates in real time.
• Thumbwheel ScrubberDenim-blue cylindrical thumbwheel with curved ribs you drag and fling; flywheel friction, detent ticks, and a FRAME counter readout.
• Bristle SliderA gold handle drags through a field of teal bristles that bend, spring back, and shift gold near the cursor; initial autonomous sweep stops permanently…
• Rocker SwitchPhotoreal I/O rocker in warm metal clunks between ON/OFF with spring physics and specular tilt. Amber LED witness light glows when on.
• PCB DIP Switch BankPCB DIP Switch Bank control in the 8-Bit Gaming system.
• Entropy Circuit BreakerEntropy Circuit Breaker control in the Forever system.
• Vernier Quantum TemperatureVernier Quantum Temperature control in the Forever system.
• Margin Call Panic EjectorMargin Call Panic Ejector control in the The Interest Game system.
• Cross-Margin Leverage MultiplierCross-Margin Leverage Multiplier control in the The Interest Game system.