A number count-up is a numeric interpolation from a starting value to a target, rendered frame by frame, that ends on the actual value. The counting is only there to show accumulation; the figure it lands on is the point.
What it looks like
A headline metric starts at zero (or at last month's value) and climbs. The low digits blur past, the high digits barely move, and the number slows into its final value and rests there. An odometer version rolls each place like a wheel; a plainer version simply redraws the digits every frame. Either way, the last frame shows a number someone could write down.
When to use it, and when not to
Studio's movement dictionary calls this count-in and gives it one condition: choose it when accumulation matters, and remember that a known metric may simply appear complete. If the story is "we grew from 0 to 1,240", the count shows the growth. If the number is a fact like a price or a version, a fade or rise that reveals it whole is often clearer than making the viewer wait for it.
Use it when:
- Growth is the message. Downloads, stars, revenue, users: anything where "it went up" is half the story.
- One number is the hero of the shot. A recap opener, a results slide, a milestone card.
- The count is tied to something else moving. A chart filling, a list scrolling, a beat in the music.
Avoid it, or keep it short, when:
- The number never rests. A counter that is still moving when the scene cuts was never read. Budget the reading time after it lands, not just the count itself; Studio's timing rules treat "the graph reaches its value" as the event that makes the next action possible.
- Several counters run at once. Two moving numbers compete, and nobody reads either. Count them one after another, and see stagger for how to schedule a group so the next one waits for the last to finish.
- The digits jitter. If each digit has a different width, the whole number shifts sideways while it counts. Studio's review symptoms list "text shakes or glyphs change" as something to reproduce on consecutive frames and fix. Tabular (fixed-width) figures,
font-variant-numeric: tabular-numsin CSS, keep every digit the same width so the number stays still while it changes. - The final value is overly precise. Round it. 1,240 reads; 1,237.4 doesn't.
A count usually lands better with an easing that slows at the end than with a linear one, which looks like it stops dead on the last digit.
How to ask for it in Remocn Studio
Count up to 1,240 downloads, then hold for a second.
Give the real value, the label and the hold: "count stars from 0 to 3,400, label 'GitHub stars' appears after the number lands", "roll from last month's 980 to 1,240, then cut". If the number should simply be there, say so: "show the price whole, no count".
Before it finishes, Studio's agent runs a design check that flags text clipped by its box, covered by another layer, or leaving the frame. Reading time is still yours to judge: watch the video once at full speed. When the component you use declares its values as editable parameters, picking it in the preview opens the properties pane, where a number like the target can be dragged or typed.
Ready-made components
remocn ships several counters, each with a different feel:
- Rolling Number: an odometer where every place rolls at its own speed and settles exactly on the target.
- Number Wheel: an odometer that rolls from one value to another and infers the direction from the values.
- Hand Count: a number that counts up in stop-motion poses, rewritten by hand each time, for a paper look.
- GitHub Stars: a stargazer fly-through with a synced odometer counter.
Animated Bar Chart is not a counter, but it is the usual companion when a metric needs context: bars spring up from the baseline in a staggered cascade.
Related terms
Stagger covers scheduling several counters or bars so they don't overlap; easing shapes how the count slows into its value. For a full worked example, see your monthly numbers as a 20-second video. For a single number with a chart, follow the animated metric recipe.