Spring Toggle
A switch whose knob lands with a satisfying spring
Create a spring toggle switch. A pill-shaped track (about 64x34px) with a white circular knob (26px) that slides between the ends. The knob moves with a spring: it should overshoot slightly and settle (spring stiffness ~600, damping ~28, or transition transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1)). The track's background crossfades between a neutral gray (off) and the accent color (on) over 250ms. Implementation details: the knob is absolutely positioned and moves with transform: translateX only; keep 4px padding between knob and track edges; give the knob a small shadow (0 2px 6px at ~25% black). Accessibility: a real button with role='switch' and aria-checked, toggled by click and by Space/Enter, with a visible focus ring. An optional text label next to it ('On'/'Off') changes color with the state and has a fixed min-width so nothing shifts. When prefers-reduced-motion is enabled, move the knob instantly. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.