Quarter Picker

Create a quarter picker. Three rows. Top: a Q1 / Q2 / Q3 / Q4 segmented pill (ink thumb sliding on a shared layout spring, stiffness 420, damping 30, active label paper-white). Middle: all 12 months as small monospace tiles in a 6-column grid. The picker's teaching layer: when a quarter is chosen, its three months light up in sequence (accent border, accent text, accent wash at 10% alpha, plus a small spring scale to 1.06 staggered 0.07s apart) while the other nine fade to muted hairline tiles (0.25s). The reader never has to remember which months Q3 is. The grid answers it on every change. Bottom: a rolling caption ('Q3 2026 · Jul–Sep'). Derive everything from the quarter index: a month belongs to the quarter when floor(monthIndex / 3) equals it; the caption's month range comes from the same math. For fiscal calendars, make the quarter-start month a parameter and shift the mapping. The UI stays identical. Clicking a month tile may also select its quarter (reverse lookup). The quarter changes only when someone picks one; never cycle it on a timer, because the whole point of the teaching grid is that it is answering a question the reader just asked. Use it in dashboards, reports, and finance filters where quarters are the native unit. Accessibility: the segments are a radiogroup with labels including the month range ('Q3, July to September'); the caption is aria-live="polite". If prefers-reduced-motion is set, tiles and thumb swap instantly with no stagger. 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.