claude-code

1import { loadFont } from "@remotion/google-fonts/JetBrainsMono";
2import { AbsoluteFill, useCurrentFrame, useVideoConfig } from "remotion";
3import {
4  AI_TYPING_START_TUI,
5  Caret,
6  fadeUpAt,
7  introBounceIn,
8  stageScale,
9  useTypewriter,
10} from "@/remotion/lib/ai-composer-utils";
11 
12const { fontFamily } = loadFont("normal", {
13  weights: ["400", "700"],
14  subsets: ["latin"],
15});
16 
17export type ClaudeCodeProps = {
18  title?: string;
19  userName?: string;
20  model?: string;
21  cwd?: string;
22  placeholder?: string;
23  prompt?: string;
24  accentColor?: string;
25  theme?: "light" | "dark";
26  speed?: number;
27};
28 
29type Theme = {
30  page: string;
31  windowBar: string;
32  windowBody: string;
33  fg: string;
34  fgMuted: string;
35  fgDim: string;
36};
37 
38export const THEMES: Record<"light" | "dark", Theme> = {
39  light: {
40    page: "#E8E5DD",
41    windowBar: "#D8D3CA",
42    windowBody: "#FBFAF7",
43    fg: "#1F1E1D",
44    fgMuted: "#73726C",
45    fgDim: "#A3A097",
46  },
47  dark: {
48    page: "#2B2A28",
49    windowBar: "#3A3633",
50    windowBody: "#1B1A18",
51    fg: "#E8E5DD",
52    fgMuted: "#8A857C",
53    fgDim: "#6B6660",
54  },
55};
56 
57const TYPING_CPS = 18;
58 
59const WHATS_NEW = [
60  "/agents to create subagents",
61  "/security-review for review agent",
62  "ctrl+b to background bashes",
63];
64 
65const TRAFFIC_LIGHTS = ["#FF5F57", "#FEBC2E", "#28C840"];
66 
67function Mascot({ accent, size = 96 }: { accent: string; size?: number }) {
68  return (
69    <svg height={size} width={size} viewBox="0 0 24 24">
70      <title>Claude Code</title>
71      <path
72        clipRule="evenodd"
73        d="M20.998 10.949H24v3.102h-3v3.028h-1.487V20H18v-2.921h-1.487V20H15v-2.921H9V20H7.488v-2.921H6V20H4.487v-2.921H3V14.05H0V10.95h3V5h17.998v5.949zM6 10.949h1.488V8.102H6v2.847zm10.51 0H18V8.102h-1.49v2.847z"
74        fill={accent}
75        fillRule="evenodd"
76      />
77    </svg>
78  );
79}
80 
81export const ClaudeCode: React.FC<ClaudeCodeProps> = ({
82  title = "Claude Code v2.0.0",
83  userName = "Meaghan",
84  model = "Opus 4.8 • Max 20x",
85  cwd = "/users/meaghan/code/apps",
86  placeholder = 'Try "edit <filepath> to ..."',
87  prompt = "edit src/theme.ts to add a dark mode toggle",
88  accentColor = "#D97757",
89  theme = "dark",
90  speed = 1,
91}) => {
92  const frame = useCurrentFrame();
93  const { width, height, fps } = useVideoConfig();
94  const t = THEMES[theme];
95  const scale = stageScale(width, height);
96 
97  const tw = useTypewriter(prompt, {
98    cps: TYPING_CPS,
99    speed,
100    startFrame: AI_TYPING_START_TUI,
101  });
102  const showText = tw.count > 0;
103 
104// … truncated