chat-to-preview

1import { loadFont } from "@remotion/google-fonts/Inter";
2import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
3import { CODE_THEMES } from "@/remotion/lib/code-syntax";
4import { getSafeAreaPadding } from "@/remotion/lib/layout";
5import { EASING } from "@/remotion/lib/motion-tokens";
6 
7const { fontFamily } = loadFont("normal", {
8  weights: ["400", "500", "600", "700"],
9  subsets: ["latin"],
10});
11 
12export type ChatMessage = {
13  role: "user" | "assistant";
14  text: string;
15};
16 
17export type ChatToPreviewProps = {
18  /** The exchange, in order. User turns type and send; assistant turns stream. */
19  messages?: ChatMessage[];
20  /** Title the finished preview renders. */
21  previewTitle?: string;
22  /** Supporting line under the preview title. */
23  previewCaption?: string;
24  /** Name of the preview surface, shown in its header. */
25  previewLabel?: string;
26  /** Placeholder in the composer before anything is typed. */
27  placeholder?: string;
28  accentColor?: string;
29  backgroundColor?: string;
30  theme?: "dark" | "light";
31  /** Animation speed multiplier. */
32  speed?: number;
33};
34 
35const DEFAULT_MESSAGES: ChatMessage[] = [
36  { role: "user", text: "Open on a title card with a phosphor accent." },
37  { role: "assistant", text: "Building a centred title scene with rim light." },
38];
39 
40/** Characters typed per second in the composer. */
41const TYPE_CPS = 38;
42/** Words streamed per second by the assistant. */
43const STREAM_WPS = 8;
44 
45/** Beat plan in seconds. */
46const T = {
47  /** First keystroke. */
48  start: 0.5,
49  /** Held after the composer fills, before the send. */
50  beforeSend: 0.2,
51  /** Bubble flight from the composer into the thread. */
52  send: 0.34,
53  /** Assistant pause before it starts answering. */
54  think: 0.62,
55  /** Gap after a turn finishes. */
56  turnGap: 0.24,
57  /** How long the preview takes to assemble once the answer starts. */
58  build: 1.9,
59  /** Fade from wireframe to the rendered result. */
60  resolve: 0.5,
61} as const;
62 
63const clamp = {
64  extrapolateLeft: "clamp",
65  extrapolateRight: "clamp",
66} as const;
67 
68type Turn = {
69  message: ChatMessage;
70  /** Composer typing window (user turns only). */
71  typeFrom: number;
72  /** When the bubble exists in the thread. */
73  landAt: number;
74  /** Streaming window start (assistant turns only). */
75  streamFrom: number;
76};
77 
78/** Lay the exchange out on one clock, so no beat needs a magic frame number. */
79function schedule(messages: ChatMessage[]): Turn[] {
80  let cursor = T.start;
81// … truncated