Zoom Parallax
Seven photographs in an asymmetric editorial collage around a center image. As progress runs, every photograph grows from its own place at its own pace, the center fastest, so the center photograph glides to fill the frame while the others fly outward past the edges with real depth. Frames carry soft shadows and the photographs stay crisp all the way in. Progress can come from a number or a live scroll value, or the zoom loops on its own. Layout, depth, shadow, pace and a gentle cursor drift are all props. Reduced motion shows the full center photograph.
The import and the props worth knowing about, in one place.
import { ZoomParallax } from "@/components/beste/component/zoom-parallax";
<ZoomParallax className="h-[36rem] w-full" />
// Driven by scroll: pass a framer-motion MotionValue (or any { get() }) as progress
const { scrollYProgress } = useScroll({ target: ref });
<ZoomParallax progress={scrollYProgress} autoplay={false} layout="headline" depth={0.8} />Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
images | ZoomParallaxImage[] | — | Up to seven photographs; the first is the center image that grows to fill the frame. |
layout | "editorial" | "headline" | — | Collage arrangement: balanced around the center, or with a clear band at the top for a headline. |
depth | number | — | How much faster the center grows than the photographs around it, 0 to 1. |
shadow | number | — | Soft shadow under each photograph, 0 to 1. |
progress | number | ZoomProgressSource | — | Zoom from collage (0) to the full center photograph (1): a number or a live source such as a scroll MotionValue. |
autoplay | boolean | — | Loop between collage and full frame on its own. Defaults to on when no progress is given. |
speed | number | — | Pace of the autoplay loop. |
interactive | boolean | — | The collage drifts gently with the cursor, the nearest photographs most. |
paused | boolean | — | Freeze the zoom where it is. |
className | string | — | |
children | ReactNode | — | Overlay content, positioned by the caller. |
