∞ forever components

Buttons & Toggles

Dawn to Dusk Segmented

A four-way segmented control (dawn, morning, midday, dusk) whose indicator slides in 220 ms while a soft radial pigment wash behind the panel shifts temperature with the hour; a light display readout shows the time and a line of field notes. It auto-advances every 3.6 s; a click or arrow key takes over.

csslight complexitysubtle 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

Time-of-day, season or mode pickers in weather, photography, lighting and field apps; any segmented control that should set the mood of its panel.

When not to

More than five segments, or controls that must stay visually neutral.

Working with an AI agent

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

Edit the S array (label, time, note, wash colour) and the advance cadence EVERY=3600; the wash tokens --dd17-wash-* carry the temperature per state. 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

  • S array (label, readout, note, wash)
  • advance cadence (EVERY) and control response (220ms)
  • panel radius (16px) and bar radius (6px)
  • wash tokens (--dd17-wash-red / -warm / -leaf / -cool)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • role=radiogroup with roving tabindex and arrow keys
  • two clocks never mixed: the wash answers the control in 260 ms, nothing drifts on its own
  • prefers-reduced-motion guard (dawn, still; keys and clicks still change the hour)
  • visibilitychange pause
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Ysabeau and Source Sans 3 render only if installed — Georgia and the system sans fall back
  • The auto-advance is for the wall; set demo=false in a product

segmentedradiocontrolplein-airwashtime-of-daytemperaturecard

More Buttons & Toggles components

  • Magnetic ButtonDark pill button drifts in an idle orbital float; cursor proximity pulls it magnetically with a label inner-parallax and emerald-to-copper glow on hover.
  • Gooey Liquid TogglePill toggle where an SVG goo-filtered blob stretches and merges as it slides from off to on, shifting grey to magenta. Auto-cycles as demo.
  • Morphing Action FABGradient FAB whose plus icon rotates 135° to an X on click, fanning six icon buttons outward in a staggered radial spring animation. Auto-cycles in demo mode.
  • Material RippleDark rounded button that spawns an expanding ink ripple from the tap point; idles by firing ripples from random positions every 1.5 s.
  • Neon Glow PulseAmber pill button on near-black that breathes a bright neon bloom via opacity pulse on a pseudo-element; hover shifts background and text color.
  • Jelly PressAurora-gradient button squashes and stretches with a spring keyframe animation on click; auto-cycles idle squish every 2.1s to stay alive at rest.