Light Leak

$ pnpm dlx shadcn@latest add @remocn/light-leak

Usage

lightLeak() is a Remotion transition presentation. Pass it to a TransitionSeries.Transition between two sequences. A set of soft colored flares drifts in from the origin edge and screen-blends over the picture while the scene brightens. At the midpoint the frame peaks close to the last color in colors and the scenes hard-cut underneath that blow-out. The leak then keeps drifting across and cools off on the incoming scene.

Both scenes render once per frame. The cut is hidden by the blow-out, so it works best short: 16 to 24 frames.

import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { lightLeak } from "@/components/remocn/light-leak";
 
export const MyVideo = () => (
  <TransitionSeries>
    <TransitionSeries.Sequence durationInFrames={70}>
      <SceneA />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition
      timing={linearTiming({ durationInFrames: 20 })}
      presentation={lightLeak({ origin: "right" })}
    />
    <TransitionSeries.Sequence durationInFrames={70}>
      <SceneB />
    </TransitionSeries.Sequence>
  </TransitionSeries>
);

Colors

colors is a list, warmest first. The flares cycle through every color except the last, and the last one is the blow-out tint the frame flashes to at the cut. A single color is used for both the flares and the blow-out, and an empty list falls back to the default palette.

lightLeak({ colors: ["#7C3AED", "#2563EB", "#22D3EE", "#F0F9FF"] });

Props

lightLeak(props) accepts: