{
  "name": "social-clip",
  "type": "registry:block",
  "description": "9:16 social clip with hook, captions, and CTA",
  "dependencies": [
    "remotion",
    "@remotion/transitions",
    "@remotion/captions",
    "@remotion/media-utils"
  ],
  "registryDependencies": [
    "transition-fade",
    "auto-fit-title",
    "audiogram-scene",
    "caption-scene",
    "end-card",
    "motion-tokens"
  ],
  "composition": {
    "id": "SocialClip",
    "component": "SocialClip",
    "durationInFrames": 228,
    "fps": 30,
    "width": 1080,
    "height": 1920,
    "importPath": "@/compositions/social-clip/index"
  },
  "compat": {
    "remotion": "^4.0.0"
  },
  "files": [
    {
      "path": "registry/bases/default/compositions/social-clip/index.tsx",
      "type": "registry:block",
      "content": "import type { Caption } from \"@remotion/captions\";\nimport { AbsoluteFill } from \"remotion\";\nimport { TransitionSeries } from \"@remotion/transitions\";\nimport { transitionFade } from \"@/remotion/primitives/transition-fade\";\nimport { DURATION } from \"@/remotion/lib/motion-tokens\";\nimport { AudiogramScene } from \"@/remotion/scenes/audiogram-scene\";\nimport { AutoFitTitle } from \"@/remotion/scenes/auto-fit-title\";\nimport { CaptionScene } from \"@/remotion/scenes/caption-scene\";\nimport { EndCard } from \"@/remotion/scenes/end-card\";\nimport { DEMO_AUDIO_SRC, DEMO_SOCIAL_CLIP_CAPTIONS } from \"@/lib/demo-assets\";\n\nconst COLORS = {\n  bg: \"#050508\",\n  hookBg: \"#1a1510\",\n  hookAccent: \"#e8b86d\",\n  bodyBg: \"#0c1222\",\n  bodyAccent: \"#f59e0b\",\n  captionActive: \"#f59e0b\",\n  endBg: \"#111827\",\n  endAccent: \"#2dd4bf\",\n} as const;\n\nconst SCENE_DURATIONS = {\n  hook: 60,\n  body: 120,\n  end: 60,\n} as const;\n\nconst FADE = transitionFade({ durationInFrames: DURATION.fast });\n\nexport type SocialClipProps = {\n  hookTitle?: string;\n  hookSubtitle?: string;\n  logoSrc?: string;\n  audioSrc?: string;\n  captions?: Caption[];\n  podcastTitle?: string;\n  ctaTitle?: string;\n  ctaLabel?: string;\n  ctaUrl?: string;\n};\n\nexport const SocialClip: React.FC<SocialClipProps> = ({\n  hookTitle = \"This line stops the scroll\",\n  hookSubtitle = \"Lead with the sharpest quote from the episode\",\n  logoSrc,\n  audioSrc = DEMO_AUDIO_SRC,\n  captions = DEMO_SOCIAL_CLIP_CAPTIONS,\n  podcastTitle = \"Weekly Brief\",\n  ctaTitle = \"Hear the full episode\",\n  ctaLabel,\n  ctaUrl,\n}) => {\n  return (\n    <AbsoluteFill style={{ backgroundColor: COLORS.bg }}>\n      <TransitionSeries>\n        <TransitionSeries.Sequence durationInFrames={SCENE_DURATIONS.hook}>\n          <AutoFitTitle\n            title={hookTitle}\n            subtitle={hookSubtitle}\n            logoSrc={logoSrc}\n            maxFontSize={72}\n            accentColor={COLORS.hookAccent}\n            backgroundColor={COLORS.hookBg}\n          />\n        </TransitionSeries.Sequence>\n        <TransitionSeries.Transition {...FADE} />\n        <TransitionSeries.Sequence durationInFrames={SCENE_DURATIONS.body}>\n          <AbsoluteFill>\n            <AudiogramScene\n              src={audioSrc}\n              title={podcastTitle}\n              logoSrc={logoSrc}\n              backgroundColor={COLORS.bodyBg}\n              accentColor={COLORS.bodyAccent}\n            />\n            <CaptionScene\n              captions={captions}\n              placement=\"lower-third\"\n              activeColor={COLORS.captionActive}\n              mode=\"karaoke-scale\"\n              durationInFrames={SCENE_DURATIONS.body}\n            />\n          </AbsoluteFill>\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            logoSrc={logoSrc}\n            url={ctaUrl}\n            backgroundColor={COLORS.endBg}\n            accentColor={COLORS.endAccent}\n          />\n        </TransitionSeries.Sequence>\n      </TransitionSeries>\n    </AbsoluteFill>\n  );\n};\n"
    }
  ],
  "atlas": {
    "lane": "reels",
    "drive": "media",
    "tier": "advanced"
  }
}