Recurring Picker

Create a recurring schedule picker. Three stacked pieces. Top: a Daily / Weekly / Monthly segmented control (raised surface thumb sliding between segments on a shared layout spring, stiffness 420, damping 30). Middle: a detail zone whose content swaps per mode with a quick crossfade (0.2s, 8px rise): Weekly shows 7 weekday circles with the active days (e.g. Mon/Wed/Fri) filled accent, popping in one after another with a 0.09s stagger spring; Monthly shows a single accent day badge ('26'); Daily shows a row of 7 small accent dots cascading in: every day, made literal. Bottom: a muted summary sentence that says the rule back in plain words: 'Every Mon, Wed & Fri', 'On the 26th of every month', rolling vertically on every change. The summary is the trust device: recurrence UIs go wrong silently, so always render the rule as a human sentence generated from the actual state (list selected weekdays in order, handle the '&' before the last item), never a hardcoded string. The weekday circles are toggles (tap to add or remove a day, with the pop on add and a shrink on remove) and the monthly badge opens a day-of-month grid. The mode changes only when someone picks it: a recurrence rule that rewrites itself while the reader is checking it is the one screen where that is unforgivable. Accessibility: the control is a radiogroup; weekday toggles use aria-pressed with full day names; the summary is aria-live="polite": the sentence doubles as the screen-reader announcement. If prefers-reduced-motion is set, all swaps are instant. 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.