Scenes
Split Screen
Two-up media comparison layout.
SceneblocksAdvanced
Install
npx remotion-ui@latest add split-screenBefore/after, interview, product comparison, and two-up demo layout.
Live preview
AI usage
Install first, then import the copied source component locally.
Install
npx remotion-ui@latest add split-screenImport after install
@/remotion/scenes/split-screen- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: left, right, title, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { SplitScreen } from "@/remotion/scenes/split-screen";
<SplitScreen left={{ src: before }} right={{ src: after }} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| left* | SplitScreenPanel | — | Left media panel. |
| right* | SplitScreenPanel | — | Right media panel. |
| title | string | — | Optional comparison title. |