← All effects

Toggle Morph

Micro-interactionVanilla JS · zero dependenciesOne progress number drives everything
-- fps
prefers-reduced-motion detected — toggle switches instantly

X-ray · layers

the knob flattens mid-flight
day fades into night behind
they only come out at night

Parameters

Duration600 ms
Squash amount1.35×
Toggle width120 px
Stars7
your version · updates as you tinker

How this effect works

Everything you see hangs off one number: the progress, running 0 (day) to 1 (night) with an ease-in-out curve. The knob's position is a straight read of it. The squash is a read of its speed: mid-flight, where the eased curve is steepest, the knob is widest and flattest — scaleX(1 + squash × speed) — and at the ends, where the curve levels off, it's round again. That's why it feels liquid: the deformation follows the motion physics-style instead of playing a canned keyframe.

The sky layer mixes two colours by the same progress — a plain linear interpolation of day-blue into night-navy. The stars are tiny dots whose opacity is the progress squared, so they hold back until the sky is properly dark and then bloom late — appearing "when night has settled" rather than the moment you click. One number, three costumes; that's the entire architecture.

Production notes: respects prefers-reduced-motion (instant switch, no morph) · it's a real button with role="switch" — keyboard and screen-reader friendly · animation only runs during the transition; a resting toggle costs nothing · the copied snippet is self-contained HTML + CSS + JS.