∞ forever components

Inputs & Switches

Toggle Latch

Hazard-striped red safety cover lifts, chrome lever throws to armed, commit flash races across the cover as it slams shut. Click to trigger.

canvasmedium complexitymoderate motionclick

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

Dark-themed dashboards, dramatic on/off controls, game UIs needing tactile mechanical weight for a toggle action.

When not to

Light backgrounds (panel hardcoded dark green-black). High-frequency toggling — multi-phase animation takes ~154 frames per cycle.

Working with an AI agent

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

Change accent color from green to red alert by setting AC='#ff4444', update ARMED/SAFE legend colors to match, and slow the cover lift by changing DUR.lift to 70. 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 (AC='#9fe870')
  • phase durations (DUR object: lift/throw/slam/rest)
  • cover swing angle (cover*1.05 rad)
  • lever travel arc (ang=(lever-0.5)*1.6)
  • hazard stripe color (#f4d03f) and opacity (0.16)
  • idle demo cadence (LEAD=24 / GAP=14 / RESUME=216 frames; ARMED↔SAFE flip every ~2.8 s)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • phase state machine (phase/pt guards prevent re-triggering mid-animation)
  • DPR-aware canvas sizing
  • visibilitychange pause/resume
  • reduced-motion guard with static draw fallback
  • idle demo flip (the same trigger() a click runs; real input takes over)
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • pointermove randomly triggers animation (~1.2% chance per event) — remove before production use
  • No aria role or keyboard support on the canvas click target

togglemilitarysafety-covercanvaschromeindustrialui-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.