Claude Code
Claude Code terminal scene for Remotion.
SceneScenes
claude-code30fps · 960×540
Install
$ npx remotion-ui@latest add claude-codeAnimated Claude Code welcome terminal with what's-new panel and CLI prompt typing.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/scenes/claude-code- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: title, userName, model, cwd, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
Example
import { ClaudeCode } from "@/remotion/scenes/claude-code";
<ClaudeCode prompt='edit src/theme.ts to add a dark mode toggle' />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Claude Code v2.0.0" | Legend label on the dashed welcome box. |
| userName | string | "Meaghan" | Welcome message name. |
| model | string | "Opus 4.8 • Max 20x" | Active model label. |
| cwd | string | "/users/meaghan/code/apps" | Working directory shown in the welcome panel. |
| placeholder | string | 'Try "edit <filepath> to ..."' | CLI prompt placeholder before typing. |
| prompt | string | "edit src/theme.ts to add a dark mode toggle" | Command typed at the CLI prompt. |
| accentColor | string | "#D97757" | Dashed border and highlight color. |
| theme | "light" | "dark" | "dark" | Light or dark terminal palette. |
| speed | number | 1 | Animation speed multiplier. |