Zoom Through Transition
Aggressively scale into the center of an element to fly through it
Installation
$ pnpm dlx shadcn@latest add @remocn/zoom-through-transitionUsage
// 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 |