Get everything for $99, lifetime

Components

Hero Media Scroll-Out

Pro

Ship faster, together.

Scroll to bring the screenshot up.

Installation

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

Works once the @useplanes registry is set up in your project (one-time). After that, copy and run commands directly.

Unlock with Planes Pro

$99 once · 161 Pro components · lifetime updates.

I have a licenseGet Pro
import { HeroMediaScrollOut } from "@/components/ui/HeroMediaScrollOut";

<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.