Directional Wipe
A soft-edged wipe that uncovers the next scene without ever showing the background.
PrimitiveTransitionsAdvanced
$ npx remotion-ui@latest add directional-wipeThe incoming scene is revealed by a soft-edged mask travelling from direction,
while the outgoing one holds whole underneath and carries a little counter
parallax. Only the arriving scene is masked — wiping both at once would open a
hole onto the background in the middle of the cut.
edgeSoftness is the width of the feathered edge as a share of the frame; set
it to 0 for a hard architectural line. depth is the parallax the two scenes
carry against each other under the wipe.
Exports transitionDirectionalWipe() and getTransitionDirectionalWipeDuration()
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/directional-wipe- Use when: scene transitions and composition pacing.
- Customize: durationInFrames, direction, edgeSoftness, depth, 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 { transitionDirectionalWipe } from "@/remotion/primitives/directional-wipe";
<TransitionSeries.Transition {...transitionDirectionalWipe({ direction: "from-left" })} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| durationInFrames | number | 22 | Transition overlap length. |
| direction | "from-left" | "from-right" | "from-top" | "from-bottom" | "from-left" | Wipe direction. |
| edgeSoftness | number | 0.12 | Soft edge width as a share of the frame. 0 cuts hard. |
| depth | number | 0.08 | Parallax the scenes carry under the wipe. |
| variant | "linear" | "spring" | "editorial" | "editorial" | Timing curve. |