Skip to main content

lightLeak()v4.0.468

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​

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. During renders, enable WebGL via Config.setChromiumOpenGlRenderer() (for example 'angle'). See Using WebGL during renders.

See also​