KPI odometer cards

1 test · 1 finished runs (0 agent, 1 raw one-shot) · 1 live demo

The prompt

Create a studio-quality motion graphic: a KPI dashboard card set. Three cards slide in; each shows a metric (Revenue $1.24M, Users 84,210, Uptime 99.98%) whose digits roll up like a mechanical odometer, each with a progress ring that sweeps to its value and a small sparkline that draws itself. The cards then reshuffle positions with a spring motion, values reset and roll up again. Requirements: - A single self-contained HTML file: inline CSS and JavaScript only, SVG for all graphics, no canvas, no external libraries, fonts, images or network requests. - Expressive easing (ease-in-out, overshoot, staggered delays) and true morphing: elements visibly travel between states, never a plain crossfade. - Dark, modern design with a cohesive colour palette; portrait 4:5 layout, scaled to fit the browser window and centred. - Motion starts immediately at page load (something is already moving in the first half second) and loops seamlessly, about 12-16 seconds per loop. - Drive all animation with requestAnimationFrame and performance.now; no user interaction needed. - No text beyond what the graphic itself needs (labels, values). No titles, buttons or UI. Reply with only the complete HTML file.