Component theme

Inputs & Switches

17 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 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.
• 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.
• Tag ChipsColored tag chips auto-fill and remove inside a dark input field with spring pop-in and shrink-out transitions; a blinking cursor mimics live typing.
• Reactive EQSeven vertical teal sliders auto-undulate in a sine wave; hovering a band snaps its knob to pointer height. Glowing level-meter dots accent the active fill.
• 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; autonomous sweep runs when idle.
• 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.