Agent Skills — Claude Code makes the video

1"use client";
2 
3import { loadFont } from "@remotion/google-fonts/JetBrainsMono";
4import {
5  AbsoluteFill,
6  interpolate,
7  spring,
8  useCurrentFrame,
9  useVideoConfig,
10} from "remotion";
11import { Caret } from "@/components/remocn/caret";
12import { useTypewriter } from "@/lib/remocn-ui";
13 
14const { fontFamily: MONO_FAMILY } = loadFont();
15 
16export interface ClaudeCodeProps {
17  title?: string;
18  userName?: string;
19  model?: string;
20  cwd?: string;
21  placeholder?: string;
22  prompt?: string;
23  accentColor?: string;
24  speed?: number;
25  /**
26   * When true, the prompt is "submitted" after it finishes typing and the CLI
27   * enters a thinking phase — a pulsing status line (spinner + cycling verb +
28   * elapsed/token counters) over a stream of activity lines. Off by default so
29   * existing usage of the welcome screen is unchanged.
30   */
31  thinking?: boolean;
32  /**
33   * Effective frame at which the thinking phase begins. Defaults to just after
34   * the typewriter finishes (derived from `prompt`, `TYPING_START_FRAME` and
35   * `TYPING_CPS`).
36   */
37  thinkingStartFrame?: number;
38  /** Status verbs cycled in the thinking line (one every ~0.8s). */
39  thinkingVerbs?: string[];
40  /** Activity lines streamed in one-by-one beneath the status line. */
41  thinkingActivity?: string[];
42  /** Frames between each streamed activity line. */
43  thinkingLineStagger?: number;
44}
45 
46interface Theme {
47  page: string;
48  windowBar: string;
49  windowBody: string;
50  fg: string;
51  fgMuted: string;
52  fgDim: string;
53  boxBorder: string;
54}
55 
56export const THEMES: Record<"light" | "dark", Theme> = {
57  light: {
58    page: "#E8E5DD",
59    windowBar: "#D8D3CA",
60    windowBody: "#FBFAF7",
61    fg: "#1F1E1D",
62    fgMuted: "#73726C",
63    fgDim: "#A3A097",
64    boxBorder: "#D97757",
65  },
66  dark: {
67    page: "#2B2A28",
68    windowBar: "#3A3633",
69    windowBody: "#1B1A18",
70    fg: "#E8E5DD",
71    fgMuted: "#8A857C",
72    fgDim: "#6B6660",
73    boxBorder: "#D97757",
74  },
75};
76 
77export const TYPING_START_FRAME = 48;
78 
79export const TYPING_CPS = 18;
80 
81export const WHATS_NEW: string[] = [
82  "/agents to create subagents",
83  "/security-review for review agent",
84  "ctrl+b to background bashes",
85];
86 
87// Pulsing star used by the thinking status line — cycles outward then back so
88// it "breathes" in place rather than spinning.
89const THINKING_GLYPHS = ["·", "✢", "✳", "✶", "✺", "✶", "✳", "✢"];
90 
91export const DEFAULT_THINKING_VERBS: string[] = [
92  "Thinking",
93  "Composing",
94  "Animating",
95  "Rendering",
96  "Polishing",
97];
98 
99// … truncated