Motion UIComponentsComponent

Screenshot scroll reveal

A headline that lifts away while a screenshot tilts upright and scales into centre on scroll.

API reference

Components

`<ScreenshotScrollReveal />`

Pinned scroll take-over stage with headline and screenshot layers.

`headline`

ReactNode

Headline block, centred in the headline layer.

`screenshot`

ReactNode

Screenshot block in the screenshot layer.

`ariaLabelledBy?`

string

id of the heading inside headline, wired to aria-labelledby.

`className?`

string

Merged onto the <section> root.

Hooks

`useScreenshotScrollReveal`

Scroll take-over hook: attach sectionRef, branch on reduce, spread layer styles.

useScreenshotScrollReveal(options: ScreenshotScrollRevealOptions): ScreenshotScrollRevealState

`tiltSpeed?`

number = 1

RotateX start = BASE_TILT_DEG * tiltSpeed. 0 starts flat.

`scaleSpeed?`

number = 1

Scale/rest depth multiplier. 0 starts at full size in place.

`headlineSpeed?`

number = 1

Headline lift multiplier. 0 fades in place.

Returns

`sectionRef`

RefObject<HTMLElement | null>

Attach to the scrolling section measured by useScroll.

`reduce`

boolean

Render the static composed frame instead of the pinned reveal.

`still`

boolean

The "off" strategy: no entrance animation.

`calm`

boolean

The "calm" strategy: entrance fade without travel.

`screenshotStyle`

MotionStyle | undefined

Screenshot layer scroll-linked style. undefined under reduced motion.

`headlineTransformStyle`

MotionStyle | undefined

Headline layer scroll-linked transform and filter.

`headlineOpacityStyle`

MotionStyle | undefined

Headline opacity on its own node so scroll opacity stays live.

`headlineInitial`

false | { opacity: number; transform: string }

Headline entrance initial.

`screenshotInitial`

false | { opacity: number; transform: string }

Screenshot entrance initial.

`enterTransition`

UITransition

Shared entrance transition (gentle).

`screenshotDelay`

number

Screenshot entrance delay (theme.stagger.base).