Chat to Preview Layout

A two-column split where the chat column shrinks and the preview column expands, for showing an agent building something

Installation

$ pnpm dlx shadcn@latest add @remocn/chat-to-preview-layout

Usage

Both columns are slots — pass whatever you want rendered. The layout animates the split from startChatRatio to endChatRatio, so the chat side gives up width as the preview grows.

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { ChatToPreviewLayout } from "@/components/remocn/chat-to-preview-layout";
 
const AgentScene = () => (
  <ChatToPreviewLayout
    chat={<YourConversation />}
    preview={<YourAppPreview />}
    startChatRatio={0.5}
    endChatRatio={0.25}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="ChatToPreviewLayout"
    component={AgentScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

Leaving chat or preview unset renders a built-in placeholder, which is useful while you are blocking out the timing before the real content exists.

Props6

Prop	Type	Default
chat	ReactNode— Content of the left column. Falls back to a built-in placeholder conversation.
preview	ReactNode— Content of the right column. Falls back to a built-in placeholder preview.
startChatRatio	number0.5 Share of the width the chat column holds at the start, from 0 to 1.
endChatRatio	number0.25 Share of the width the chat column holds once the squeeze completes.
speed	number1 Time multiplier applied as frame × speed. Above 1 the columns resize sooner.
className	string— Optional className passed to the root element.

chatReactNode
Content of the left column. Falls back to a built-in placeholder conversation.
previewReactNode
Content of the right column. Falls back to a built-in placeholder preview.
startChatRationumber
Share of the width the chat column holds at the start, from 0 to 1.
Default0.5
endChatRationumber
Share of the width the chat column holds once the squeeze completes.
Default0.25
speednumber
Time multiplier applied as frame × speed. Above 1 the columns resize sooner.
Default1
classNamestring
Optional className passed to the root element.