Prompt Zoom

1"use client";
2 
3import { loadFont as loadSans } from "@remotion/google-fonts/Inter";
4import { loadFont as loadSerif } from "@remotion/google-fonts/SourceSerif4";
5import {
6  AbsoluteFill,
7  getRemotionEnvironment,
8  useCurrentFrame,
9  useVideoConfig,
10} from "remotion";
11import { inputStyleContext } from "@/components/snap-cn/input";
12import { mixOklch, type SnapCnTheme, useSnapCnTheme } from "@/lib/snap-cn-ui";
13 
14// Loaded through @remotion/google-fonts, never a CSS variable — a Remotion
15// bundle has none of the app's CSS, so a `var(--font-…)` gets you the right face
16// in the Player and a fallback in the mp4 (design-system rule 4).
17const { fontFamily: SERIF } = loadSerif("normal", {
18  weights: ["400"],
19  subsets: ["latin"],
20});
21const { fontFamily: SANS } = loadSans("normal", {
22  weights: ["400", "500"],
23  subsets: ["latin"],
24});
25 
26export interface PromptZoomProps {
27  /** The greeting above the field. */
28  greeting?: string;
29  /** Field placeholder, shown until the first character is typed. */
30  placeholder?: string;
31  /** The prompt that types itself once the cut has landed. */
32  text?: string;
33  /** Suggestion pills under the field. Empty by default — pass some to show
34   *  them. They are static: the shot belongs to the typing and the cut. */
35  chips?: string[];
36  /** Model label in the field's footer, and the effort beside it. */
37  model?: string;
38  effort?: string;
39  /** Seconds at which typing begins. */
40  typeStart?: number;
41  /** Seconds at which the view cuts. Not a transition — one frame. It lands
42   *  *while the prompt is still being typed*, which is the whole gag. */
43  cutAt?: number;
44  /** Typing speed. 18 is what the reference measures. */
45  charsPerSecond?: number;
46  /** How far the cut pushes in. 2.547 is what the reference measures. */
47  zoom?: number;
48  /** Focal point of the cut, as a fraction of the frame. */
49  focusX?: number;
50  focusY?: number;
51  /** The starburst mark. Defaults to `theme.primary`. */
52  accentColor?: string;
53  theme?: Partial<SnapCnTheme>;
54  mode?: "light" | "dark";
55  speed?: number;
56}
57 
58// --- Pure helpers (unit-tested) -------------------------------------------
59 
60/** Characters revealed by effective frame `fc`, clamped to `total`. */
61export function typedCount(
62  fc: number,
63  startF: number,
64  perFrame: number,
65  total: number,
66): number {
67  if (fc <= startF) return 0;
68  if (perFrame <= 0) return total;
69  return Math.min(total, Math.floor((fc - startF) * perFrame));
70}
71 
72/**
73// … truncated