Primitives
Counter
Animated number counter.
Primitiveatoms
Install
npx remotion-ui@latest add counterAnimated number counter.
Live preview
AI usage
Install first, then import the copied source component locally.
Install
npx remotion-ui@latest add counterImport after install
@/remotion/primitives/counter- Use when: data stories, metrics, charts, and numeric proof points.
- Customize: to, from, durationInFrames, suffix, 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={100} suffix="%" durationInFrames={45} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| to* | number | — | Target value to count toward. |
| from | number | 0 | Starting value. |
| durationInFrames | number | 30 | Frames over which the count animates. |
| suffix | string | — | Text appended after the number (e.g. %, K, M). |