Iris Wipe

$ pnpm dlx shadcn@latest add @remocn/iris-wipe

Usage

irisWipe() is a Remotion transition presentation. Pass it to a TransitionSeries.Transition between two sequences. The first half of the transition closes a circle on the outgoing scene: it rushes in from outside the frame, slows into a small dot of holdRadius, then snaps shut. Everything outside the circle is filled with color. The second half opens a circle on the incoming scene from the same center. The closing radius follows one continuous curve, so the iris never fully stops between the rush and the hold.

Both scenes render once per frame, so it is as cheap as a transition gets.

import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { irisWipe } from "@/components/remocn/iris-wipe";
 
export const MyVideo = () => (
  <TransitionSeries>
    <TransitionSeries.Sequence durationInFrames={70}>
      <SceneA />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition
      timing={linearTiming({ durationInFrames: 36 })}
      presentation={irisWipe({ centerX: 0.62, centerY: 0.4 })}
    />
    <TransitionSeries.Sequence durationInFrames={70}>
      <SceneB />
    </TransitionSeries.Sequence>
  </TransitionSeries>
);

Timing

Props

irisWipe(props) accepts: