auto-fit-title

1import { loadFont } from "@remotion/google-fonts/Inter";
2import { Img, 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: ["400", "500", "600", "700"],
10  subsets: ["latin"],
11});
12 
13export type AutoFitTitleProps = {
14  /** Headline. Sized to fill the safe area whatever its length. */
15  title: string;
16  subtitle?: string;
17  logoSrc?: string;
18  logoSize?: number;
19  /** Ceiling for the fitted size, at a 1080-wide stage. */
20  maxFontSize?: number;
21  /** Floor for the fitted size, so a very long title stays legible. */
22  minFontSize?: number;
23  accentColor?: string;
24  backgroundColor?: string;
25  theme?: "dark" | "light";
26  /** Animation speed multiplier. */
27  speed?: number;
28};
29 
30/** Beat plan in seconds. */
31const T = {
32  logo: 0,
33  title: 0.2,
34  /** Added per word. */
35  wordStagger: 0.06,
36  subtitle: 0.72,
37} as const;
38 
39const clamp = {
40  extrapolateLeft: "clamp",
41  extrapolateRight: "clamp",
42} as const;
43 
44/**
45 * A headline sized to the frame it is given, then set in motion word by word:
46 * the fit is measured before anything animates, so a two-word title and a
47 * twelve-word title both fill the safe area and both land the same way.
48 */
49export const AutoFitTitle: React.FC<AutoFitTitleProps> = ({
50  title,
51  subtitle,
52  logoSrc,
53  logoSize,
54  maxFontSize = 128,
55  minFontSize = 34,
56  accentColor = "#E8B86D",
57  backgroundColor,
58  theme = "dark",
59  speed = 1,
60}) => {
61  const frame = useCurrentFrame();
62  const { fps, width, height } = useVideoConfig();
63  const palette = CODE_THEMES[theme];
64  const safe = getSafeAreaPadding({ width, height });
65 
66  const at = (seconds: number) => (seconds * fps) / speed;
67  const ease = (from: number, to: number, easing = EASING.enter) =>
68    interpolate(frame, [at(from), at(to)], [0, 1], { easing, ...clamp });
69 
70  const stage = {
71    w: width - safe.paddingLeft - safe.paddingRight,
72    h: height - safe.paddingTop - safe.paddingBottom,
73  };
74  const portrait = height > width;
75  const u = portrait
76    ? Math.min(stage.w / 620, stage.h / 1120)
77    : Math.min(stage.w / 1120, stage.h / 620);
78 
79  const words = title.split(/\s+/).filter(Boolean);
80  const fontSize = fitHeadline({
81    text: title,
82    maxWidth: stage.w,
83    maxFontSize: maxFontSize * u,
84// … truncated