Stat Card
A number landing — ring, counter, label, and the change behind it.
SceneScenes
stat-card30fps · 960×540
Install
$ npx remotion-ui@latest add stat-cardThe ring fills while the counter rolls up under it, the label settles, and
delta lands last — after the number it qualifies has stopped moving.
Pass max when the value is a share and the ring becomes a meter filling to
value / max. Leave it out for a count and the ring draws a full sweep instead,
so "3 dependencies" is not rendered as 3% of something.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/scenes/stat-card- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: value, max, suffix, prefix, 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 { StatCard } from "@/remotion/scenes/stat-card";
<StatCard value={98} label="Satisfaction" suffix="%" />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | 98 | Number the counter lands on. |
| max | number | - | What the value is out of. With it the ring is a meter; without it the ring draws a full sweep. |
| suffix | string | "%" | Unit after the number. |
| prefix | string | - | Unit before the number. |
| decimals | number | 0 | Decimal places while counting and at rest. |
| label | string | "Satisfaction" | Metric label. |
| caption | string | - | Line under the label — source, window, cohort. |
| delta | number | - | Change against the previous period; lands after the number settles. |
| deltaSuffix | string | "%" | Unit on the delta chip. |
| accentColor | string | "#2DD4BF" | Ring, suffix, and delta colour. |
| theme | "dark" | "light" | "dark" | Surface palette. |
| speed | number | 1 | Animation speed multiplier. |