ContextQMD
Back to Remotion

lightLeak()

packages/docs/docs/light-leaks/light-leak-effect.mdx

4.0.4782.4 KB
Original Source

lightLeak()<AvailableFrom v="4.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

<EffectsDemo type="effects-light-leak" />

Example

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('angle'). See Using WebGL during renders.

See also