← Back to library
tally-metrics.html
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.

More in SaaS

Install 3D Website Full screen, opens straight from your home screen.