Depth Hero
`DepthHero` composes background, artwork, content and foreground through restrained `Parallax` layers. Use it for creative products or portfolios where layering explains visual hierarchy.
Live example
Try the interaction before reading the recipe.
real component · keyboard-safe
Depth without the camera trick.
Purpose
DepthHero composes background, artwork, content and foreground through restrained Parallax layers. Use it for creative products or portfolios where layering explains visual hierarchy.
Keep depth values close together and movement small; usually three or four layers are enough. Avoid dense copy over moving artwork, aggressive camera-like perspective or a second parallax section immediately below.
Reading order follows the semantic content rather than visual z-depth. Reduced motion and mobile flatten the relationship while preserving every layer. Optimize large artwork and compose with SoftMeshBackground only at low intensity.
Source: packages/skills/heroes/depth-hero.md