Date Range Picker

Create an animated date range picker. A compact calendar card (month header + a small accent chip showing the range, above a 7-column day grid with a muted weekday row, small monospace numbers). A range has three visual parts, each animated differently: 1. The start endpoint: a solid accent circle behind its day number, springing to a new date with a shared layout animation (stiffness 420, damping 28): one circle that travels, never redrawn. 2. The end endpoint: a second circle in a deeper shade of the accent, on its own shared layout spring delayed ~0.08s behind the start: the two endpoints landing one-two. 3. The days between: a soft accent band (accent at ~13% alpha, inset slightly from the cell's top and bottom so it reads as a ribbon). When a new range is set, the band cells fade in sequentially, delay = 0.15s + (day - start) × 0.03s, so the fill visibly sweeps from the start date toward the end date. Endpoint numbers flip to paper-white; in-range numbers stay ink. The header chip ('Aug 8 – 19') rolls vertically on change. Interaction: first click sets the start, second click sets the end, and a click before the start swaps the endpoints. Nothing sets a range on its own: the sweep is worth watching precisely because it is answering a click. Accessibility: days carry aria-labels; announce the completed range via aria-live="polite" on the chip ('August 8 through August 19'). If prefers-reduced-motion is set, endpoints and band appear instantly with no sweep. 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.