Claude Code · remocn

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

Installation

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

Installing claude-code pulls the caret primitive and the remocn-ui core lib (which provides the shared useTypewriter hook) via registryDependencies, plus the JetBrains Mono font via @remotion/google-fonts automatically. No additional install needed.

Usage

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

// 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:

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>

Props

Prop	Type	Default	Description
`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`	`string`	`Try "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`	`number`	`1`	Animation speed multiplier (minimum 1 so the command finishes typing)

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.