Skip to main content

Light Leaksv4.0.415

The <LightLeak> component from @remotion/light-leaks renders a WebGL-based light leak effect. The effect reveals during the first half of its duration and retracts during the second half.

import {LightLeak} from '@remotion/light-leaks';
import {AbsoluteFill} from 'remotion';

const MyComp = () => {
  return (
    <AbsoluteFill style={{backgroundColor: 'black'}}>
      <LightLeak durationInFrames={60} seed={3} hueShift={30} />
    </AbsoluteFill>
  );
};

Changing the seed​

The seed prop controls the shape of the light leak pattern. Different values produce different patterns.

const MyComp = () => {
  return (
    <AbsoluteFill style={{backgroundColor: 'black'}}>
      <LightLeak seed={5} durationInFrames={30} />
    </AbsoluteFill>
  );
};

Changing the color​

Use hueShift to rotate the color of the light leak in degrees (0–360):

  • 0 (default) — yellow-to-orange
  • 120 — shifts toward green
  • 240 — shifts toward blue
const MyComp = () => {
  return (
    <AbsoluteFill style={{backgroundColor: 'black'}}>
      <LightLeak hueShift={240} durationInFrames={30} />
    </AbsoluteFill>
  );
};

Using as a transition​

Combined with <TransitionSeries.Overlay>, you can place a light leak at the cut point between two sequences without shortening the timeline.

import {LightLeak} from '@remotion/light-leaks';
import {TransitionSeries} from '@remotion/transitions';

const LightLeakTransition = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={60}>
        <Fill color="#0b84f3" />
      </TransitionSeries.Sequence>
      <TransitionSeries.Overlay durationInFrames={20}>
        <LightLeak />
      </TransitionSeries.Overlay>
      <TransitionSeries.Sequence durationInFrames={60}>
        <Fill color="pink" />
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};

At the midpoint, the light leak covers most of the canvas, hiding the cut between scenes.

See also​