transition-light-leak

1import { LightLeak } from "@remotion/light-leaks";
2import {
3  AbsoluteFill,
4  interpolate,
5  useCurrentFrame,
6  useVideoConfig,
7} from "remotion";
8import { DURATION, EASING } from "@/remotion/lib/motion-tokens";
9 
10export type TransitionLightLeakProps = {
11  durationInFrames?: number;
12  seed?: number;
13  /** Hue rotation in degrees — warm amber by default */
14  hueShift?: number;
15  /** Peak opacity of the leak, 0→1. */
16  intensity?: number;
17  /**
18   * Where the leak peaks inside its window, 0→1. Sit it on the cut itself so
19   * the flare hides the seam rather than arriving after it.
20   */
21  peakAt?: number;
22  blendMode?: "screen" | "plus-lighter" | "normal";
23};
24 
25/** Light leak overlay for TransitionSeries.Overlay */
26export const TransitionLightLeak: React.FC<TransitionLightLeakProps> = ({
27  durationInFrames,
28  seed = 0,
29  hueShift = 28,
30  intensity = 1,
31  peakAt = 0.4,
32  blendMode = "screen",
33}) => {
34  const frame = useCurrentFrame();
35  const { durationInFrames: sequenceDuration } = useVideoConfig();
36  // An overlay is mounted for exactly its own window, so its length is
37  // knowable. Defaulting to a fixed `DURATION.fast` made the envelope finish
38  // early — or never finish — whenever the overlay was not 12 frames long.
39  const span = durationInFrames ?? sequenceDuration ?? DURATION.fast;
40  const peak = Math.min(Math.max(peakAt, 0.05), 0.95);
41 
42  const envelope = interpolate(
43    frame,
44    [0, span * peak * 0.55, span * peak, span],
45    [0, intensity, intensity * 0.85, 0],
46    {
47      extrapolateLeft: "clamp",
48      extrapolateRight: "clamp",
49      easing: EASING.editorial,
50    },
51  );
52  const scale = interpolate(envelope, [0, intensity], [1.08, 1], {
53    extrapolateLeft: "clamp",
54    extrapolateRight: "clamp",
55  });
56 
57  return (
58    <AbsoluteFill style={{ opacity: envelope, scale, mixBlendMode: blendMode }}>
59      <LightLeak durationInFrames={span} seed={seed} hueShift={hueShift} />
60    </AbsoluteFill>
61  );
62};