Skip to main content

lightLeak()v4.0.500

Part of the @remotion/effects package.

Applies a WebGL2-based light leak overlay to canvas-based components such as <Video>, <CanvasImage> and <Solid>.

The light leak reveals during the first half of its progress and retracts during the second half.

Preview​

Drag current effect onto a layer in the Studio

Example​

MyComp.tsx
import {lightLeak} from '@remotion/effects/light-leak';
import {CanvasImage, interpolate, staticFile, useCurrentFrame} from 'remotion';

export const MyComp: React.FC = () => {
  const frame = useCurrentFrame();

  return (
    <CanvasImage
      src={staticFile('image.png')}
      width={1280}
      height={720}
      fit="cover"
      effects={[
        lightLeak({
          seed: 3,
          hueShift: 30,
          progress: interpolate(frame, [0, 30], [0, 1], {
            extrapolateLeft: 'clamp',
            extrapolateRight: 'clamp',
          }),
        }),
      ]}
    />
  );
};

API​

Pass an object with the following properties. You can also call lightLeak() without arguments.

seed?​

Determines the shape of the light leak pattern. Different seeds produce different patterns. Defaults to 0.

hueShift?​

Rotates the hue of the light leak from 0 to 360 degrees. Defaults to 0 for a yellow-to-orange light leak.

progress?​

Controls the evolve/retract phase from 0 to 1.

Effects do not animate on their own. Drive progress with useCurrentFrame(), interpolate(), or input props. Defaults to 0.5 so the light leak is visible when the effect is first added.

disabled?​

When true, the effect is skipped. Defaults to false.

Requirements​

lightLeak() uses a WebGL2 backend. During renders, enable WebGL via Config.setChromiumOpenGlRenderer('angle'). See Using WebGL during renders.

See also​