Stat Card
A number landing. Ring, counter, label, and the change behind it.
Scene
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. |