Dynamic Split Screen

Cinematic two-column split where one panel shrinks and the other expands into view.

A layout block that animates the flex-basis of two side-by-side panels — perfect for chat-to-preview handoffs, before/after comparisons, or any moment where one workspace cedes real estate to another. Both panels use overflow: hidden so their content doesn't break the layout while the widths animate.

Installation

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

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { ChatToPreviewLayout } from "@/components/remocn/chat-to-preview-layout";

const ChatToPreviewLayoutScene = () => (
  <ChatToPreviewLayout
    chat={<MyChat />
);

export const RemotionRoot = () => (
  <Composition
    id="ChatToPreviewLayout"
    component={ChatToPreviewLayoutScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

Props

Prop	Type	Default	Description
`chat`	`ReactNode`	—	The chat panel. Falls back to a sample chat mockup.
`preview`	`ReactNode`	—	The preview panel. Falls back to a sample landing page mockup.
`startChatRatio`	`number`	`0.5`	Initial fraction of width given to the chat panel (0..1).
`endChatRatio`	`number`	`0.25`	Final fraction of width given to the chat panel (0..1).
`background`	`string`	`"#0a0a0a"`	Outer background color.
`className`	`string`	—	Optional className for the outer container.

Notes

Why flex-basis is OK here

Most Remotion animations should stick to transform/opacity. This component is an exception because the resizing of two panels is the effect — there's no way to fake it with transform. Keep both child panels' contents inside an overflow: hidden wrapper to avoid reflow artifacts.