This component no longer exists. It was in remotionui’s manifest when we first indexed it and is not there now — the registry served its inventory on 2026-08-11 and this item was not on it. The install command below will fail. It is kept here because a tutorial somewhere still tells people to run it.

data-story

remotionui/data-story

RemovedBlock

Data storytelling composition template

Live preview

live · rendered by the registry

Rendered by remotionui on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://remotionui.com/r/data-story.json

Source

registry/bases/default/compositions/data-story/index.tsxremotionui.com/r/data-story.json

1import { AbsoluteFill } from "remotion";
2import { TransitionSeries } from "@remotion/transitions";
3import { transitionFade } from "@/remotion/primitives/transition-fade";
4import { DURATION } from "@/remotion/lib/motion-tokens";
5import { AnimatedBarChart } from "@/remotion/scenes/animated-bar-chart";
6import { AutoFitTitle } from "@/remotion/scenes/auto-fit-title";
7import { CaptionBumper } from "@/remotion/scenes/caption-bumper";
8import { EndCard } from "@/remotion/scenes/end-card";
9import { MetricTicker, type MetricTickerItem } from "@/remotion/scenes/metric-ticker";
10import { TimelineSteps, type TimelineStep } from "@/remotion/scenes/timeline-steps";
11import type { ChartDatum } from "@/remotion/lib/chart-utils";
12 
13const COLORS = {
14  bg: "#080810",
15  hookBg: "#0c0c14",
16  hookAccent: "#e8b86d",
17  chartBg: "#080810",
18  chartBar: "#2dd4bf",
19  tickerBg: "#0a1014",
20  tickerAccent: "#2dd4bf",
21  timelineBg: "#0c0c14",
22  timelineAccent: "#f59e0b",
23  insightBg: "#080810",
24  insightAccent: "#2dd4bf",
25  endBg: "#080810",
26  endAccent: "#e8b86d",
27} as const;
28 
29const SCENE_DURATIONS = {
30  hook: 68,
31  chart: 108,
32  metrics: 88,
33  timeline: 88,
34  insight: 66,
35  end: 62,
36} as const;
37 
38const FADE = transitionFade({ durationInFrames: DURATION.fast });
39 
40export type DataStoryProps = {
41  title?: string;
42  subtitle?: string;
43  barData: ChartDatum[];
44  metrics: MetricTickerItem[];
45  steps: TimelineStep[];
46  chartTitle?: string;
47  metricsTitle?: string;
48  timelineTitle?: string;
49  insight?: string;
50  insightEyebrow?: string;
51  ctaTitle?: string;
52  ctaLabel?: string;
53};
54 
55export const DataStory: React.FC<DataStoryProps> = ({
56  title = "Quarterly reach by channel",
57  subtitle = "Short-form climbed while long-form held attention",
58  barData,
59  metrics,
60  steps,
61  chartTitle = "Views by format",
62  metricsTitle = "Signals that mattered",
63  timelineTitle = "How we read the quarter",
64  insight = "Short-form drove reach; long-form kept attention.",
65  insightEyebrow = "Takeaway",
66  ctaTitle = "Turn your data into motion",
67  ctaLabel,
68}) => (
69  <AbsoluteFill style={{ backgroundColor: COLORS.bg }}>
70    <TransitionSeries>
71      <TransitionSeries.Sequence durationInFrames={SCENE_DURATIONS.hook}>
72        <AutoFitTitle
73          title={title}
74          subtitle={subtitle}
75          maxFontSize={88}
76          accentColor={COLORS.hookAccent}
77          backgroundColor={COLORS.hookBg}
78        />
79      </TransitionSeries.Sequence>
80      <TransitionSeries.Transition {...FADE} />
81// … truncated