Data Story
Data storytelling composition template.
CompositionCompositionsAdvanced
Install
$ npx remotion-ui@latest add data-storydata-story30fps · 1920×1080
00:00:00
00:14:00
Export snippet
import { DataStory } from "@/compositions/data-story";
<DataStory
title="Quarterly reach by channel"
insight="The best motion is code you can read and change."
ctaLabel="Browse components"
/>Turn metrics, chart data, and process context into a complete explainer.
1920×1080 data explainer template. Advanced tier.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/compositions/data-story- Use when: data stories, metrics, charts, and numeric proof points.
- Customize: title, subtitle, barData, metrics, 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 { DataStory } from "@/compositions/data-story";
<DataStory barData={barData} metrics={metrics} steps={steps} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | - | Opening hook headline (auto-fit). |
| subtitle | string | - | Supporting line under the hook. |
| barData* | ChartDatum[] | - | Bar chart data. |
| metrics* | MetricTickerItem[] | - | Metric cards. |
| steps* | TimelineStep[] | - | Context steps. |
| chartTitle | string | - | Headline on the bar chart scene. |
| metricsTitle | string | - | Headline on the metric ticker scene. |
| timelineTitle | string | - | Headline on the timeline scene. |
| insight | string | - | Takeaway quote in the insight bumper. |
| insightEyebrow | string | - | Eyebrow above the insight quote. |
| ctaTitle | string | - | End card headline (separate from hook). |
| ctaLabel | string | - | End card CTA pill label. |