∞ forever components

Inputs & Switches

Liquid Toggle

SVG 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.

svgmedium complexitymoderate motionclickmobile-readyaccessible

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 →
1

When to use it

Settings pages, dark-mode switches, any boolean UI control that benefits from tactile feel.

When not to

Dense forms where the SVG goo filter adds excessive rendering cost.

Working with an AI agent

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

Adjust the liquid trail, track colors and smoothing in paint()/frame(). Keep the native button aria-pressed state synchronized with on. First input disables only the demo; manual liquid settling stays active. Theme: dark tokens live in :root; the [data-theme="light"] block and forever:theme message switch palette.

Safe to edit

  • accent/knob color
  • phase step speed (0.012)
  • track off/on colors
  • droplet lag amount (0.18 / 0.30)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • SVG goo filter (feGaussianBlur + feColorMatrix)
  • IIFE wrapper
  • reduced-motion guard
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)
  • native controls, visible focus and keyboard handlers
  • sticky preview demo lifecycle (forever-preview-lifecycle demo-v1; __foreverPreview.demoEnabled; forever:interactive window event)
  • visibilitychange suspension with manual settling retained
  • demo-v1 preview lifecycle: initialize demoEnabled from window.__foreverPreview and stop attract work on the window forever:interactive event; retain manual feedback, settling, cleanup and explicit sessions

Known limitations

  • Boolean UI example; connect the on state to application data for production.
  • State remains local to each mounted instance; format/theme remount preserves takeover, not component values.

togglegooeysvgui-controlfilterloop

More Inputs & Switches components

  • 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.