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 — put it on the cut
itself so the flare covers the seam rather than arriving after it. intensity
scales the whole envelope and blendMode decides how it composites.
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.4 | 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. |