Sparkline Mini

Create metric rows with mini sparklines. A card with 3 stacked rows separated by hairline borders. Each row: a monospace metric label on the left, a tiny inline sparkline (about 64x16, SVG polyline, 2px stroke, round caps) in the middle, and a bold value on the right. Rows slide in from the left (10px, fading, 300ms, easing cubic-bezier(0.22, 1, 0.36, 1)) with a 0.14s stagger; each row's sparkline then draws itself left to right over 0.9s (animate pathLength or stroke-dashoffset), starting just after its row lands. Color the sparkline by direction: improving metrics in the accent color, declining ones in the muted grey, and dim the value text of declining rows. Accessibility: each value carries an aria-label pairing metric and value (e.g. "MRR: $8.2k"); sparklines are decorative, mark them aria-hidden. If prefers-reduced-motion is set, render all rows and lines complete immediately. Trigger when the card 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.