SaaS
← Back to library
Open full screen ↗
This is the actual page the prompt produces — scroll and click inside it.
About this one
A results band for anywhere on the page. The count-up fires once on entry and never replays, which is the difference between confident and desperate.
The prompt
Build a horizontal band of four outcome numbers. LAYOUT A four-column grid on desktop, two columns below 760px, one below 460px. Each cell is centred with a 1px left divider except the first, and the dividers disappear when the grid wraps. EACH CELL The number in the display face at clamp(1.9rem, 4vw, 2.8rem) with a gradient text fill, a unit suffix in the muted colour at 60% of that size, and a short label underneath at 0.85rem. COUNT-UP When the band first enters the viewport, animate each number from zero to its value over 1200ms using an ease-out curve, staggered 120ms apart. Drive it with requestAnimationFrame, not setInterval, and fire once via IntersectionObserver then disconnect. Never replay on scroll back — a number that keeps re-counting looks like a slot machine. Format numbers with locale separators as they climb, and preserve decimals if the final value has them. RULES Under prefers-reduced-motion, render the final numbers immediately. Put the true final value in the HTML so it is correct with JavaScript disabled and for screen readers.