Ripple Zoom

Installation

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

Usage

rippleZoom() is a Remotion transition presentation. Pass it to a TransitionSeries.Transition between two sequences. The outgoing scene blows past the camera, a grain-gradient ripple field opens up, and the camera dives through the center of the rings — the field magnifies toward zoom while the incoming scene counter-scales up from the depth, so the two motions read as one continuous dolly onto the new scene. Keep the incoming scene transparent so it lands on the ripple field. Give the flight enough frames to read (88 works well).

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

Props

rippleZoom(props) accepts: