Split Screen
A before/after that is actually made, not just placed side by side.
SceneAdvanced
$ 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 back to the left edge,
wiping the left panel away and leaving the right one whole: the move a
comparison is for. The left label leaves with the panel it names.
The right panel sits underneath, so the wipe uncovers it rather than sliding it.
split sets where the divider rests beforehand, and holdSeconds takes the
whole comparison off screen. Omit it inside a TransitionSeries, where the
transition covers the tail.
Pass video sources and the panels play; the scene sets pauseWhenBuffering on
them, so add premountFor on the wrapping <Sequence> to have both streams
buffered before the comparison starts:
<Sequence durationInFrames={120} premountFor={30}>
<SplitScreen
left={{ src: staticFile("before.mp4"), label: "Prototype" }}
right={{ src: staticFile("after.mp4"), label: "Final clip" }}
wipeAtSeconds={1.6}
/>
</Sequence>Agent notes
Install first, then import the copied source component locally. AI guide →
@/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
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. |