code-reveal

1import { loadFont } from "@remotion/google-fonts/JetBrainsMono";
2import {
3  interpolate,
4  spring,
5  useCurrentFrame,
6  useVideoConfig,
7} from "remotion";
8import { Caret, stageScale } from "@/remotion/lib/ai-composer-utils";
9import {
10  CODE_THEMES,
11  CodeLine,
12  lineLength,
13  MONO_ADVANCE,
14  tokenizeCode,
15} from "@/remotion/lib/code-syntax";
16import { EASING } from "@/remotion/lib/motion-tokens";
17 
18const { fontFamily } = loadFont("normal", {
19  weights: ["400", "500", "700"],
20  subsets: ["latin"],
21});
22 
23/** Reference stage the editor is laid out against, then uniformly scaled. */
24const REF_WIDTH = 1280;
25const REF_HEIGHT = 720;
26 
27const WINDOW_WIDTH = 940;
28const HEADER_HEIGHT = 46;
29const BODY_PADDING = 24;
30const ROW_HEIGHT = 34;
31const FONT_SIZE = 21;
32const GUTTER_WIDTH = 62;
33const CODE_INSET = 20;
34/** Longest listing shown at once — anything past this scrolls. */
35const MAX_VISIBLE_ROWS = 10;
36 
37/** Characters per second the code is written at. */
38const WRITE_CPS = 55;
39/** Beat spent moving to the next line, in seconds. */
40const NEWLINE_PAUSE = 0.07;
41 
42const DEFAULT_CODE = `import { CodeReveal } from "@/remotion/scenes/code-reveal";
43 
44export const Explainer = () => (
45  <CodeReveal
46    title="pipeline.ts"
47    highlightedLines={[4, 5]}
48  />
49);`;
50 
51export type CodeRevealProps = {
52  /** Source shown in the editor. Surrounding blank lines are trimmed. */
53  code?: string;
54  /** 1-based line numbers focused once the listing finishes writing. */
55  highlightedLines?: number[];
56  /** Filename on the editor tab. */
57  title?: string;
58  /** Language badge on the right of the header. */
59  language?: string;
60  /** First line number in the gutter — set it when showing an excerpt. */
61  startLine?: number;
62  /** Hides the gutter entirely when false. */
63  showLineNumbers?: boolean;
64  accentColor?: string;
65  /** Overrides the page background behind the window. */
66  backgroundColor?: string;
67  theme?: "dark" | "light";
68  /** Animation speed multiplier. */
69  speed?: number;
70};
71 
72const CHROME_LIGHTS = ["#FF5F57", "#FEBC2E", "#28C840"] as const;
73 
74/**
75 * Code reveal staged as an editor actually writing the file: a write head runs
76 * through the listing character by character with the caret riding its tip,
77 * then — once the file is complete — attention lands on the lines that matter
78 * and the rest of the listing recedes.
79 */
80export const CodeReveal: React.FC<CodeRevealProps> = ({
81  code = DEFAULT_CODE,
82  highlightedLines = [],
83  title = "explainer.tsx",
84  language = "tsx",
85// … truncated