Toggle Sidebar B
AppearanceLight & dark mode D

Scroll Expand

A rounded media frame that grows to full bleed as it scrolls through the viewport.

Default

Scroll inside the frame. By default the component is its own scroller, so give its parent a fixed height. Pass useWindowScroll to follow the page scroll instead.

Light previewReplay previewOpen in new tab
Mountain range at sunrise

Every pixel, everywhere

The frame opens up as you scroll and hands the whole stage to your media.

Built to scale
Scroll inside the frame

Customize

Title
Start Width42%
Start Height58%
Start Radius24px
End Radius0px
Media Zoom1.35
Scroll Distance1.2
Hold Distance0.35
Smoothing0.1s
Overlay Scrim0.45

API Reference

ScrollExpand

PropTypeDefaultDescription
srcstring''Image or video URL shown inside the frame.
mediaType"image" | "video""image"Whether the source is an image or a looping muted video.
posterstring''Poster frame used while a video loads.
altstring''Alt text for the image.
titlestring''Headline held over the frame that lifts away as the media takes over.
scrollHintstring''Small cue shown under the resting frame that fades away as soon as the scroll begins.
startWidthnumber42Frame width before expanding, as a percentage of the stage.
startHeightnumber58Frame height before expanding, as a percentage of the stage.
startRadiusnumber24Corner radius of the resting frame, in px.
endRadiusnumber0Corner radius once fully expanded, in px.
mediaZoomnumber1.35How far the media is zoomed in at rest. It eases back to 1 as the frame opens up.
scrollDistancenumber1.2Scroll length of the expansion, in multiples of the stage height.
holdDistancenumber0.35Extra scroll the frame stays pinned at full bleed before releasing.
smoothingnumber0.1Follow time in seconds. 0 locks the frame exactly to the scrollbar.
overlayScrimnumber0.45Strength of the gradient scrim that fades in to keep overlay content readable.
useWindowScrollbooleanfalseDrive the expansion from the page scroll instead of the component's own scroller.
enabledbooleantrueEnable or disable the expansion.
SlotDescription
defaultContent that fades in over the media once it reaches full bleed.

Accessibility

Keyboard shortcuts and ARIA behavior.

Shortcut Description
↑ + ↓Scroll the frame once it has focus or the pointer is over it.
Page Up + Page DownScroll the frame by a page.
  • Give the image a meaningful alt. The title is plain text and stays in the reading order.
  • With prefers-reduced-motion the frame follows the scrollbar exactly, with no smoothing.
Ripple DistortionShape Blur