Search

Search the site

All components

Parallax Scene

Layered scene primitive with per-layer cursor and scroll parallax, spring-smoothed motion, and reduced-motion fallbacks.

Cursor-driven
Three depth layers reacting to pointer movement.

Cursor parallax

Move the pointer

Objects react inside a shared motion field.

Sign in to view this example's source code.

Sign in
Scroll-driven
Scoped scroll area with per-layer scroll strength.
Floating stat card
Secondary info block

Scroll parallax

Depth reacts to scroll

Multiple elements now exist independently in the same field.

Each item has its own depth and motion response.

Sign in to view this example's source code.

Sign in
Minimal
Minimal parallax scene
Subtle item A
Subtle item B
Focused item

Sign in to view this example's source code.

Sign in

Props

NameTypeDefaultDescription
enableCursorbooleantruePointer-driven layer offsets
enableScrollbooleanfalseScroll-progress offsets when scrollRef is set
scrollRefRefObject<HTMLElement>scene refScroll container for scroll-driven parallax
depthnumber0.5ParallaxLayer depth from far (0) to near (1)
cursorStrength / scrollStrengthnumberdepthPer-layer multipliers overriding depth defaults