{
  "name": "creator-reel",
  "type": "registry:block",
  "description": "Vertical creator media composition template",
  "dependencies": [
    "remotion",
    "@remotion/captions",
    "@remotion/transitions"
  ],
  "registryDependencies": [
    "auto-fit-title",
    "talking-head-layout",
    "comment-callout",
    "caption-scene",
    "b-roll-stack",
    "end-card",
    "transition-fade",
    "motion-tokens"
  ],
  "composition": {
    "id": "CreatorReel",
    "component": "CreatorReel",
    "durationInFrames": 390,
    "fps": 30,
    "width": 1080,
    "height": 1920,
    "importPath": "@/compositions/creator-reel/index"
  },
  "files": [
    {
      "path": "registry/bases/default/compositions/creator-reel/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 { AutoFitTitle } from \"@/remotion/scenes/auto-fit-title\";\nimport { BRollStack, type BRollItem } from \"@/remotion/scenes/b-roll-stack\";\nimport { CaptionScene } from \"@/remotion/scenes/caption-scene\";\nimport { CommentCallout } from \"@/remotion/scenes/comment-callout\";\nimport { EndCard } from \"@/remotion/scenes/end-card\";\nimport {\n  TalkingHeadLayout,\n  type TalkingHeadLayoutProps,\n} from \"@/remotion/scenes/talking-head-layout\";\nimport {\n  DEMO_MEDIA_ALT_SRC,\n  DEMO_MEDIA_SRC,\n  DEMO_MEDIA_THIRD_SRC,\n} from \"@/lib/demo-assets\";\n\n/** Sample deck so the out-of-the-box preview doesn't render an empty stack. */\nconst DEFAULT_B_ROLL_ITEMS: BRollItem[] = [\n  {\n    src: DEMO_MEDIA_SRC,\n    title: \"Script\",\n    caption: \"Outline the hook and the proof beat\",\n  },\n  {\n    src: DEMO_MEDIA_ALT_SRC,\n    title: \"Record\",\n    caption: \"One take, framed for the talking head\",\n  },\n  {\n    src: DEMO_MEDIA_THIRD_SRC,\n    title: \"Publish\",\n    caption: \"Cut, caption, and ship the clip\",\n  },\n];\n\nconst COLORS = {\n  bg: \"#080810\",\n  hookBg: \"#0c0c14\",\n  hookAccent: \"#e8b86d\",\n  talkBg: \"#0a1014\",\n  talkAccent: \"#f59e0b\",\n  captionActive: \"#f59e0b\",\n  commentBg: \"#0c0c14\",\n  commentAccent: \"#2dd4bf\",\n  bRollBg: \"#080810\",\n  bRollAccent: \"#e8b86d\",\n  endBg: \"#080810\",\n  endAccent: \"#f59e0b\",\n} as const;\n\nconst SCENE_DURATIONS = {\n  hook: 68,\n  talkingHead: 128,\n  comment: 84,\n  bRoll: 96,\n  end: 62,\n} as const;\n\nconst FADE = transitionFade({ durationInFrames: DURATION.fast });\n\nexport type CreatorReelProps = {\n  hookHeadline?: string;\n  hookSubtitle?: string;\n  mediaSrc?: string;\n  mediaFit?: TalkingHeadLayoutProps[\"fit\"];\n  audioSrc?: string;\n  captions?: Caption[];\n  comment?: string;\n  author?: string;\n  handle?: string;\n  bRollItems?: BRollItem[];\n  bRollTitle?: string;\n  bRollKicker?: string;\n  ctaTitle?: string;\n  ctaLabel?: string;\n  accentColor?: string;\n  talkingHeadEyebrow?: string;\n  talkingHeadTitle?: string;\n};\n\nexport const CreatorReel: React.FC<CreatorReelProps> = ({\n  hookHeadline = \"Make the first second count\",\n  hookSubtitle = \"Hook viewers before they scroll\",\n  mediaSrc,\n  mediaFit = \"cover\",\n  audioSrc,\n  captions,\n  comment = \"Can you break down how you built that transition?\",\n  author = \"Alex Chen\",\n  handle = \"@alexchen\",\n  bRollItems = DEFAULT_B_ROLL_ITEMS,\n  bRollTitle = \"Script → Record → Publish\",\n  bRollKicker = \"Proof beats\",\n  ctaTitle = \"Install compositions as source\",\n  ctaLabel,\n  accentColor = COLORS.hookAccent,\n  talkingHeadEyebrow = \"Creator workflow\",\n  talkingHeadTitle = \"Clip the sharpest moment\",\n}) => (\n  <AbsoluteFill style={{ backgroundColor: COLORS.bg }}>\n    <TransitionSeries>\n      <TransitionSeries.Sequence durationInFrames={SCENE_DURATIONS.hook}>\n        <AutoFitTitle\n          title={hookHeadline}\n          subtitle={hookSubtitle}\n          maxFontSize={72}\n          accentColor={accentColor}\n          backgroundColor={COLORS.hookBg}\n        />\n      </TransitionSeries.Sequence>\n      <TransitionSeries.Transition {...FADE} />\n      <TransitionSeries.Sequence durationInFrames={SCENE_DURATIONS.talkingHead}>\n        <AbsoluteFill>\n          <TalkingHeadLayout\n            mediaSrc={mediaSrc}\n            fit={mediaFit}\n            audioSrc={audioSrc}\n            eyebrow={talkingHeadEyebrow}\n            title={talkingHeadTitle}\n            accentColor={COLORS.talkAccent}\n            backgroundColor={COLORS.talkBg}\n            speed={1.35}\n          />\n          {captions && captions.length > 0 ? (\n            <CaptionScene\n              captions={captions}\n              placement=\"lower-third\"\n              activeColor={COLORS.captionActive}\n              mode=\"karaoke-scale\"\n              durationInFrames={SCENE_DURATIONS.talkingHead}\n            />\n          ) : null}\n        </AbsoluteFill>\n      </TransitionSeries.Sequence>\n      <TransitionSeries.Transition {...FADE} />\n      <TransitionSeries.Sequence durationInFrames={SCENE_DURATIONS.comment}>\n        <CommentCallout\n          body={comment}\n          author={author}\n          handle={handle}\n          accentColor={COLORS.commentAccent}\n          backgroundColor={COLORS.commentBg}\n          speed={1.7}\n        />\n      </TransitionSeries.Sequence>\n      <TransitionSeries.Transition {...FADE} />\n      <TransitionSeries.Sequence durationInFrames={SCENE_DURATIONS.bRoll}>\n        <BRollStack\n          items={bRollItems}\n          kicker={bRollKicker}\n          title={bRollTitle}\n          // The deck has to walk every shot inside a 96-frame window.\n          holdSeconds={0.9}\n          speed={1.5}\n          accentColor={COLORS.bRollAccent}\n          backgroundColor={COLORS.bRollBg}\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": "media",
    "tier": "advanced",
    "tags": [
      "creator",
      "social"
    ]
  }
}