Word Captions

1"use client";
2 
3import { loadFont } from "@remotion/google-fonts/Montserrat";
4import { loadFont as loadRoboto } from "@remotion/google-fonts/Roboto";
5import { useEffect, useLayoutEffect, useRef, useState } from "react";
6import {
7  continueRender,
8  delayRender,
9  getRemotionEnvironment,
10  interpolate,
11  spring,
12  useCurrentFrame,
13  useVideoConfig,
14} from "remotion";
15import { type SnapCnTheme, useSnapCnTheme, withAlpha } from "@/lib/snap-cn-ui";
16 
17// Montserrat, 700–900. This is the face the look is actually made of: the caption
18// styles every big channel uses are a heavy geometric grotesque, and Inter at 700
19// simply is not heavy enough to carry a stroke. Loaded through
20// @remotion/google-fonts so the Player, the mp4 and a user's project all agree.
21const { fontFamily: MONTSERRAT, waitUntilDone: montserratReady } = loadFont(
22  "normal",
23  {
24    weights: ["700", "800", "900"],
25    subsets: ["latin"],
26  },
27);
28 
29// The `boxed` look is the YouTube/CapCut auto-caption, and that is set in Roboto
30// — a neutral grotesque, not a geometric one. Montserrat would read as a logo.
31const { fontFamily: ROBOTO } = loadRoboto("normal", {
32  weights: ["500", "700"],
33  subsets: ["latin"],
34});
35 
36export type CaptionAspect = "16:9" | "1:1" | "9:16";
37export type CaptionActiveStyle = "pop" | "highlight" | "color";
38 
39/**
40 * The four looks, and they are not invented — they are the caption styles that
41 * actually run on big channels:
42 *
43 * - `beast`   — ALL CAPS, Montserrat Black, white with a heavy black outline and a
44 *               hard shadow; the spoken word snaps to yellow and springs. The
45 *               YouTube-hook look.
46 * - `hormozi` — same weight class, but the spoken word lands inside a filled
47 *               rounded block that cycles through an accent set. Reads at a glance
48 *               on a phone.
49 * - `pop`     — sentence case, outlined, the spoken word takes the accent and pops.
50 *               Punchy without shouting.
51 * - `clean`   — a quiet pill. No outline. For product footage where captions are
52 *               support, not the show. (The old default.)
53 */
54export type CaptionPreset =
55  | "boxed"
56  | "youtube"
57  | "beast"
58  | "hormozi"
59  | "pop"
60  | "clean";
61 
62export interface CaptionWord {
63  text: string;
64  startFrame: number;
65  /** Defaults to the next word's startFrame (or startFrame + fallback for the last word). */
66  endFrame?: number;
67}
68 
69/** A caption word with its endFrame resolved. */
70export interface TimedWord {
71  text: string;
72// … truncated