# v0
URL: https://remocn.dev/docs/ai/v0

Animated Vercel v0 composer that types a prompt and morphs the mic button into a send button

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

## Installation

```bash
npx shadcn@latest add @remocn/v0
```

> **Note**
>
> Installing `v0` 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 { V0 } from "@/components/remocn/v0";

const V0Scene = () => (
  <V0
    greeting="What do you want to create?"
    placeholder="Ask v0 to build…"
    prompt="a landing page for my SaaS with pricing and testimonials"
    modelName="v0 Max"
    projectName="Project"
    speed={1}
  />
);

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

Timeline: heading + box ease in (0–16), default state with blinking caret holds (16–42), the prompt types in from frame 42, the white mic button morphs into a send button the instant text appears, 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 { V0 } from "@/components/remocn/v0";

<Backdrop fill={{ type: "color", value: "#000000" }}>
  <V0
    greeting="What do you want to create?"
    prompt="a landing page for my SaaS with pricing and testimonials"
    modelName="v0 Max"
  />
</Backdrop>
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `greeting` | `string` | `"What do you want to create?"` | Bold heading above the box |
| `placeholder` | `string` | `"Ask v0 to build…"` | Muted placeholder before typing |
| `prompt` | `string` | `"a landing page for my SaaS with pricing and testimonials"` | The text that types in character-by-character |
| `modelName` | `string` | `"v0 Max"` | Model chip label in the toolbar |
| `projectName` | `string` | `"Project"` | Project selector label |
| `speed` | `number` | `1` | Animation speed multiplier (minimum 1 so the prompt finishes typing) |

## Notes

- **Dark by default:** Defaults to the dark v0 look.
- **Button morph:** The mic-to-send morph is gated purely on text presence — the moment the prompt has any characters, the send button appears.
- **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
- Depicting the Vercel v0 composer as a recognizable branded surface in a generative-UI demo.
- A build prompt should type itself in with the mic→send button morph as the action beat.
- The scene wants the v0 product surface specifically, not a generic chat box.

## Don't use when
- You're depicting a different product — use the matching card (`chat-gpt`, `claude-chat`, `claude-code`, `opencode`).
- You need a general AI chat exchange rather than a prompt composer — use `chat-gpt` or `claude-chat`.
- You only need a typed input with a cursor and no app chrome — use `typewriter`.