{
  "name": "intro",
  "type": "registry:block",
  "description": "5-second branded intro composition",
  "dependencies": [
    "remotion"
  ],
  "registryDependencies": [
    "title-card",
    "fade-out",
    "motion-tokens"
  ],
  "composition": {
    "id": "Intro",
    "component": "Intro",
    "durationInFrames": 150,
    "fps": 30,
    "width": 1920,
    "height": 1080,
    "importPath": "@/compositions/intro/index"
  },
  "compat": {
    "remotion": "^4.0.0"
  },
  "files": [
    {
      "path": "registry/bases/default/compositions/intro/index.tsx",
      "type": "registry:block",
      "content": "import { AbsoluteFill, Sequence, useVideoConfig } from \"remotion\";\nimport { FadeOut } from \"@/remotion/primitives/fade-out\";\nimport { DELAY } from \"@/remotion/lib/motion-tokens\";\nimport { TitleCard } from \"@/remotion/scenes/title-card\";\n\nconst COLORS = {\n  bg: \"#080810\",\n  accent: \"#e8b86d\",\n  subtitle: \"#71717a\",\n} as const;\n\nexport type IntroProps = {\n  title?: string;\n  subtitle?: string;\n  backgroundColor?: string;\n  accentColor?: string;\n};\n\nexport const Intro: React.FC<IntroProps> = ({\n  title = \"Chapter open\",\n  subtitle = \"Name the topic before the walkthrough begins\",\n  backgroundColor = COLORS.bg,\n  accentColor = COLORS.accent,\n}) => {\n  const { fps } = useVideoConfig();\n  const premountFor = Math.round(fps * 0.5) + DELAY.short;\n\n  return (\n    <AbsoluteFill\n      style={{\n        backgroundColor,\n        backgroundImage:\n          \"radial-gradient(ellipse 70% 55% at 50% 40%, rgba(232,184,109,0.08), transparent)\",\n      }}\n    >\n      <Sequence durationInFrames={120} premountFor={premountFor}>\n        <TitleCard\n          title={title}\n          subtitle={subtitle}\n          backgroundColor={backgroundColor}\n          accentColor={accentColor}\n        />\n      </Sequence>\n      <Sequence from={120} durationInFrames={30} premountFor={premountFor}>\n        <FadeOut durationInFrames={30}>\n          <TitleCard\n            title={title}\n            subtitle={subtitle}\n            backgroundColor={backgroundColor}\n            accentColor={accentColor}\n          />\n        </FadeOut>\n      </Sequence>\n    </AbsoluteFill>\n  );\n};\n"
    }
  ],
  "atlas": {
    "lane": "reels",
    "drive": "time",
    "tier": "core"
  }
}