Segmented Control

Create an animated segmented control. A pill-shaped track (3px inner padding, hairline border, ink at ~6% alpha as the track color) holding 3 segments, e.g. Day / Week / Month, in small monospace type. The active segment sits on a raised thumb: a surface-colored pill with a hairline border and a soft shadow (0 2px 8px, ink at 14% alpha) that slides between segments with a spring (shared layout animation, stiffness 420, damping 30): one thumb element that moves, never a background painted per segment. As the thumb travels, the labels crossfade: the newly active label turns ink and bold, the abandoned one fades back to muted (0.25s color transition). Clicking any segment moves the thumb there directly. The spring handles multi-segment jumps naturally. Accessibility: the group uses role="radiogroup" with a label, each segment role="radio" and aria-checked; arrow keys should move the selection. If prefers-reduced-motion is set, the thumb jumps instantly with no spring. Distinct from a tab bar: this is a compact input control for switching a value (ranges, view modes, units), not page navigation. 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.