podcast-clip

1import type { Caption } from "@remotion/captions";
2import { loadFont } from "@remotion/google-fonts/Inter";
3import {
4  AbsoluteFill,
5  useCurrentFrame,
6  useVideoConfig,
7} from "remotion";
8import { TransitionSeries } from "@remotion/transitions";
9import { transitionFade } from "@/remotion/primitives/transition-fade";
10import { AudioPulse } from "@/remotion/primitives/audio-pulse";
11import { FadeIn } from "@/remotion/primitives/fade-in";
12import { WaveformLine } from "@/remotion/primitives/waveform-line";
13import { getSafeAreaPadding, scaleFont } from "@/remotion/lib/layout";
14import { DURATION } from "@/remotion/lib/motion-tokens";
15import { CaptionScene } from "@/remotion/scenes/caption-scene";
16import { EndCard } from "@/remotion/scenes/end-card";
17 
18const { fontFamily } = loadFont("normal", {
19  weights: ["400", "700", "800"],
20  subsets: ["latin"],
21});
22 
23const COLORS = {
24  bg: "#080810",
25  introBg: "#0c0c14",
26  accent: "#e8b86d",
27  accentSoft: "#f5d08a",
28  studioBg: "#0a1014",
29  studioGlow: "rgba(232,184,109,0.14)",
30  waveform: "#f59e0b",
31  quoteBg: "#080810",
32  endBg: "#080810",
33  endAccent: "#2dd4bf",
34  muted: "#71717a",
35} as const;
36 
37const fade = transitionFade({ durationInFrames: DURATION.fast });
38 
39/** Matches the caption slot's own `TransitionSeries.Sequence` below. */
40const CAPTION_SLOT_DURATION = 90;
41 
42export type PodcastClipProps = {
43  audioSrc: string;
44  captions: Caption[];
45  title?: string;
46  subtitle?: string;
47  showName?: string;
48  ctaTitle?: string;
49  ctaLabel?: string;
50};
51 
52const PodcastIntro: React.FC<{
53  title: string;
54  subtitle: string;
55  audioSrc: string;
56}> = ({ title, subtitle, audioSrc }) => {
57  const { width, height } = useVideoConfig();
58  const safeArea = getSafeAreaPadding({ width, height });
59  const pulseSize = scaleFont(280, width);
60 
61  return (
62    <AbsoluteFill
63      style={{
64        backgroundColor: COLORS.introBg,
65        backgroundImage: `radial-gradient(ellipse 80% 60% at 50% 30%, ${COLORS.studioGlow}, transparent)`,
66        ...safeArea,
67        fontFamily,
68        display: "flex",
69        flexDirection: "column",
70        alignItems: "center",
71        justifyContent: "center",
72        gap: scaleFont(36, width),
73      }}
74    >
75      <FadeIn durationInFrames={DURATION.fast}>
76        <AudioPulse src={audioSrc} size={pulseSize} color={COLORS.accent} ringCount={4} />
77      </FadeIn>
78      <FadeIn delayInFrames={DURATION.fast} durationInFrames={DURATION.fast}>
79        <div style={{ textAlign: "center", maxWidth: width * 0.72 }}>
80// … truncated