Skip to main content

lightLeak()v4.0.468

Deprecated

@remotion/light-leaks is deprecated and will no longer be published starting with Remotion 5.0. Migrate to lightLeak() from @remotion/effects/light-leak.

Part of the @remotion/light-leaks package.

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

Use it when you want to add the light leak effect through an effects array instead of rendering the <LightLeak> component.

Preview​

Drag current effect onto a layer in the Studio

Example​

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

export const MyComp: React.FC = () => {
  const frame = useCurrentFrame();
  const progress = interpolate(frame, [0, 30], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

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

API​

Pass an object with the following properties.

seed?​

Determines the shape of the light leak pattern. Different seeds produce different patterns. Default: 0.

hueShift?​

Rotates the hue of the light leak in degrees (0-360).

  • 0 (default) yellow-to-orange
  • 120 shifts toward green
  • 240 shifts toward blue

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. See Using WebGL and WebGPU during renders.

See also​