{
  "name": "dashboard-populate",
  "type": "registry:block",
  "description": "Dashboard metrics populate",
  "dependencies": [
    "remotion",
    "@remotion/transitions"
  ],
  "registryDependencies": [
    "metric-ticker",
    "animated-bar-chart",
    "motion-tokens",
    "transition-fade"
  ],
  "composition": {
    "id": "DashboardPopulate",
    "component": "DashboardPopulate",
    "durationInFrames": 180,
    "fps": 30,
    "width": 1920,
    "height": 1080,
    "importPath": "@/compositions/dashboard-populate/index"
  },
  "files": [
    {
      "path": "registry/bases/default/compositions/dashboard-populate/index.tsx",
      "type": "registry:block",
      "content": "import { AbsoluteFill } from \"remotion\";\nimport { TransitionSeries } from \"@remotion/transitions\";\nimport { transitionFade } from \"@/remotion/primitives/transition-fade\";\nimport { AnimatedBarChart } from \"@/remotion/scenes/animated-bar-chart\";\nimport { MetricTicker, type MetricTickerItem } from \"@/remotion/scenes/metric-ticker\";\nimport { DURATION } from \"@/remotion/lib/motion-tokens\";\nimport type { ChartDatum } from \"@/remotion/lib/chart-utils\";\n\nconst BAR_DATA: ChartDatum[] = [\n  { label: \"Mon\", value: 42 },\n  { label: \"Tue\", value: 58 },\n  { label: \"Wed\", value: 71 },\n  { label: \"Thu\", value: 64 },\n];\n\nconst METRICS: MetricTickerItem[] = [\n  { label: \"Active users\", value: 12400, suffix: \"\", delta: \"+18%\" },\n  { label: \"Render time\", value: 4, suffix: \"s\", delta: \"-12%\" },\n];\n\nconst SCENE_DURATIONS = {\n  metrics: 90,\n  chart: 90,\n} as const;\n\nexport type DashboardPopulateProps = {\n  metrics?: MetricTickerItem[];\n  barData?: ChartDatum[];\n  metricsTitle?: string;\n  chartTitle?: string;\n  backgroundColor?: string;\n};\n\nexport const DashboardPopulate: React.FC<DashboardPopulateProps> = ({\n  metrics = METRICS,\n  barData = BAR_DATA,\n  metricsTitle = \"Dashboard waking up\",\n  chartTitle = \"Weekly throughput\",\n  backgroundColor = \"#080810\",\n}) => {\n  const fade = transitionFade({ durationInFrames: DURATION.fast });\n\n  return (\n    <AbsoluteFill style={{ background: backgroundColor }}>\n      <TransitionSeries>\n        <TransitionSeries.Sequence durationInFrames={SCENE_DURATIONS.metrics}>\n          <MetricTicker metrics={metrics} title={metricsTitle} />\n        </TransitionSeries.Sequence>\n        <TransitionSeries.Transition {...fade} />\n        <TransitionSeries.Sequence durationInFrames={SCENE_DURATIONS.chart}>\n          <AnimatedBarChart data={barData} title={chartTitle} />\n        </TransitionSeries.Sequence>\n      </TransitionSeries>\n    </AbsoluteFill>\n  );\n};\n"
    }
  ],
  "atlas": {
    "lane": "reels",
    "drive": "data",
    "tier": "advanced"
  }
}