lower-third

1import { loadFont } from "@remotion/google-fonts/Inter";
2import {
3  AbsoluteFill,
4  interpolate,
5  spring,
6  useCurrentFrame,
7  useVideoConfig,
8} from "remotion";
9import { CODE_THEMES } from "@/remotion/lib/code-syntax";
10import { getSafeAreaPadding } from "@/remotion/lib/layout";
11import { EASING } from "@/remotion/lib/motion-tokens";
12 
13const { fontFamily } = loadFont("normal", {
14  weights: ["400", "500", "600", "700"],
15  subsets: ["latin"],
16});
17 
18export type LowerThirdProps = {
19  title: string;
20  subtitle?: string;
21  /** Small tag on the plate — LIVE, EP 12, the segment name. */
22  badge?: string;
23  /** Which edge the plate slides out from. */
24  align?: "left" | "right";
25  /**
26   * Seconds the plate holds before it retreats. Omit to leave it on screen for
27   * the rest of the scene.
28   */
29  holdSeconds?: number;
30  accentColor?: string;
31  backgroundColor?: string;
32  theme?: "dark" | "light";
33  /** Animation speed multiplier. */
34  speed?: number;
35};
36 
37/** Beat plan in seconds. */
38const T = {
39  /** Plate wipes out from the frame edge. */
40  plate: 0,
41  plateFor: 0.5,
42  title: 0.22,
43  subtitle: 0.38,
44  badge: 0.5,
45  /** Retreat, once the hold is over. */
46  exitFor: 0.42,
47} as const;
48 
49const clamp = {
50  extrapolateLeft: "clamp",
51  extrapolateRight: "clamp",
52} as const;
53 
54/**
55 * A name plate that plays its whole life: it wipes out from the frame edge, the
56 * name and role settle inside it, it holds, and then it retreats the way it
57 * came — rather than fading on and being left standing for the rest of the cut.
58 */
59export const LowerThird: React.FC<LowerThirdProps> = ({
60  title,
61  subtitle,
62  badge,
63  align = "left",
64  holdSeconds,
65  accentColor = "#E8B86D",
66  backgroundColor,
67  theme = "dark",
68  speed = 1,
69}) => {
70  const frame = useCurrentFrame();
71  const { fps, width, height } = useVideoConfig();
72  const palette = CODE_THEMES[theme];
73  const safe = getSafeAreaPadding({ width, height });
74 
75  const at = (seconds: number) => (seconds * fps) / speed;
76  const ease = (from: number, to: number, easing = EASING.enter) =>
77    interpolate(frame, [at(from), at(to)], [0, 1], { easing, ...clamp });
78 
79  const portrait = height > width;
80  const u = portrait
81    ? Math.min(width / 620, height / 1120)
82    : Math.min(width / 1280, height / 720);
83  const isRight = align === "right";
84 
85  const plate = spring({
86    frame: frame - at(T.plate),
87    fps,
88    config: { damping: 17, stiffness: 130, mass: 0.8 },
89  });
90  const open = ease(T.plate, T.plate + T.plateFor, EASING.editorial);
91// … truncated