Multi-Layer Parallax Depth System

What this builds

A full narrative scroll section where 3-5 visual layers move at different speeds to create the illusion of depth as the user scrolls. Background layers move slowest, foreground layers move fastest, creating a z-depth separation that reinforces a story beat. The section is wrapped in narrative structure with an entrance, a parallax zone, and an exit, not a standalone effect applied to a background image.

• 3-5 stacked visual layers with explicit depth ratios derived from a model, not guessed
• Scroll-driven translateY at different rates per layer (compositor-only, no layout)
• Optional mouse-move parallax layered on top for desktop pointer reactivity
• Mobile strategy: simplified to 1 passive layer or disabled entirely below 768px
• prefers-reduced-motion fallback: static layered composition, no motion
• Vestibular safety: maximum layer speed differential capped to prevent motion sickness
• Narrative wrapper: intro beat, parallax zone, exit beat with content text