Activity Heatmap

Create a contribution-style activity heatmap. A grid of 12 columns x 7 rows of small squares (14px, radius 3, 4px gap; use CSS grid with grid-auto-flow: column). Each cell has an intensity from 0 to 4: level 0 is the hairline grey, levels 1-4 step up through the accent color at 25% / 50% / 75% / 100% opacity. Keep the intensity data deterministic (a fixed dataset or a seeded hash of the cell position), not random per render. On appear, cells ripple in diagonally: each cell springs from 40% scale and 0 opacity to full (spring stiffness 500, damping 28) with a delay of (column + row) * 45ms, so a wave sweeps from the top-left corner. On hover a cell scales to 135%. Add a small monospace caption above (e.g. "activity · 12 weeks"). Accessibility: the grid container gets role="img" with an aria-label summarizing the pattern (e.g. "Activity heatmap of the last 12 weeks, busiest days in orange"). If prefers-reduced-motion is set, render the full grid immediately with no ripple and no hover scale. Trigger the ripple when the grid enters the viewport. 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.