Skip to content
Pinky UI

heroes

Morphing Hero

A Hero whose major title and media composition compresses with page progress.

  • heroes
  • hero
  • scroll
  • handoff

Quick usage

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

<MorphingHero title="Make interfaces feel alive" media={<Artwork />} />

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
mediaReactNode—The major visual that transforms with the Hero.
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

  • Scroll progress is a MotionValue with no per-frame React state.
  • Transforms avoid layout work.

Reduced motion

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

When to use

  • A Hero that hands visual context into the page

When not to use

  • Pages with another dominant scroll narrative

Skill

Purpose

MorphingHero lets a major title and media composition compress meaningfully as the page advances. Use it when the opening visual establishes context that should hand off cleanly to the next section.

Choose one transformation story and keep the rest of the Hero calm. Avoid long pinned sequences, decorative perpetual movement or independent animation on every word and control. The effect should clarify progression, not delay content.

Headings and actions remain normal DOM content and scroll remains native. Reduced motion and disabled render the resolved static composition; mobile receives smaller spatial changes. Pair with a quiet background or simple navbar, not another dominant scroll effect.

Open this skill on its own page