Components

Hero Media Scroll-Out

Pro

A hero screenshot that stands up from a tilted perspective to flat as the visitor scrolls in — transform-only, driven by scroll position.

Ship faster, together.

Scroll to bring the screenshot up.

Installation

ProRequires a Planes Pro license.
npx shadcn add @useplanes/hero-media-scroll-out

Unlock with Planes Pro

$99 once · 80 Pro components · lifetime updates.

I have a licenseGet Pro
<HeroMediaScrollOut tilt={18} scale={0.9}>
  <img src="/app.png" alt="Dashboard" />
</HeroMediaScrollOut>

Examples

Reduced motion

Renders flat and full-size with no scroll coupling.

<HeroMediaScrollOut>{media}</HeroMediaScrollOut>

Use cases

  • SaaS hero

    The Vercel/Linear hero screenshot that lies back and stands up as you scroll.

  • Feature section media

    Any screenshot below the fold that should arrive with depth.

  • Device mockups

    Wrap a phone or laptop frame.

  • Video hero

    Works with a muted autoplay video as the child.