Adventureland Registry
Motion / Effects

Camera Zoom

Multi-phase camera pan + scale toward a focus point (zoom in, hold, out).

CameraZoomLayer scales and translates its children toward a focus point across phased frame windows — zoom in, hold, zoom out — to fake a camera push-in on part of a scene. Supports a second independent zoom phase for sequences that focus two areas in turn. (ZoomContainer is the simpler single-phase variant.)

Installation

npx shadcn@latest add @adv/camera-zoom

Usage

import { CameraZoomLayer } from '@adv/motion';

<CameraZoomLayer
  zoomInStart={10} zoomInEnd={45} zoomOutStart={80} zoomOutEnd={115}
  maxScale={1.8} translateYAtMaxZoom={0} focusPointX={50} focusPointY={50}
>
  <YourScene />
</CameraZoomLayer>

Example

On this page