Count-Up Stats
One line in, one self-contained index.html out: a wall of figures that count up from zero the moment they scroll into view — each a number, a label and a small bar that fills, on a dark ground.
We made two examples: near-black with violet bars for Vibary, and deep green with amber bars for Bracket Climbing, a climbing gym. Both share the eyebrow pill, the one-line heading and the row of four tiles with number, label and a bar sized to its share. In the second, two figures carry a fixed unit.
Everything comes from the fields, and the figures are sample data you replace with your own. The screenshot shows the finished state. In the file, each figure counts up from zero the first time the section scrolls into view, the tiles start a beat apart, and the bars fill alongside. Units stay fixed while the digits move, and with reduced motion the figures show their final value straight away.
Generated for this library
Input
Brief the case for Vibary, in four figures
Eyebrow By the numbers
Heading What a skill hands you.
Figures 1 · file per skill / 0 · build steps /
60 · frames a second / 2 · themes, out of the box
Palette --ground #0a0a0b · --card #131316 · --ink #f2f2f3 ·
--muted #a3a3ad · --accent #7c7cf0
Returned 1 file · index.html · four tiles, count-up on scroll
header an eyebrow and one line, no numbers of their own
tiles each a number, a label, and a bar filled to its share
count on entry each figure climbs from zero, tiles a beat
apart; a unit stays fixed while the digits climb
bars fill on the same curve — the largest figure fullest
rest reduced motion shows final values and filled barsYou fill in 5 fields — the braced lines at the top. Everything below them is fixed.
- 1The brief (one line)
- 2The eyebrow pill
- 3The heading (one short line)
- 4The figures
- 5The palette (one :root block)
Count-Up Stats
What this makes
One line in, one self-contained index.html out: a wall of figures that count up from zero the moment they scroll into view — each a number, a label and a small bar that fills, on a dark ground.
The whole template, in one piece. The steps below are the entire workflow.
How to use it
- Copy the whole template with the button above.
- Replace the five slot lines — each figure is a number, its label, and an optional unit; the template counts the number.
- Paste it into any coding agent or model in one message. It returns one index.html.
- Save the file and open it in a browser, then scroll the section into view to watch the figures climb.
- Swap the figures any time; the count-up and the bars re-fit to whatever values are there.
What you swap
- The brief (one line)
- the case for Vibary, in four figures
- The eyebrow pill
- By the numbers
- The heading (one short line)
- What a skill hands you.
- The figures
- 1 · file per skill / 0 · build steps / 60 · frames a second / 2 · themes, out of the box
- The palette (one :root block)
- --ground #0a0a0b · --card #131316 · --ink #f2f2f3 · --muted #a3a3ad · --accent #7c7cf0
Before it runs
- Figures that carry a point — three to six, each with a plain label; a wall of vanity numbers reads as noise.
- Values a bar can compare; a figure with a unit ('60 fps') counts the number and keeps the unit fixed beside it.
- A palette of five values — the ground, the tiles and the bars are drawn from them.
When to reach for it
When the proof is in the numbers — the figures that make a case: what it does, how fast, how little it costs. The count-up and the layout are fixed; the figures and their labels are yours.
What changes
- A single index.html with no build step and no outside request: one stats section whose figures animate on arrival.
- Each figure counts up from zero to its value when the section first scrolls into view, once, in a short staggered order.
- Every tile carries a number, a label beneath it, and a small bar that fills to match — so the size is felt, not just read.
- A quiet header sets the figures up: an eyebrow and one line, no numbers of its own.
- With reduced motion the figures show their final value at once and the bars sit filled — the information without the count.
Pairs with
- 404 Error PageOne line in, one self-contained index.html out: a full-viewport 404 screen — a giant code numeral over a drawn ground, one line of apology, and a single way back home.
- Mobile Profile PageOne line in, one self-contained index.html out: a single mobile screen inside a phone frame — a drawn media header, an identity block, a grid of glass stat cards, and a half-card that teases the scroll.
- One-File Landing PageOne brief in, one self-contained index.html out: a whole landing page in a single file — a scroll-aware nav, a hero, a highlighted statement, a feature grid, a closing call and a footer, every section rising as it comes into view.