Counter
Animated number with grouping, decimals, an odometer roll and a reserved width.
PrimitivePrimitives
counter30fps · 960×540
Install
$ 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 ones column spins continuously and every column above it waits for a carry.
The width is reserved from the longest value the ramp can produce, so a centred number never reflows the line around it.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/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
Example
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. Lower digits spin continuously; higher ones turn over on the carry. |
| 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. |