KPI Live Counter
A stat tile that ticks upward, digits rolling like a slot machine
Create a live KPI counter tile. A stat card with: a monospace metric label, a LIVE badge (tiny accent dot that pulses scale 1 → 1.5 → 1 and opacity 1 → 0.5 → 1 on a 1.4s loop, next to the word LIVE in small monospace caps), a large bold number, and a trend line underneath (small trending-up icon + "+38 in the last hour" in the accent color). The number updates every 1.4s. Animate per digit, not the whole number: each digit that changes rolls vertically like a slot machine, the old digit sliding up and out while the new one springs in from below (spring stiffness 420, damping 32), inside an overflow-hidden slot. Unchanged digits stay still. Accessibility: the number is wrapped in aria-live="polite" with an aria-label like "2,879 users online now". If prefers-reduced-motion is set, show a static final value with no pulsing or rolling. 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.