Treemap Hover

Create a treemap with an animated focus state. A rounded container filled with 5 absolutely-positioned tiles whose sizes are proportional to their values (precompute the layout: left/top/width/height in percentages; keep it deterministic). Each tile is a real button showing its label (bold, small) and value (monospace, dimmer) pinned to the bottom-left, with a 2px background-colored border and 10px radius so tiles read as separate blocks. On mount, tiles pop in one after another (from 85% scale and 0 opacity, spring stiffness 380, damping 26, 0.09s stagger). That entrance is the one thing that plays by itself, and it plays once. One tile is focused at a time: it turns the accent color (background transition 300ms), its value brightens to full opacity, and it presses to 96.5% scale with a spring, while non-focused tiles sit at an opacity derived from their value (e.g. 55% + value/100) so bigger tiles read stronger. Hovering a tile previews the focus and clicking commits it. Nothing moves the focus on its own. Accessibility: the container gets role="img" with an aria-label naming the largest tile; tiles are buttons so keyboard focus works. If prefers-reduced-motion is set, skip the pop-in and the press and show focus with color only. 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.