Transition Light Leak
A film flare that peaks on the cut and hides the seam under it.
PrimitiveTransitionsAdvanced
$ npx remotion-ui@latest add transition-light-leakAn overlay rather than a presentation: drop it in a TransitionSeries.Overlay
and the flare blooms over whatever cut is happening underneath. It takes its
length from the overlay it sits in, so the envelope always finishes exactly when
the overlay does.
peakAt moves the brightest moment inside that window. TransitionSeries.Overlay
centres the overlay on the cut, so the default 0.5 puts the flare on the seam;
lower values peak before it. intensity scales the whole envelope and
blendMode decides how it composites.
An overlay does not shorten the series the way a transition does, so budget its scenes yourself: two 60-frame sequences fill a 120-frame composition and cut at frame 60, and a 24-frame overlay then spans frames 48–72.
Rendering needs the ANGLE backend: pass --gl=angle to remotion render, or
set chromiumOptions: { gl: "angle" } when using the SSR APIs.
Requires @remotion/light-leaks. Run npx remotion add @remotion/light-leaks if not already installed.
Advanced. Installs @remotion/light-leaks. Rendering needs the ANGLE backend: pass --gl=angle.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/transition-light-leak- Use when: scene transitions and composition pacing.
- Customize: durationInFrames, seed, hueShift, intensity, 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 { TransitionLightLeak } from "@/remotion/primitives/transition-light-leak";
<TransitionSeries.Overlay durationInFrames={30}>
<TransitionLightLeak seed={2} hueShift={45} />
</TransitionSeries.Overlay>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| durationInFrames | number | - | Length of the flare. Defaults to the overlay's own length. |
| seed | number | 0 | Light leak pattern seed. |
| hueShift | number | 28 | Hue rotation in degrees, warm amber by default. |
| intensity | number | 1 | Peak opacity of the leak. |
| peakAt | number | 0.5 | Where the flare peaks in its window. Sit it on the cut to hide the seam. |
| blendMode | "screen" | "plus-lighter" | "normal" | "screen" | How the leak composites over the frame. |