Spatial Depth
Perspective, z-depth, parallax, scale and shadow can explain foreground and background relationships. Use them in small coordinated amounts so users perceive hierarchy rather than a moving camera.
Live example
Try the interaction before reading the recipe.
real component · keyboard-safe
Spatial Depth · hierarchy changes without losing order
Purpose
Perspective, z-depth, parallax, scale and shadow can explain foreground and background relationships. Use them in small coordinated amounts so users perceive hierarchy rather than a moving camera.
Start with scale and elevation, add shallow z translation only when it clarifies selection, and keep rotations in single digits. Avoid simultaneous deep perspective, blur, parallax and large pointer tracking; this increases motion sickness and hides content.
Reading and focus order must remain independent of visual depth. Flatten spatial layouts on mobile and reduced motion, keep text sharp, and use transforms rather than layout changes. Depth should never communicate the only selected state.
Source: packages/skills/patterns/spatial-depth.md