Date Picker Smooth
A mini calendar whose selection circle springs from date to date
Create a smooth date picker selection. A compact calendar card (rounded, hairline border, soft shadow): a header row with the month name ('August 2026') and a small accent chip showing the selected date, above a 7-column grid - a muted weekday initial row, then the day numbers in small monospace. The selection is one shared accent circle that lives behind the selected day's number and springs from date to date when the selection changes (shared layout animation, stiffness 420, damping 28): it slides across the grid as a single object rather than disappearing and reappearing, and the newly selected number flips to paper-white while the old one returns to ink (0.2s). The header chip updates with a vertical roll: the old date slides up and out, the new one rises in (0.25s). Clicking any day moves the selection there, and the spring handles long diagonal hops across the grid naturally. Nothing moves the selection on its own: it waits for a real click or an arrow key. Generate the day grid from the actual month rather than a fixed one. Accessibility: days are buttons with aria-label ('August 14') and aria-pressed on the selected one; the header chip uses aria-live="polite". If prefers-reduced-motion is set, the selection circle and chip swap instantly with no spring. 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.