# ChatGPT
URL: https://remocn.dev/docs/ai/chat-gpt

Animated ChatGPT composer that types a prompt and morphs the voice button into a send button

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

## Installation

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

> **Note**
>
> Installing `chat-gpt` pulls the `caret` primitive and the `remocn-ui` core lib (which provides the shared `useTypewriter` hook) via `registryDependencies`, plus the `Inter` 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 { ChatGpt } from "@/components/remocn/chat-gpt";

const ChatGptScene = () => (
  <ChatGpt
    greeting="What's on your mind today?"
    placeholder="Ask anything"
    prompt="Make a sunset over a calm ocean"
    accentColor="#2F6FED"
    speed={1}
  />
);

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

Timeline: heading + pill + chips ease in (0–16), default state with blinking caret holds (16–42), the prompt types in from frame 42, the blue voice button morphs into the send button the instant text appears, and the suggestion chips fade out, 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 { ChatGpt } from "@/components/remocn/chat-gpt";

<Backdrop fill={{ type: "color", value: "#FFFFFF" }}>
  <ChatGpt
    greeting="What's on your mind today?"
    prompt="Make a sunset over a calm ocean"
    accentColor="#2F6FED"
  />
</Backdrop>
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `greeting` | `string` | `"What's on your mind today?"` | Sans heading above the input |
| `placeholder` | `string` | `"Ask anything"` | Muted placeholder before typing |
| `prompt` | `string` | `"Make a sunset over a calm ocean"` | The text that types in character-by-character |
| `accentColor` | `string` | `"#2F6FED"` | Blue voice-button color |
| `speed` | `number` | `1` | Animation speed multiplier (minimum 1 so the prompt finishes typing) |

## Notes

- **Button morph:** The voice-to-send morph is gated purely on text presence — the moment the prompt has any characters, the send button appears.
- **Suggestion chips:** The three suggestion chips fade out once typing starts.
- **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 shared with the other chat components.

## Use when
- Announcing a ChatGPT integration or GPT-powered feature where the OpenAI brand must be recognizable.
- Showing a prompt-to-result workflow where the ChatGPT interface is the entry point.
- A comparison video contrasts multiple AI products — use this for the ChatGPT card, `claude-chat` for Claude.

## Don't use when
- The product being demoed is Claude — use `claude-chat` instead to match Anthropic's UI and warm color palette.
- The product is Vercel's v0 — use `v0` instead, which replicates the v0 dark textarea and mic-to-send morph.
- The product is a CLI/terminal AI agent — use `claude-code` or `opencode` instead.