v0

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

Installation

$ pnpm dlx shadcn@latest add @remocn/v0

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>

Props6

Prop	Type	Default
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	number1 Animation speed multiplier (minimum 1 so the prompt finishes typing)

greetingstring
Bold heading above the box
Default"What do you want to create?"
placeholderstring
Muted placeholder before typing
Default"Ask v0 to build…"
promptstring
The text that types in character-by-character
Default"a landing page for my SaaS with pricing and testimonials"
modelNamestring
Model chip label in the toolbar
Default"v0 Max"
projectNamestring
Project selector label
Default"Project"
speednumber
Animation speed multiplier (minimum 1 so the prompt finishes typing)
Default1

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.