Parallax Scene
Layered scene primitive with per-layer cursor and scroll parallax, spring-smoothed motion, and reduced-motion fallbacks.
Cursor-driven
Crisp preset with pointer-driven layers at background, mid, and foreground depths.
Crisp preset
Move the pointer
Layers at different depths respond with tight, cursor-driven motion.
Sign in to view this example's source code.
Sign inScroll-driven
Fog preset inside a scoped scroll container with layered depth and item strength variants.
Scroll inside this container
Background - slowest
Mid layer
Foreground - fastest
soft strength
Subtle drift as you scroll - compare against the layer markers behind this card.
medium strength
Mid-range travel. Notice how this card and the blurred orbs move at different speeds.
Fog preset
Depth reacts to scroll
Layers and items share one scroll progress value but each depth travels a different distance.
Sign in to view this example's source code.
Sign inCursor + scroll
Minimal preset with interaction="both" and per-item scroll overrides.
Both inputs
Cursor only
Both inputs
Center item uses scroll=false to override scene-level interaction.
Sign in to view this example's source code.
Sign inProps
| Name | Type | Default | Description |
|---|---|---|---|
| variant | "fog" | "cinematic" | "minimal" | "crisp" | "cinematic" | Scene preset controlling perspective, motion range, and default interaction |
| interaction | "scroll" | "cursor" | "both" | "none" | variant default | Motion input source; overrides the preset default |
| scrollTargetRef | RefObject<HTMLElement> | scene ref | Scroll container for scroll-driven parallax |
| scrollOffset | ["start end", "end start"] | ["start end", "end start"] | Framer Motion scroll offset for progress mapping |
| disabled | boolean | false | Disables motion; also respects prefers-reduced-motion |
| resetOnLeave | boolean | true | Resets cursor offsets when pointer leaves the scene |
| ParallaxLayer.variant | "background" | "mid" | "foreground" | - | Depth preset for layer parallax strength |
| ParallaxItem.variant | "soft" | "medium" | "strong" | "medium" | Motion strength preset for individual items |
| ParallaxItem.cursor / scroll | boolean | scene default | Per-item override for cursor or scroll motion |
| cursorStrength / scrollStrength | number | 1 | Per-item multipliers for cursor or scroll motion |