creator-reel

1import type { Caption } from "@remotion/captions";
2import { AbsoluteFill } from "remotion";
3import { TransitionSeries } from "@remotion/transitions";
4import { transitionFade } from "@/remotion/primitives/transition-fade";
5import { DURATION } from "@/remotion/lib/motion-tokens";
6import { AutoFitTitle } from "@/remotion/scenes/auto-fit-title";
7import { BRollStack, type BRollItem } from "@/remotion/scenes/b-roll-stack";
8import { CaptionScene } from "@/remotion/scenes/caption-scene";
9import { CommentCallout } from "@/remotion/scenes/comment-callout";
10import { EndCard } from "@/remotion/scenes/end-card";
11import {
12  TalkingHeadLayout,
13  type TalkingHeadLayoutProps,
14} from "@/remotion/scenes/talking-head-layout";
15import {
16  DEMO_MEDIA_ALT_SRC,
17  DEMO_MEDIA_SRC,
18  DEMO_MEDIA_THIRD_SRC,
19} from "@/lib/demo-assets";
20 
21/** Sample deck so the out-of-the-box preview doesn't render an empty stack. */
22const DEFAULT_B_ROLL_ITEMS: BRollItem[] = [
23  {
24    src: DEMO_MEDIA_SRC,
25    title: "Script",
26    caption: "Outline the hook and the proof beat",
27  },
28  {
29    src: DEMO_MEDIA_ALT_SRC,
30    title: "Record",
31    caption: "One take, framed for the talking head",
32  },
33  {
34    src: DEMO_MEDIA_THIRD_SRC,
35    title: "Publish",
36    caption: "Cut, caption, and ship the clip",
37  },
38];
39 
40const COLORS = {
41  bg: "#080810",
42  hookBg: "#0c0c14",
43  hookAccent: "#e8b86d",
44  talkBg: "#0a1014",
45  talkAccent: "#f59e0b",
46  captionActive: "#f59e0b",
47  commentBg: "#0c0c14",
48  commentAccent: "#2dd4bf",
49  bRollBg: "#080810",
50  bRollAccent: "#e8b86d",
51  endBg: "#080810",
52  endAccent: "#f59e0b",
53} as const;
54 
55const SCENE_DURATIONS = {
56  hook: 68,
57  talkingHead: 128,
58  comment: 84,
59  bRoll: 96,
60  end: 62,
61} as const;
62 
63const FADE = transitionFade({ durationInFrames: DURATION.fast });
64 
65export type CreatorReelProps = {
66  hookHeadline?: string;
67  hookSubtitle?: string;
68  mediaSrc?: string;
69  mediaFit?: TalkingHeadLayoutProps["fit"];
70  audioSrc?: string;
71  captions?: Caption[];
72  comment?: string;
73  author?: string;
74  handle?: string;
75  bRollItems?: BRollItem[];
76  bRollTitle?: string;
77  bRollKicker?: string;
78  ctaTitle?: string;
79  ctaLabel?: string;
80  accentColor?: string;
81  talkingHeadEyebrow?: string;
82  talkingHeadTitle?: string;
83};
84 
85export const CreatorReel: React.FC<CreatorReelProps> = ({
86  hookHeadline = "Make the first second count",
87  hookSubtitle = "Hook viewers before they scroll",
88  mediaSrc,
89  mediaFit = "cover",
90  audioSrc,
91  captions,
92// … truncated