Split Screen
Two-up media comparison layout.
SceneScenesAdvanced
split-screen30fps · 960×540
Install
$ npx remotion-ui@latest add split-screenBefore/after, interview, product comparison, and two-up demo layout.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/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
Example
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. |