social-clip

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 { AudiogramScene } from "@/remotion/scenes/audiogram-scene";
7import { AutoFitTitle } from "@/remotion/scenes/auto-fit-title";
8import { CaptionScene } from "@/remotion/scenes/caption-scene";
9import { EndCard } from "@/remotion/scenes/end-card";
10import { DEMO_AUDIO_SRC, DEMO_SOCIAL_CLIP_CAPTIONS } from "@/lib/demo-assets";
11 
12const COLORS = {
13  bg: "#050508",
14  hookBg: "#1a1510",
15  hookAccent: "#e8b86d",
16  bodyBg: "#0c1222",
17  bodyAccent: "#f59e0b",
18  captionActive: "#f59e0b",
19  endBg: "#111827",
20  endAccent: "#2dd4bf",
21} as const;
22 
23const SCENE_DURATIONS = {
24  hook: 60,
25  body: 120,
26  end: 60,
27} as const;
28 
29const FADE = transitionFade({ durationInFrames: DURATION.fast });
30 
31export type SocialClipProps = {
32  hookTitle?: string;
33  hookSubtitle?: string;
34  logoSrc?: string;
35  audioSrc?: string;
36  captions?: Caption[];
37  podcastTitle?: string;
38  ctaTitle?: string;
39  ctaLabel?: string;
40  ctaUrl?: string;
41};
42 
43export const SocialClip: React.FC<SocialClipProps> = ({
44  hookTitle = "This line stops the scroll",
45  hookSubtitle = "Lead with the sharpest quote from the episode",
46  logoSrc,
47  audioSrc = DEMO_AUDIO_SRC,
48  captions = DEMO_SOCIAL_CLIP_CAPTIONS,
49  podcastTitle = "Weekly Brief",
50  ctaTitle = "Hear the full episode",
51  ctaLabel,
52  ctaUrl,
53}) => {
54  return (
55    <AbsoluteFill style={{ backgroundColor: COLORS.bg }}>
56      <TransitionSeries>
57        <TransitionSeries.Sequence durationInFrames={SCENE_DURATIONS.hook}>
58          <AutoFitTitle
59            title={hookTitle}
60            subtitle={hookSubtitle}
61            logoSrc={logoSrc}
62            maxFontSize={72}
63            accentColor={COLORS.hookAccent}
64            backgroundColor={COLORS.hookBg}
65          />
66        </TransitionSeries.Sequence>
67        <TransitionSeries.Transition {...FADE} />
68        <TransitionSeries.Sequence durationInFrames={SCENE_DURATIONS.body}>
69          <AbsoluteFill>
70            <AudiogramScene
71              src={audioSrc}
72              title={podcastTitle}
73              logoSrc={logoSrc}
74              backgroundColor={COLORS.bodyBg}
75              accentColor={COLORS.bodyAccent}
76            />
77            <CaptionScene
78              captions={captions}
79              placement="lower-third"
80// … truncated