Zoom Through Transition

Aggressively scale into the center of an element to fly through it

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

PropTypeDefaultDescription
children
ReactNodeThe element to zoom through. Falls back to a sample gradient card.
targetScale
number20Final 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
stringOptional className for the outer container