v0 · remocn

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

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:

// 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:

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.