Pointer-Tilt Layered Depth Hero

What this builds

A full-viewport hero section where 3-5 visual layers (background, midground elements, text, foreground accents) respond to pointer position with true CSS 3D perspective transforms, creating a convincing depth diorama effect. Each layer tilts at a different rate based on its simulated z-depth.

• Layers separate visually on pointer movement, revealing parallax gaps between them
• A glare/light-reflection layer tracks the tilt angle, selling the physicality
• Smooth interpolation (lerp) prevents jitter; movement feels weighted, not 1:1
• Touch devices fall back to DeviceOrientation gyroscope input
• prefers-reduced-motion disables all movement and shows a flat composite
• The entire hero loads as a static composition first; JS only enhances it

When to use / when not to

• Use when the hero needs to feel tangible and physical without heavy 3D libraries.
• Use when you have distinct visual assets (photo layers, illustrations, UI mockups) that benefit from depth separation.
• Do NOT use when the hero is text-only with no layered imagery; see hero-minimal-swiss-type instead.
• Do NOT use for scroll-driven parallax where layers respond to scroll position; see primitives parallax-depth-systems for that.
• Do NOT use for a single card tilt effect; that is a micro-interaction covered in primitives hover-microinteraction-catalog.