Chapter 943: Light Leaks

Core Idea

The lightLeak() effect from @remotion/effects renders an animated WebGL2-based light leak overlay. The light leak reveals during the first half of its progress and retracts during the second half.

Key Concepts

• Changing the seed
• Changing the color
• Using as a transition
• See also

Code Examples

import {
  AbsoluteFill,
  interpolate,
  Solid,
  useCurrentFrame,
  useVideoConfig,
} from 'remotion';

export const MyComp: React.FC = () => {
  const frame = useCurrentFrame();
  const {durationInFrames, height, width} = useVideoConfig();

  return (
    <AbsoluteFill style={{backgroundColor: 'black'}}>
      <Solid
        width={width}
        height={height}
        effects={[
          lightLeak({
            seed: 3,
            hueShift: 30,
            progress: interpolate(
              frame,
              [0, durationInFrames - 1],
              [0, 1],
              {
                extrapolateLeft: 'clamp',
                extrapolateRight: 'clamp',
              },
            ),
          }),
        ]}
      />
    </AbsoluteFill>
  );
};

• What it demonstrates: Usage pattern for Light Leaks from the official docs.

Key Takeaways

1. Understand changing the seed when working with Light Leaks.
2. Understand changing the color when working with Light Leaks.
3. Understand using as a transition when working with Light Leaks.
4. Understand see also when working with Light Leaks.

Connects To

• 4 0 Alpha: related page in the Miscellaneous (Core) section.
• ai: related page in the Miscellaneous (Core) section.
• Animated Emoji: related page in the Miscellaneous (Core) section.