Stat Tile

Create a dashboard stat tile. A rounded card with: a monospace metric label, a large bold number, and a small accent-colored caption (e.g. "this week"). The number counts up from 0 to its value (e.g. 12,480, formatted with thousands separators) over 1.5s with easing cubic-bezier(0.22, 1, 0.36, 1), starting 0.3s after the tile appears. Behind the text, anchored to the bottom-right corner at about 70% width and 45% height with 35% opacity, a decorative area sparkline: the line (1.5px accent stroke) draws itself over 1.1s (animate pathLength), then its gradient fill fades in underneath. Use preserveAspectRatio="none" so the sparkline stretches to its corner box, and overflow hidden on the card. On hover, the whole tile lifts 4px with a spring (stiffness 350, damping 24). Accessibility: give the number an aria-label with the full value and context (e.g. "12,480 page views this week"); the sparkline is decorative, mark it aria-hidden. If prefers-reduced-motion is set, show the final number and finished sparkline immediately, with no hover lift. 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.