Claude Code

Animated Claude Code CLI welcome screen that types a command into the terminal prompt

Installation

$ pnpm dlx shadcn@latest add @remocn/claude-code

Usage

Standalone in a Remotion <Composition> — renders immediately after install:

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { ClaudeCode } from "@/components/remocn/claude-code";
 
const ClaudeCodeScene = () => (
  <ClaudeCode
    title="Claude Code v2.0.0"
    userName="Meaghan"
    model="Sonnet 4.5 • Max 20x"
    cwd="/users/meaghan/code/apps"
    placeholder='Try "edit <filepath> to ..."'
    prompt="edit src/theme.ts to add a dark mode toggle"
    accentColor="#D97757"
    speed={1}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="ClaudeCode"
    component={ClaudeCodeScene}
    durationInFrames={160}
    fps={30}
    width={1280}
    height={720}
  />
);

Timeline: terminal window + welcome box ease in (0–20), default state with the block cursor blinking at the prompt holds (20–48), the command types into the prompt from frame 48, then holds to the end.

With Backdrop

Renders transparent and single-theme — supply the background via Backdrop; edit the copied file to re-theme:

tsx

import { Backdrop } from "@/components/remocn/backdrop";
import { ClaudeCode } from "@/components/remocn/claude-code";
 
<Backdrop fill={{ type: "color", value: "#2B2A28" }}>
  <ClaudeCode
    prompt="edit src/theme.ts to add a dark mode toggle"
    accentColor="#D97757"
  />
</Backdrop>

Props8

Prop	Type	Default
title	string"Claude Code v2.0.0" Box title on the top border
userName	string"Meaghan" Name in the welcome line
model	string"Sonnet 4.5 • Max 20x" Model line in the left column
cwd	string"/users/meaghan/code/apps" Working directory line
placeholder	stringTry "edit <filepath> to ..." Muted prompt placeholder before typing
prompt	string"edit src/theme.ts to add a dark mode toggle" The command that types in character-by-character
accentColor	string"#D97757" Terracotta accent for the dashed borders and headings
speed	number1 Animation speed multiplier (minimum 1 so the command finishes typing)

titlestring
Box title on the top border
Default"Claude Code v2.0.0"
userNamestring
Name in the welcome line
Default"Meaghan"
modelstring
Model line in the left column
Default"Sonnet 4.5 • Max 20x"
cwdstring
Working directory line
Default"/users/meaghan/code/apps"
placeholderstring
Muted prompt placeholder before typing
DefaultTry "edit <filepath> to ..."
promptstring
The command that types in character-by-character
Default"edit src/theme.ts to add a dark mode toggle"
accentColorstring
Terracotta accent for the dashed borders and headings
Default"#D97757"
speednumber
Animation speed multiplier (minimum 1 so the command finishes typing)
Default1

Notes

Sample data: The Recent activity and What's new lists use built-in sample data.
Dark by default: Defaults to the dark terminal look.
Offline-friendly: No network requests or images are used, so the preview works offline and MP4 export requires no CORS setup.
Shared hook: Reuses the useTypewriter hook and the caret primitive (rendered as a block cursor) shared with the other chat components.