Metric Ticker
KPI cards that count themselves in.
SceneData & mediaAdvanced
metric-ticker30fps · 960×540
Install
$ npx remotion-ui@latest add metric-tickerCards divide the full content width so the row reads as one panel. Values count
up on the card's own spring; a signed delta picks the arrow, the chip colour
and the tint of the trend sparkline underneath, which is drawn by
line-chart-draw.
A signed delta (+/-) picks the arrow, the chip colour, and the sparkline tint.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/scenes/metric-ticker- Use when: data stories, metrics, charts, and numeric proof points.
- Customize: metrics, title, eyebrow, valueFormatter, 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 { MetricTicker } from "@/remotion/scenes/metric-ticker";
<MetricTicker
title="Channel momentum"
metrics={[
{ label: "Views", value: 124000, delta: "+18%", trend: [62, 84, 96, 124] },
]}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| metrics* | MetricTickerItem[] | - | Metric cards — label, value, and optional prefix, suffix, delta, trend, color. |
| title | string | - | Scene title. |
| eyebrow | string | - | Short label above the title. |
| valueFormatter | (value: number) => string | formatCompactNumber | Formats the counted value. |
| maxCards | number | 4 | Cards beyond this count are dropped rather than squeezed. |
| accentColor | string | "#e8b86d" | Value colour, overridable per metric. |
| backgroundColor | string | "#080810" | Scene background. |