Skip to content
Pinky UI

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

Source order
Authored composition

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