Split Screen
A before/after that is actually made, not just placed side by side.
SceneScenesAdvanced
split-screen30fps · 960×540
Install
$ npx remotion-ui@latest add split-screenThe two panels arrive from opposite edges and meet at the divider, their labels
land, and with wipeAtSeconds set the divider travels across to wipe the left
panel away and leave the right one whole — the move a comparison is for.
The right panel sits underneath, so the wipe uncovers it rather than sliding it.
split sets where the divider rests beforehand.
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, wipeAtSeconds, 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 panel: { src, label, fit }. |
| right* | SplitScreenPanel | - | Right panel; sits underneath so the wipe uncovers it. |
| title | string | - | Headline above the comparison. |
| wipeAtSeconds | number | - | When the divider travels right to leave the right panel whole. |
| split | number | 0.5 | Where the divider rests before any wipe, 0–1. |
| accentColor | string | "#E8B86D" | Divider and label colour. |
| theme | "dark" | "light" | "dark" | Surface palette. |
| speed | number | 1 | Animation speed multiplier. |