Calendar Month Flip

Create a calendar with an animated month flip. A mini month view: header with previous/next chevrons around the month name, a 7-column day grid below, and a few marked days as accent-filled rounded cells. Navigating months animates directionally: the outgoing month name and grid slide out toward the direction of travel (x offset ~34px, fading, 260ms with easing cubic-bezier(0.22, 1, 0.36, 1)) while the incoming ones slide in from the opposite side; track the direction in state so back and forward mirror each other. As the new grid lands, its day cells pop in with a tiny per-cell stagger (index * 8ms, springing from 60% scale) so the month assembles like dealt cards. Use exit-then-enter sequencing (AnimatePresence mode="wait") keyed by month so grids never overlap, and keep the card's height fixed across months. Accessibility: the month name uses aria-live="polite"; chevrons have aria-labels; day cells are buttons in production. If prefers-reduced-motion is set, swap months instantly with no slide or 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.