RemotionUI

Counter

Animated number counter.

PrimitivePrimitives

counter30fps · 960×540
Install
$ npx remotion-ui@latest add counter

Animated number counter.

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, suffix, plus copied source for timing, layout, colors, and typography.
  • Rule: do not import this component from the remotion-ui npm package; it is copied into your project.

Usage

Example
import { Counter } from "@/remotion/primitives/counter"; <Counter from={0} to={100} suffix="%" durationInFrames={45} />

API Reference

PropTypeDescription
to*numberTarget value to count toward.
fromnumberStarting value.
durationInFramesnumberFrames over which the count animates.
suffixstringText appended after the number (e.g. %, K, M).

Related