Setting the file. One moment.
Skill 01 · Remotion Best Practices
Subchapter 1.66
remotion-markup/light-leaks.mdMarkdown3 KBView on GitHub
This only works from Remotion 4.0.500 and up. Use npx remotion versions to check your Remotion version and npx remotion upgrade to upgrade your Remotion version.
Apply lightLeak() from @remotion/effects/light-leak to a canvas-based component such as . Animate from to ; the light leak reveals during the first half and retracts during the second half.
<Solid>progress01Typically use it inside a <TransitionSeries.Overlay> to play over the cut point between two scenes. See the transitions rule for <TransitionSeries> and overlay usage.
npx remotion add @remotion/effectsKeep the progress calculation inline so it is editable in Remotion Studio:
import {lightLeak} from '@remotion/effects/light-leak';
import {interpolate, Solid, useCurrentFrame, useVideoConfig} from 'remotion';
const LightLeakOverlay: React.FC<{
seed?: number;
hueShift?: number;
}> = ({seed = 0, hueShift = 0}) => {
const frame = useCurrentFrame();
const {durationInFrames, height, width} = useVideoConfig();
return (
<Solid
width={width}
height={height}
effects={[
lightLeak({
seed,
hueShift,
progress: interpolate(frame, [0, durationInFrames - 1], [0, 1], {
extrapolateLeft: 'clamp',
extrapolateRight: 'clamp',
}),
}),
]}
/>
);
};import {TransitionSeries} from '@remotion/transitions';
<TransitionSeries>
<TransitionSeries.Sequence durationInFrames={60}>
<SceneA />
</TransitionSeries.Sequence>
<TransitionSeries.Overlay durationInFrames={30}>
<LightLeakOverlay />
</TransitionSeries.Overlay>
<TransitionSeries.Sequence durationInFrames={60}>
<SceneB />
</TransitionSeries.Sequence>
</TransitionSeries>;progress? — controls the evolve/retract phase from 0 to 1. Effects do not animate on their own, so drive it with useCurrentFrame() and interpolate(). Default: 0.5.seed? — determines the shape of the light leak pattern. Different seeds produce different patterns. Default: 0.hueShift? — rotates the hue in degrees (0–360). Default: 0 (yellow-to-orange). 120 = green, 240 = blue.disabled? — skips the effect when true. Default: false.// Blue-tinted light leak with a different pattern
<LightLeakOverlay seed={5} hueShift={240} />;
// Green-tinted light leak
<LightLeakOverlay seed={2} hueShift={120} />;The overlay component can also be used outside of <TransitionSeries> as a decorative layer in any composition:
import {AbsoluteFill} from 'remotion';
const MyComp: React.FC = () => (
<AbsoluteFill>
<MyContent />
<LightLeakOverlay seed={3} />
</AbsoluteFill>
);lightLeak() uses WebGL2. Enable WebGL during rendering with Config.setChromiumOpenGlRenderer("angle").