Skip to content
Pinky UI

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

Quiet systems

Depth without the camera trick.

Move nearby to feel the layers separate.

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