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-layoutUsage
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.
// 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.
Columns have minimum widths
The chat column will not squeeze below 520px of inner width and the preview will not go below
720px, so extreme ratios clamp rather than collapse. Keep endChatRatio at or above roughly
0.2 on the standard 1280×720 canvas to stay clear of the clamp.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
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 | number | 0.5 | Share of the width the chat column holds at the start, from 0 to 1. |
endChatRatio | number | 0.25 | Share of the width the chat column holds once the squeeze completes. |
speed | number | 1 | Time multiplier applied as frame × speed. Above 1 the columns resize sooner. |
className | string | — | Optional className passed to the root element. |