# Claude Chat
URL: https://remocn.dev/docs/ai/claude-chat

Animated Claude chat input that types a prompt and morphs the waveform button into a send button

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

## Installation

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

> **Note**
>
> Installing `claude-chat` pulls the `Inter` and `Fraunces` fonts 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 { ClaudeChat } from "@/components/remocn/claude-chat";

const ClaudeChatScene = () => (
  <ClaudeChat
    greeting="Back at it, Dima"
    placeholder="Try: draft an email · summarize a doc · plan your week"
    prompt="Draft a launch tweet for our new release"
    modelName="Opus 4.8"
    modelTier="Max"
    accentColor="#D97757"
    speed={1}
  />
);

export const RemotionRoot = () => (
  <Composition
    id="ClaudeChat"
    component={ClaudeChatScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);
```

Timeline: card + greeting ease in (0–16), default state with blinking caret holds (16–42), the prompt types in from frame 42, and the waveform button morphs into the terracotta send button the instant text appears, then holds to the end.

### With Backdrop

The component renders transparent by default — supply the background via `Backdrop`. It ships single-theme; edit the copied file to re-theme colors.

```tsx
import { Composition } from "remotion";
import { ClaudeChat } from "@/components/remocn/claude-chat";
import { Backdrop } from "@/components/remocn/backdrop";

const ClaudeChatScene = () => (
  <Backdrop fill={{ type: "gradient", value: "linear-gradient(135deg, #f5f0eb, #ede8e3)" }}>
    <ClaudeChat
      greeting="Back at it, Dima"
      prompt="Draft a launch tweet for our new release"
    />
  </Backdrop>
);

export const RemotionRoot = () => (
  <Composition
    id="ClaudeChat"
    component={ClaudeChatScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `greeting` | `string` | `"Back at it, Dima"` | Serif greeting headline shown above the input |
| `placeholder` | `string` | `"Try: draft an email · summarize a doc · plan your week"` | Muted placeholder shown before typing begins |
| `prompt` | `string` | `"Draft a launch tweet for our new release"` | The text that types in character-by-character |
| `modelName` | `string` | `"Opus 4.8"` | Model label in the toolbar |
| `modelTier` | `string` | `"Max"` | Tier label shown next to the model name |
| `accentColor` | `string` | `"#D97757"` | Terracotta accent used for the sunburst and send button |
| `speed` | `number` | `1` | Animation speed multiplier (minimum 1 so the prompt finishes typing) |

## Notes

- **Button morph:** The waveform-to-send morph is gated purely on text presence — the moment the prompt has any characters, the terracotta send button appears.
- **Static mic:** The microphone button stays static throughout the animation.
- **Offline-friendly:** No network requests or images are used, so the preview works offline and MP4 export requires no CORS setup.
- **Serif greeting:** The greeting headline uses the `Fraunces` serif typeface.

## Use when
- Announcing a Claude integration or Anthropic-powered feature where the Claude brand must be visible.
- Showcasing a prompt workflow where claude.ai is the UI surface — the warm terracotta accent is the brand signal.
- A multi-AI comparison video needs the Claude card alongside `chat-gpt` and `v0`.

## Don't use when
- The product is Claude Code CLI — use `claude-code` instead, which shows the terminal welcome screen with `cwd` and agent context.
- The product is ChatGPT — use `chat-gpt` instead for the correct pill-input and blue accent.
- The integration is with OpenCode's TUI — use `opencode` instead.