{
  "name": "data-story",
  "type": "registry:block",
  "description": "Data storytelling composition template",
  "dependencies": [
    "remotion",
    "@remotion/transitions",
    "@remotion/layout-utils"
  ],
  "registryDependencies": [
    "auto-fit-title",
    "animated-bar-chart",
    "metric-ticker",
    "timeline-steps",
    "caption-bumper",
    "end-card",
    "transition-fade",
    "chart-utils",
    "motion-tokens"
  ],
  "composition": {
    "id": "DataStory",
    "component": "DataStory",
    "durationInFrames": 420,
    "fps": 30,
    "width": 1920,
    "height": 1080,
    "importPath": "@/compositions/data-story/index"
  },
  "files": [
    {
      "path": "registry/bases/default/compositions/data-story/index.tsx",
      "type": "registry:block",
      "content": "import { AbsoluteFill } from \"remotion\";\nimport { TransitionSeries } from \"@remotion/transitions\";\nimport { transitionFade } from \"@/remotion/primitives/transition-fade\";\nimport { DURATION } from \"@/remotion/lib/motion-tokens\";\nimport { AnimatedBarChart } from \"@/remotion/scenes/animated-bar-chart\";\nimport { AutoFitTitle } from \"@/remotion/scenes/auto-fit-title\";\nimport { CaptionBumper } from \"@/remotion/scenes/caption-bumper\";\nimport { EndCard } from \"@/remotion/scenes/end-card\";\nimport { MetricTicker, type MetricTickerItem } from \"@/remotion/scenes/metric-ticker\";\nimport { TimelineSteps, type TimelineStep } from \"@/remotion/scenes/timeline-steps\";\nimport type { ChartDatum } from \"@/remotion/lib/chart-utils\";\n\nconst COLORS = {\n  bg: \"#080810\",\n  hookBg: \"#0c0c14\",\n  hookAccent: \"#e8b86d\",\n  chartBg: \"#080810\",\n  chartBar: \"#2dd4bf\",\n  tickerBg: \"#0a1014\",\n  tickerAccent: \"#2dd4bf\",\n  timelineBg: \"#0c0c14\",\n  timelineAccent: \"#f59e0b\",\n  insightBg: \"#080810\",\n  insightAccent: \"#2dd4bf\",\n  endBg: \"#080810\",\n  endAccent: \"#e8b86d\",\n} as const;\n\nconst SCENE_DURATIONS = {\n  hook: 68,\n  chart: 108,\n  metrics: 88,\n  timeline: 88,\n  insight: 66,\n  end: 62,\n} as const;\n\nconst FADE = transitionFade({ durationInFrames: DURATION.fast });\n\nexport type DataStoryProps = {\n  title?: string;\n  subtitle?: string;\n  barData: ChartDatum[];\n  metrics: MetricTickerItem[];\n  steps: TimelineStep[];\n  chartTitle?: string;\n  metricsTitle?: string;\n  timelineTitle?: string;\n  insight?: string;\n  insightEyebrow?: string;\n  ctaTitle?: string;\n  ctaLabel?: string;\n};\n\nexport const DataStory: React.FC<DataStoryProps> = ({\n  title = \"Quarterly reach by channel\",\n  subtitle = \"Short-form climbed while long-form held attention\",\n  barData,\n  metrics,\n  steps,\n  chartTitle = \"Views by format\",\n  metricsTitle = \"Signals that mattered\",\n  timelineTitle = \"How we read the quarter\",\n  insight = \"Short-form drove reach; long-form kept attention.\",\n  insightEyebrow = \"Takeaway\",\n  ctaTitle = \"Turn your data into motion\",\n  ctaLabel,\n}) => (\n  <AbsoluteFill style={{ backgroundColor: COLORS.bg }}>\n    <TransitionSeries>\n      <TransitionSeries.Sequence durationInFrames={SCENE_DURATIONS.hook}>\n        <AutoFitTitle\n          title={title}\n          subtitle={subtitle}\n          maxFontSize={88}\n          accentColor={COLORS.hookAccent}\n          backgroundColor={COLORS.hookBg}\n        />\n      </TransitionSeries.Sequence>\n      <TransitionSeries.Transition {...FADE} />\n      <TransitionSeries.Sequence durationInFrames={SCENE_DURATIONS.chart}>\n        <AnimatedBarChart\n          title={chartTitle}\n          data={barData}\n          backgroundColor={COLORS.chartBg}\n          barColor={COLORS.chartBar}\n        />\n      </TransitionSeries.Sequence>\n      <TransitionSeries.Transition {...FADE} />\n      <TransitionSeries.Sequence durationInFrames={SCENE_DURATIONS.metrics}>\n        <MetricTicker\n          title={metricsTitle}\n          metrics={metrics}\n          backgroundColor={COLORS.tickerBg}\n          accentColor={COLORS.tickerAccent}\n        />\n      </TransitionSeries.Sequence>\n      <TransitionSeries.Transition {...FADE} />\n      <TransitionSeries.Sequence durationInFrames={SCENE_DURATIONS.timeline}>\n        <TimelineSteps\n          // Three steps walked inside an 88-frame window.\n          speed={1.5}\n          title={timelineTitle}\n          steps={steps}\n          backgroundColor={COLORS.timelineBg}\n          accentColor={COLORS.timelineAccent}\n        />\n      </TransitionSeries.Sequence>\n      <TransitionSeries.Transition {...FADE} />\n      <TransitionSeries.Sequence durationInFrames={SCENE_DURATIONS.insight}>\n        <CaptionBumper\n          text={insight}\n          eyebrow={insightEyebrow}\n          backgroundColor={COLORS.insightBg}\n          accentColor={COLORS.insightAccent}\n        />\n      </TransitionSeries.Sequence>\n      <TransitionSeries.Transition {...FADE} />\n      <TransitionSeries.Sequence durationInFrames={SCENE_DURATIONS.end}>\n        <EndCard\n          speed={1.4}\n          title={ctaTitle}\n          cta={ctaLabel}\n          backgroundColor={COLORS.endBg}\n          accentColor={COLORS.endAccent}\n        />\n      </TransitionSeries.Sequence>\n    </TransitionSeries>\n  </AbsoluteFill>\n);\n"
    }
  ],
  "atlas": {
    "lane": "reels",
    "drive": "data",
    "tier": "advanced"
  }
}