Chromatic Aberration Wipe
A slide hard enough to pull the colour channels apart.
PrimitiveTransitionsAdvanced
$ npx remotion-ui@latest add chromatic-aberration-wipeThe two scenes slide across locked together while the red and blue channels
separate against the green — an actual per-channel split, isolated with a colour
matrix and recombined under screen, not a coloured shadow dropped behind the
layer. The separation peaks in the middle of the move and is gone at both ends,
so nothing is left tinted once the cut lands.
intensity is the peak separation in px, axis swings the whole thing
vertical, and slide is how far the scenes travel — leave it at 1 unless you
want the background to show.
Exports transitionChromaticAberrationWipe() and
getTransitionChromaticAberrationWipeDuration() 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/chromatic-aberration-wipe- Use when: scene transitions and composition pacing.
- Customize: durationInFrames, intensity, axis, slide, 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 { transitionChromaticAberrationWipe } from "@/remotion/primitives/chromatic-aberration-wipe";
<TransitionSeries.Transition {...transitionChromaticAberrationWipe({ intensity: 12 })} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| durationInFrames | number | 14 | Transition overlap length. |
| intensity | number | 12 | Peak channel separation in px, reached in the middle of the cut. |
| axis | "horizontal" | "vertical" | "horizontal" | Axis the scenes slide along and the channels separate on. |
| slide | number | 1 | Share of the frame the scenes travel. Below 1 shows background. |