Motion UIComponentsComponent

Scroll zoom reveal

A zoomed, tilted screenshot that settles crisp and flat as it scrolls into view.

npx shadcn@latest add @motion/scroll-zoom-reveal
Install guideMotionScore

API reference

Components

<ScrollZoomReveal />

Scroll-driven zoom/tilt/fade/unblur reveal. Transform and opacity are on separate nodes.

startScale?

number = 1.45

Starting scale before settling to 1. Default 1.45.

startTilt?

number = 22

Starting forward tilt in degrees (rotateX). Default 22.

startOpacity?

number = 0.35

Starting opacity. Default 0.35.

softenPx?

number = 3

Starting blur radius in px. 0 disables blur. Default 3.

settleAt?

number = 1

Scroll fraction where the settle completes. Default 1.

className?

string

Merged onto the shot frame.

children?

ReactNode

Content to reveal.