Month Strip Picker
A horizontal month strip that glides the chosen month to center
Create a horizontal month strip picker. A card holding a single horizontal strip of the 12 month chips in small monospace, with a rolling 'Aug 2026' label above. The strip's inner row is wider than the card; instead of a scrollbar, the row translates so the selected month always sits at the card's center: animate the row's x to (cardWidth / 2 - chipWidth / 2 - index × chipWidth) with a soft spring (stiffness 260, damping 28), so picking a far month sends the whole strip gliding past. Fade the strip's edges with a horizontal CSS mask (transparent → solid 15% → solid 85% → transparent) so months dissolve at the boundaries instead of clipping. The fade is also the affordance that there's more to reach. The selected chip carries a shared accent pill background (springing between chips, stiffness 420, damping 30) with its label in paper-white; unselected months are muted. The header label rolls vertically on change. Clicking any visible chip selects it; also support horizontal drag/swipe on the strip with snap-to-chip, and keyboard arrows. The strip glides only when someone picks a month. That glide is the answer to a choice, and a strip that slides on its own is not a picker, it is a carousel. Accessibility: chips are buttons with aria-pressed and full labels ('August 2026'); the header is aria-live="polite". If prefers-reduced-motion is set, the strip and pill jump 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.