Zoom Frame

Media that starts as an inset, rounded card and opens to fill the view as the page scrolls, then softens as it leaves.

Field notes

Scroll down

Ridgeline

The frame opened over the first 60% of the scroll, then blurred as it left.

pnpm dlx shadcn@latest add @latheui/zoom-frame

Part of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.

Zoom Frame is part of Lathe Pro

The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.

Depends on

API reference

Also accepts native section attributes. The section is as tall as the scroll it takes; the frame sticks to the top while it plays.

Prop	Type	Default	Description
children* (required)	ReactNode	—	The media: an img, a video, or anything that covers its box.
overlay	ReactNode	—	Laid over the media, for a headline. It fades as the frame opens.
startWidth	number	0.56	Width of the closed frame, as a fraction of the view.
startHeight	number	0.6	Height of the closed frame, as a fraction of the view.
radius	number	28	Corner radius of the closed frame, in px.
length	number	2.4	How far the section scrolls, in view heights.
openAt	number	0.6	Fraction of the scroll at which the frame is fully open.
exit	"none" \| "blur" \| "fade"	"blur"	What happens over the rest of the scroll.
zoom	number	1.18	The media starts this much larger and settles as the frame opens.
viewportHeight	string	"100dvh"	Height of the view the frame fills. Use the scrolling container's height when it is not the window.
container	RefObject<HTMLElement>	—	The element that scrolls, when it is not the window. Give it position: relative so the frame's place in it is measured from its top.
curve	Curve	power 2, in and out	How the frame opens against the scroll. Any curve from the Animation Lab.

It adds no controls or roles: the media inside keeps its own alt text, captions and video controls.
Overlay text sits on the media, so give it a shadow or a scrim for contrast.
With reduced motion the frame is open from the start and nothing zooms or blurs; the section still scrolls past.

Everything follows the scroll position, not time: scroll back up and it closes again.
The frame opens by clipping, not scaling, so the media is never resampled; only its gentle zoom moves it.

<ZoomFrame openAt={0.4} length={2}>
  <img src="/hero.jpg" alt="The studio" />
</ZoomFrame>

API reference

Also accepts native section attributes. The section is as tall as the scroll it takes; the frame sticks to the top while it plays.

Prop	Type	Default	Description
children* (required)	ReactNode	—	The media: an img, a video, or anything that covers its box.
overlay	ReactNode	—	Laid over the media, for a headline. It fades as the frame opens.
startWidth	number	0.56	Width of the closed frame, as a fraction of the view.
startHeight	number	0.6	Height of the closed frame, as a fraction of the view.
radius	number	28	Corner radius of the closed frame, in px.
length	number	2.4	How far the section scrolls, in view heights.
openAt	number	0.6	Fraction of the scroll at which the frame is fully open.
exit	"none" \| "blur" \| "fade"	"blur"	What happens over the rest of the scroll.
zoom	number	1.18	The media starts this much larger and settles as the frame opens.
viewportHeight	string	"100dvh"	Height of the view the frame fills. Use the scrolling container's height when it is not the window.
container	RefObject<HTMLElement>	—	The element that scrolls, when it is not the window. Give it position: relative so the frame's place in it is measured from its top.
curve	Curve	power 2, in and out	How the frame opens against the scroll. Any curve from the Animation Lab.