Parallax layers
Scroll-linked depth layers that move at different speeds as the page scrolls.
API reference
Components
<ParallaxScene />
Scroll-driving scene root that publishes progress to layers.
children?
Scene contents: ParallaxLayers and static chrome.
className?
Merged onto the scene element.
as?
Element type for the scene root. Default "div".
offset?
Scroll offset defining 0 → 1 progress.
<ParallaxLayer />
Single depth layer that moves with scroll progress.
children?
Layer content.
speed
Scroll speed multiplier.
scaleDrift?
Scale drift from 1 to 1 + scaleDrift * speed. Default 0.
className?
Merged onto the moving element.
"aria-hidden"?
Set on purely decorative layers.
Hooks
useParallaxScroll
Raw scrollYProgress from the enclosing ParallaxScene.
useParallaxScroll(): MotionValue<number>Featured in
See the parallax layers composed into full sections.
