caption-bumper

1import { loadFont } from "@remotion/google-fonts/Inter";
2import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
3import { CODE_THEMES } from "@/remotion/lib/code-syntax";
4import { getSafeAreaPadding } from "@/remotion/lib/layout";
5import { EASING } from "@/remotion/lib/motion-tokens";
6import { fitHeadline } from "@/remotion/lib/text-fit-utils";
7 
8const { fontFamily } = loadFont("normal", {
9  weights: ["500", "600", "700"],
10  subsets: ["latin"],
11});
12 
13export type CaptionBumperProps = {
14  /** The line the bumper exists to land. */
15  text: string;
16  /** Small label above it — segment, chapter, timestamp. */
17  eyebrow?: string;
18  /** Largest type size at a 1280-wide stage. */
19  maxFontSize?: number;
20  /**
21   * Seconds the line holds before the bumper wipes out. Omit to hold to the end
22   * of the composition.
23   */
24  holdSeconds?: number;
25  backgroundColor?: string;
26  accentColor?: string;
27  theme?: "dark" | "light";
28  /** Animation speed multiplier. */
29  speed?: number;
30};
31 
32/** Beat plan in seconds. */
33const T = {
34  /** Ground wipes in behind the line. */
35  ground: 0,
36  groundFor: 0.4,
37  eyebrow: 0.16,
38  word: 0.3,
39  /** Added per word — capped so long copy still finishes inside `wordsBudget`. */
40  wordStagger: 0.055,
41  /**
42   * Total span every word must have started landing within, regardless of
43   * word count. Without this, long copy (or a 2x-length stress test) staggers
44   * so far past the beat that later words are still mid-slide, clipped by
45   * their own reveal mask, when the line is supposed to be fully readable —
46   * the clipped fragment reads as a ghost overlapping the settled words.
47   */
48  wordsBudget: 0.7,
49  /** Rule draws under the line once the words have landed. */
50  rule: 0.62,
51  exitFor: 0.36,
52} as const;
53 
54const clamp = {
55  extrapolateLeft: "clamp",
56  extrapolateRight: "clamp",
57} as const;
58 
59/**
60 * A bumper that punches its line in rather than fading a sentence up: the
61 * ground wipes in, the words land one after another, a rule draws under them,
62 * and the whole card wipes out again when its hold is over — the shape a
63 * between-beats card actually needs.
64 */
65export const CaptionBumper: React.FC<CaptionBumperProps> = ({
66  text,
67  eyebrow,
68  maxFontSize = 84,
69  holdSeconds,
70  backgroundColor,
71  accentColor = "#F472B6",
72  theme = "dark",
73  speed = 1,
74}) => {
75  const frame = useCurrentFrame();
76  const { fps, width, height } = useVideoConfig();
77  const palette = CODE_THEMES[theme];
78// … truncated