Zoom Through Transition

A scene transition that interpolates transform: scale() with an exponential easing curve, creating the impression of flying through an element. Pair with the next scene rendered behind it for a continuous reveal.

Installation

$ pnpm dlx shadcn@latest add @remocn/zoom-through-transition

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { ZoomThroughTransition } from "@/components/remocn/zoom-through-transition";

const ZoomThroughTransitionScene = () => (
  <Logo />
);

export const RemotionRoot = () => (
  <Composition
    id="ZoomThroughTransition"
    component={ZoomThroughTransitionScene}
    durationInFrames={60}
    fps={30}
    width={1280}
    height={720}
  />
);

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	The element to zoom through. Falls back to a sample gradient card.
`targetScale`	`number`	`20`	Final scale value at the end of the duration.
`transformOrigin`	`string`	`"center center"`	CSS transform-origin for the zoom point.
`background`	`string`	`"white"`	Background color visible during the zoom.
`className`	`string`	—	Optional className for the outer container.

Notes

Aim the camera

transformOrigin controls the focal point of the zoom. Set it to the exact pixel of the element you want to fly through (e.g. "50% 30%").

Match with the next scene

This transition reads as a real fly-through only if the next scene is composited underneath. Use <Sequence> to overlap timings.