Lens Zoom

Installation

$ pnpm dlx shadcn@latest add @remocn/lens-zoom

Usage

lensZoom() is a Remotion transition presentation. The transition is a hard cut, not a dissolve: the outgoing half owns progress 0–0.5 and the incoming half owns 0.5–1, so the splice lands exactly halfway through the transition. Use LENS_ZOOM_DURATION_IN_FRAMES (28) with linearTiming for the tutorial's pacing — two equal 14-frame ramps either side of the cut.

import { TransitionSeries, linearTiming } from "@remotion/transitions";
import {
  lensZoom,
  LENS_ZOOM_DURATION_IN_FRAMES,
} from "@/components/remocn/lens-zoom";
 
export const MyVideo = () => (
  <TransitionSeries>
    <TransitionSeries.Sequence durationInFrames={70}>
      <SceneA />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition
      timing={linearTiming({ durationInFrames: LENS_ZOOM_DURATION_IN_FRAMES })}
      presentation={lensZoom()}
    />
    <TransitionSeries.Sequence durationInFrames={70}>
      <SceneB />
    </TransitionSeries.Sequence>
  </TransitionSeries>
);

Performance scales with blurSamples × (lensSteps + 1) painted copies of each scene per frame, tripled when the three channel scales differ. Setting redScale, greenScale and blueScale equal skips the chromatic split entirely — the single biggest thing to turn off while dialling the transition in.

Props

lensZoom(props) accepts:

Inspired by After Effects: Lens Zoom Transition Tutorial by Creative Dojo.