Terminal Simulator

1"use client";
2 
3import {
4  Easing,
5  getRemotionEnvironment,
6  interpolate,
7  useCurrentFrame,
8  useVideoConfig,
9} from "remotion";
10import {
11  mixOklch,
12  type SnapCnTheme,
13  useSnapCnTheme,
14  withAlpha,
15} from "@/lib/snap-cn-ui";
16 
17export type TerminalLineType = "command" | "log" | "success" | "error";
18 
19/** Package-manager command panel — the flythrough's second station. */
20export interface CommandSpec {
21  /** Tab labels. The first is the active tab. */
22  managers?: string[];
23  /** The command typed into the active tab, e.g. "npm install One Tool". */
24  text: string;
25}
26 
27export interface TerminalLine {
28  text: string;
29  type: TerminalLineType;
30  /** Frame gap before this line starts typing. Defaults to 8. */
31  delay?: number;
32  /**
33   * Extra freeze-frame pause AFTER this line finishes typing, in frames.
34   * Use this to build tension before the next batch of logs. If omitted,
35   * lines whose text ends in "..." auto-freeze for 18 frames.
36   */
37  pause?: number;
38}
39 
40export interface TerminalZoom {
41  /** Turn the extra landing zoom on. */
42  enabled: boolean;
43  /** Camera zoom the final punch-in lands at. Defaults to 2.4. */
44  scale?: number;
45  /** Kept for API compatibility; the flythrough camera always leads the eye. */
46  followCursor?: boolean;
47}
48 
49export interface TerminalSimulatorProps {
50  lines?: TerminalLine[];
51  /**
52   * Headline at the first camera station. Wrap words in `*asterisks*` to tint
53   * them with the accent gradient. `null`/"" skips the station — the camera
54   * starts on the command panel instead.
55   */
56  intro?: string | null;
57  /**
58   * Command panel at the second camera station. `null` skips the station.
59   */
60  command?: CommandSpec | null;
61  /** Command-panel surface color. */
62  /** Overrides the design system's `card`. */
63  background?: string;
64  /** Hairline border color for the command-panel ring and divider. */
65  /** Overrides the design system's `border`. */
66  borderColor?: string;
67  /** Design-system token overrides. */
68  theme?: Partial<SnapCnTheme>;
69  /** Defaults to `"dark"` — a terminal is lit for dark. */
70  mode?: "light" | "dark";
71  fontSize?: number;
72  /**
73   * Reveal speed. The reveal is CHUNKED — every `1 / charsPerFrame` frames
74   * bumps the cursor by `chunkSize` characters, so output appears in bursts
75   * instead of dripping char-by-char.
76   */
77  charsPerFrame?: number;
78  /** Characters revealed per step. */
79  chunkSize?: number;
80  /**
81// … truncated