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-zoomUsage
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>