1---
2name: light-leaks
3description: Light leak overlay effects for Remotion using @remotion/light-leaks.
4metadata:
5  tags: light-leaks, overlays, effects, transitions
6---
7 
8## Light Leaks
9 
10This only works from Remotion 4.0.415 and up. Use `npx remotion versions` to check your Remotion version and `npx remotion upgrade` to upgrade your Remotion version.
11 
12`<LightLeak>` from `@remotion/light-leaks` renders a WebGL-based light leak effect. It reveals during the first half of its duration and retracts during the second half.
13 
14Typically used inside a `<TransitionSeries.Overlay>` to play over the cut point between two scenes. See the **transitions** rule for `<TransitionSeries>` and overlay usage.
15 
16## Prerequisites
17 
18```bash
19npx remotion add @remotion/light-leaks
20```
21 
22## Basic usage with TransitionSeries
23 
24```tsx
25import { TransitionSeries } from "@remotion/transitions";
26import { LightLeak } from "@remotion/light-leaks";
27 
28<TransitionSeries>
29  <TransitionSeries.Sequence durationInFrames={60}>
30    <SceneA />
31  </TransitionSeries.Sequence>
32  <TransitionSeries.Overlay durationInFrames={30}>
33    <LightLeak />
34  </TransitionSeries.Overlay>
35  <TransitionSeries.Sequence durationInFrames={60}>
36    <SceneB />
37  </TransitionSeries.Sequence>
38</TransitionSeries>;
39```
40 
41## Props
42 
43- `durationInFrames?` — defaults to the parent sequence/composition duration. The effect reveals during the first half and retracts during the second half.
44- `seed?` — determines the shape of the light leak pattern. Different seeds produce different patterns. Default: `0`.
45- `hueShift?` — rotates the hue in degrees (`0`–`360`). Default: `0` (yellow-to-orange). `120` = green, `240` = blue.
46 
47## Customizing the look
48 
49```tsx
50import { LightLeak } from "@remotion/light-leaks";
51 
52// Blue-tinted light leak with a different pattern
53<LightLeak seed={5} hueShift={240} />;
54 
55// Green-tinted light leak
56<LightLeak seed={2} hueShift={120} />;
57```
58 
59## Standalone usage
60 
61`<LightLeak>` can also be used outside of `<TransitionSeries>`, for example as a decorative overlay in any composition:
62 
63```tsx
64import { AbsoluteFill } from "remotion";
65import { LightLeak } from "@remotion/light-leaks";
66 
67const MyComp: React.FC = () => (
68  <AbsoluteFill>
69    <MyContent />
70    <LightLeak durationInFrames={60} seed={3} />
71  </AbsoluteFill>
72);
73```
74