Claude Chat

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

Usage

Standalone in a Remotion <Composition> — renders immediately after install:

tsx

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

tsx

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}
  />
);

Props7

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

greetingstring
Serif greeting headline shown above the input
Default"Back at it, Dima"
placeholderstring
Muted placeholder shown before typing begins
Default"Try: draft an email · summarize a doc · plan your week"
promptstring
The text that types in character-by-character
Default"Draft a launch tweet for our new release"
modelNamestring
Model label in the toolbar
Default"Opus 4.8"
modelTierstring
Tier label shown next to the model name
Default"Max"
accentColorstring
Terracotta accent used for the sunburst and send button
Default"#D97757"
speednumber
Animation speed multiplier (minimum 1 so the prompt finishes typing)
Default1

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.