A figure that holds the frame alone over a field of dots, then shrinks to make room for the rest of its number and the noun it counts
This is the format it was composed for. Switch above to see it lay itself out for another: same animation, re-arranged for the frame.
Everything below can be changed without touching the animation. Hand the list to an agent, or edit the values at the bottom of the component file.
The words in front of the figure at the start, which are dropped when the figure takes the frame. Keep it to two or three: they exist to be taken away.
now: With over
The part of the figure that stands alone. In the reference it is the first two digits, which is what makes the reveal work: it is a number you cannot place yet.
now: 17
The rest of the figure, arriving after the hold. Written exactly as it should read, separator included.
now: ,000
The noun the figure counts, arriving last and set lighter than the number. One word.
now: customers
Dot columns across the frame. Eight matches the reference; more than ten and the field starts reading as texture rather than as counting.
now: 8
Dot rows. Five matches the reference, with the middle row running behind the line.
now: 5
Brand token id. The field takes the accent at the edges and the accentAlt toward the middle, so a brand with two distinct accents reads best.
now: frost
No Tailwind, no CSS, no asset files. Inline styles only.
A near-white lavender frame filling with a regular grid of round dots, violet at the edges and blue toward the middle, each swelling in from nothing. A line of dark type across the middle reads as a sentence, then drops everything but its figure, which holds the frame large and alone. The rest of the number arrives beside it, then the noun it counts, and the whole line shrinks to make room for them while the field drifts slowly behind.