Answer Stream

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 {
13  clamp01,
14  easings,
15  mixOklch,
16  type SnapCnTheme,
17  useSnapCnTheme,
18} from "@/lib/snap-cn-ui";
19 
20// Loaded through @remotion/google-fonts, never a CSS variable — a Remotion
21// bundle has none of the app's CSS, so a `var(--font-…)` gets you the right face
22// in the Player and a fallback in the mp4 (design-system rule 4).
23const { fontFamily: SERIF } = loadSerif("normal", {
24  weights: ["400", "600"],
25  subsets: ["latin"],
26});
27const { fontFamily: SANS } = loadSans("normal", {
28  weights: ["400", "500"],
29  subsets: ["latin"],
30});
31 
32export interface AnswerCard {
33  title: string;
34  body: string;
35  /** SVG path for the card's lead glyph, on a 24×24 viewBox. */
36  icon?: string;
37}
38 
39export interface AnswerStreamProps {
40  /** The prompt. Fills the pill, and stays in the composer. */
41  question?: string;
42  /** The reply. `\n` is a hard break; everything else wraps. */
43  answer?: string;
44  /** The line that lands under the reply and introduces the cards. */
45  headline?: string;
46  /** The plan. Each lands as an empty card, then fills. */
47  cards?: AnswerCard[];
48  /** Composer footer. */
49  model?: string;
50 
51  // --- timeline (seconds) ---
52  /** When the push into the send button starts accelerating. */
53  commitAt?: number;
54  /** When the shot **cuts** to the answer. Not a transition — one frame. */
55  cutAt?: number;
56  /** When the camera starts pulling back to keep up with the answer. */
57  pullbackAt?: number;
58  /** How long the pull-back takes. */
59  pullbackDuration?: number;
60  /** Streaming rate, in words per second. */
61  wordsPerSecond?: number;
62  /** How long a word stays hot before it has cooled to `foreground`. */
63  coolSeconds?: number;
64 
65  // --- camera ---
66  /** Scale of the opening macro shot on the send button. */
67  macroZoom?: number;
68  /** How far in the answer shot starts, relative to where it settles. */
69  pullbackFrom?: number;
70  /** How far past its mark the pull-back goes before easing back onto it. */
71  pullbackUndershoot?: number;
72  /** The pull-back's focal point, as a fraction of the frame. It is *above*
73   *  the top edge, which is what makes the page rise as it shrinks. */
74  focusX?: number;
75// … truncated