Karaoke 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  Easing,
10  getRemotionEnvironment,
11  interpolate,
12  useCurrentFrame,
13  useVideoConfig,
14} from "remotion";
15import { type SnapCnTheme, useSnapCnTheme, withAlpha } from "@/lib/snap-cn-ui";
16 
17// The face the look is made of. Inter at 600 is a subtitle; a caption is a heavy
18// geometric grotesque carrying an outline.
19const { fontFamily: MONTSERRAT, waitUntilDone: montserratReady } = loadFont(
20  "normal",
21  {
22    weights: ["700", "800", "900"],
23    subsets: ["latin"],
24  },
25);
26 
27// The `boxed` look is the YouTube auto-caption, which is set in Roboto — a
28// neutral grotesque, not a geometric one.
29const { fontFamily: ROBOTO } = loadRoboto("normal", {
30  weights: ["500", "700"],
31  subsets: ["latin"],
32});
33 
34export type CaptionTheme = "light" | "dark";
35export type SafeAreaPreset = "landscape" | "portrait" | "square";
36 
37export interface CaptionLine {
38  text: string;
39  /** First frame the line is on screen and the fill sweep begins. */
40  startFrame: number;
41  /** Frame the sweep completes; the line fades out shortly after. */
42  endFrame: number;
43  /**
44   * Absolute frame each word starts filling (one entry per word).
45   * Omitted → words are spread evenly across [startFrame, endFrame].
46   */
47  wordTimings?: number[];
48  /** Word indices rendered in the accent color with a subtle scale-up. */
49  emphasize?: number[];
50}
51 
52export interface KaraokeCaptionsProps {
53  /**
54   * Word-level captions in MILLISECONDS — the shape Whisper, CapCut and Remotion's
55   * own `@remotion/captions` all speak. This is the input you will actually have.
56   */
57  captions?: Caption[];
58  /** An .srt, pasted straight in. */
59  srt?: string;
60  /** The look. See {@link KaraokePreset}. */
61  preset?: KaraokePreset;
62  /** Outline width as a fraction of the font size. 0 turns it off. */
63  strokeRatio?: number;
64  strokeColor?: string;
65  uppercase?: boolean;
66  /** Timed caption lines. Omit to build a single line from `text`. */
67  lines?: CaptionLine[];
68  /** Convenience single line used when `lines` is not provided. */
69  text?: string;
70  /** Comma-separated words of `text` to emphasize (case-insensitive). */
71  emphasize?: string;
72  /** Design-system token overrides. */
73  theme?: Partial<SnapCnTheme>;
74  /** Light or dark pill chrome. */
75// … truncated