# Chat to Preview Layout
URL: https://remocn.dev/docs/layout/chat-to-preview-layout

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

- Install: `npx shadcn@latest add @remocn/chat-to-preview-layout`
- Vibe: tech
- Natural length: 120f @ 30fps

## Installation

```bash
npx 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.

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

## Use when
- Showing an AI agent at work — the conversation starts as the subject, then yields the frame to what it produced
- You need a two-column split whose ratio animates, without writing the width interpolation yourself
- A demo has to hand attention from input to output inside a single continuous shot, with no cut

## Don't use when
- Both columns should stay the same size — this component exists for the ratio change; use a plain flex row
- The transition between the two states is a cut rather than a squeeze — use a transition from `TransitionSeries` instead
- You need more than two columns, or a vertical split — the layout is horizontal and two-up by construction