Spatial Push
Two scenes locked edge to edge, shoved across the frame as one move.
PrimitiveTransitionsAdvanced
$ npx remotion-ui@latest add spatial-pushA push, not two entrances: the outgoing scene is shoved out the far side while
the incoming one arrives from direction, both travelling the same distance at
the same time so the seam between them never opens onto the background.
pushDepth is the share of the frame each scene covers, and it defaults to 1
for that reason — lower it only over a solid backdrop you are happy to see.
tilt rakes the panels in 3D and is off by default, because rotating a
full-frame panel pulls one edge in and uncovers bare background behind it.
Exports transitionSpatialPush() and getTransitionSpatialPushDuration() for
use with TransitionSeries.Transition.
Requires @remotion/transitions. Run npx remotion add @remotion/transitions if not already installed.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/spatial-push- Use when: scene transitions and composition pacing.
- Customize: durationInFrames, direction, pushDepth, tilt, 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 { transitionSpatialPush } from "@/remotion/primitives/spatial-push";
<TransitionSeries.Transition {...transitionSpatialPush()} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| durationInFrames | number | 24 | Transition overlap length. |
| direction | "from-left" | "from-right" | "from-top" | "from-bottom" | "from-left" | Push direction. |
| pushDepth | number | 1 | Share of the frame each scene travels. Below 1 leaves background showing mid-push. |
| tilt | number | 0 | Degrees each panel rotates in 3D. Off by default — a tilted full-frame panel uncovers bare background. |
| perspective | number | 1200 | Perspective distance in px, used when tilt is set. |