Claude Chat · remocn

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

Installation

$ pnpm dlx shadcn@latest add @remocn/claude-chat

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:

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

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.