Trend Arrow

Create a KPI card with an animated trend chip. A stat card: monospace metric label, a large bold value, and next to it a pill-shaped trend chip containing an arrow icon and a delta percentage in small bold monospace. When the trend changes direction, three things animate together: the arrow rotates with a spring (0deg pointing up-right for positive, 90deg for negative, stiffness 420, damping 20, so it overshoots slightly); the delta text crossfades vertically (old up and out, new in from below, 200ms) inside a fixed-width slot so the chip doesn't resize; and the chip's background tint morphs over 350ms (accent at 12% opacity for positive, ink at 7% for negative), with the arrow and text colors following (accent for up, muted for down). For an ambient demo, cycle through a fixed list of deltas every 1.7s; in production, animate on data updates. Accessibility: wrap the delta in aria-live="polite"; the arrow icon is decorative (aria-hidden). If prefers-reduced-motion is set, swap values instantly with no rotation. 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.