Availability Grid

Create an availability picker grid. A compact week grid: day initials across the top, hours down the side, and a cell per day-hour. Three cell states: free (accent color at 14% opacity), busy (hairline grey, disabled, not-allowed cursor), selected (solid accent with a small white dot). On mount, cells ripple in diagonally: each springs from 50% scale and 0 opacity with a delay of (row + column) * 30ms (spring stiffness 480, damping 26). Free cells scale to 115% on hover; selecting one pops it (scale 1 → 1.2 → 1) as it fills solid accent, and the previous selection returns to free styling. Keep the availability data deterministic (a fixed busy set), and include a small free/busy legend below. Accessibility: the grid uses role="grid" with an instructive aria-label; cells are buttons with aria-labels ("Free", "Busy", "Selected") and busy cells disabled. If prefers-reduced-motion is set, render the grid instantly with no ripple, hover scale, or pop. 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.