Counter
Animated number with grouping, decimals, an odometer roll and a reserved width.
Primitive
$ npx remotion-ui@latest add counterRamps from from to to on an ease-out, so the number decelerates into its landing instead of arriving at constant speed.
The width is reserved from the longest value the ramp can produce, so a centred number never reflows the line around it. roll turns each digit like an odometer: the lowest column turns continuously and every column above it holds its face until the ones below are nearly wrapped, then flips through on the carry. With decimals, the freely turning column is the last decimal place, not the units.
Every slot (a rolling digit, a group separator, the decimal point, a prefix or suffix) is a box exactly one digit tall with the glyph placed by half-leading, so all of them resolve to the same baseline at the same size, and each wheel is clipped to that one row. Nothing in the roll scales, fades or blurs, and turning roll on or off does not move the number or change the space it takes.
The width is reserved from the longest value the ramp can produce, so a centred number never reflows the line around it. Every rolling column shares one baseline and one size with the separators and is clipped to a single digit row, so nothing bleeds out of the number's line box.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/counter- Use when: data stories, metrics, charts, and numeric proof points.
- Customize: to, from, durationInFrames, delayInFrames, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { Counter } from "@/remotion/primitives/counter";
<Counter from={0} to={124000} roll durationInFrames={64} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| to* | number | - | Value the count lands on. |
| from | number | 0 | Value the count starts from. |
| durationInFrames | number | 60 | Frames over which the value ramps. |
| delayInFrames | number | 0 | Frames before the ramp starts. |
| decimals | number | 0 | Fixed decimal places. Also fixes the width, so nothing shifts. |
| grouping | boolean | true | Group thousands with the locale's separator. |
| locale | string | - | Locale for grouping and decimal marks. |
| format | (value: number) => string | - | Full override of the number formatting. |
| prefix | string | - | Text before the number, e.g. a currency mark. |
| suffix | string | - | Text after the number, e.g. %, K, M. |
| roll | boolean | false | Roll each digit like an odometer. The lowest column turns continuously and every column above it turns over on the carry. With decimals, the free column is the last decimal place. |
| spring | MotionSpring | - | Drive the ramp with a spring instead of the ease-out curve. |
| settle | boolean | true | Small scale pop on the frame the number lands. |
| fontSize | number | scaled 96px | Text size in pixels. |
| fontWeight | number | 700 | Text weight. |
| color | string | - | Text colour. |
| fontFamily | string | - | Font family for the number. |
| style | CSSProperties | - | Styles merged onto the number. |