Skip to main content

<LightLeak>v4.0.415

Renders a WebGL-based light leak effect.
The effect reveals during the first half of the duration and retracts during the second half.
Is a <Sequence> component under the hood and accepts it's props.

Example​

MyComp.tsx
tsx
import {LightLeak} from '@remotion/light-leaks';
import {AbsoluteFill} from 'remotion';
 
const MyVideo = () => {
  return (
    <AbsoluteFill style={{backgroundColor: 'black'}}>
      <LightLeak durationInFrames={60} seed={3} hueShift={30} />
    </AbsoluteFill>
  );
};

API​

Apart from the props listed below, all props from <Sequence> except children and layout are accepted.

durationInFrames?​

The duration of the light leak effect in frames. The effect reveals during the first half and retracts during the second half.
During the midpoint, the light leak will cover most of the canvas.

If not specified, defaults to the duration of the composition or sequence, reading from useVideoConfig().

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

Compatibility​

BrowsersEnvironments
Chrome
Firefox
Safari

See also​