Dual Month Range

Create a dual-month range picker. Two compact month grids side by side (August and September: month name, then a 7-column grid of small monospace day numbers) under one shared rolling range chip ('Aug 24 – Sep 5'). Represent dates as one continuous index across both months (Aug 24 = 24, Sep 5 = 28 + 5) so a single start/end pair drives both grids. The range logic must not care which month a day renders in. Three animated parts: the start endpoint (solid accent circle) and end endpoint (deeper accent shade), each a shared layout element that springs to its new date even when that means jumping across to the other month's grid (stiffness 420, damping 28): watching an endpoint fly across the seam between months is the hero moment; and the in-between band (accent at ~13% alpha, inset vertically) whose cells fade in sequentially by distance from the start (delay = 0.15s + steps × 0.025s), sweeping left to right through the gap. The band pauses at August's edge and continues from September's first cell, reading as one continuous ribbon. Endpoint numbers flip to paper-white. Interaction: first click sets the start, second sets the end, and a click before the start swaps the endpoints. The endpoints fly only in answer to a click. Nothing sets a range on its own, and the flight across the seam is worth watching precisely because someone asked for it. Accessibility: days carry aria-labels including the month; announce the completed range via aria-live="polite". If prefers-reduced-motion is set, endpoints and band appear 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.