Skip to content
Pinky UI

heroes

Depth Hero

A layered Hero with restrained spatial separation between content and artwork.

  • heroes
  • hero
  • parallax
  • layers

Live preview

Quiet systems

Depth without the camera trick.

Move nearby to feel the layers separate.

Quick usage

usage
import { DepthHero } from "@pinky-ui/experiences";

<DepthHero content={<Intro />} artwork={<Artwork />} background={<Mesh />} />

Presets

Default

The restrained Pinky production default.

Default behaviour

Quiet

A flatter or lower-intensity treatment for dense pages.

disabled={true}

Install

Add @pinky-ui/experiences as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/experiences

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
artworkReactNode—The primary visual depth layer.
classNamestring—Styles the outer composition without changing its behaviour.
disabledbooleanfalseUses the static, readable composition.

Accessibility

  • Content remains in logical DOM order and motion never carries the only meaning.
  • Interactive descendants retain native link or button semantics and visible focus.

Performance

  • Composes the existing shared scroll source through Parallax.
  • Uses a small fixed number of transform layers.

Reduced motion

Spatial or continuous movement is removed while content, selection and controls remain available.

When to use

  • Creative or product Heroes with meaningful layers

When not to use

  • Text-dense pages or aggressive camera effects

Skill

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.

Open this skill on its own page