# Claude Code
URL: https://remocn.dev/docs/ai/claude-code

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

- Install: `npx shadcn@latest add @remocn/claude-code`
- Vibe: tech
- Natural length: 160f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/claude-code
```

> **Note**
>
> 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:

```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>
```

## 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.

## Use when
- Depicting a Claude Code / agentic-CLI workflow as a recognizable branded surface in a dev-tool demo.
- You want a coding-agent prompt to type itself out with the authentic welcome-screen chrome.
- The scene calls for a terminal-app card rather than a raw shell — recent-activity and what's-new panels carry product context.

## Don't use when
- You need a generic, unbranded terminal — use `terminal-simulator`.
- You're depicting a different product's UI — use the matching card (`opencode`, `v0`, `chat-gpt`, `claude-chat`).
- You only need a typed command line with a cursor and no app frame — use `typewriter` over a plain surface.