Data Story

Recipes

Data Story

Chart-led video with animated metrics and timeline context.

Install

$ npx remotion-ui@latest add --recipe data-story

Render

$ npx remotion render src/Root.tsx DataStory out/data-story.mp4

Usage notes

Use DataStory for a full composition.
Use AnimatedBarChart, MetricTicker, and TimelineSteps for custom scenes.
Convert your data into typed arrays before rendering.
Keep text short and video-readable; split long explanations across scenes.
Import installed components from local source paths, not from remotion-ui.

Agent notes

Prefer this recipe when the user asks for a chart-led explainer or metrics video.

Typical imports

Imports

import { DataStory } from "@/compositions/data-story";
import { AnimatedBarChart } from "@/remotion/scenes/animated-bar-chart";
import { MetricTicker } from "@/remotion/scenes/metric-ticker";

Creator Reel

Vertical creator clip with hook, talking head, comment callout, B-roll, and CTA.

Podcast Clip

Audio-first clip with waveform visuals and synced captions.