Parallax Hero

Hero Backgrounds

A layered parallax hero where a gradient backdrop, floating accent shapes, optional mid-ground layers, and the copy slot each drift on their own depth plane from spring-smoothed pointer input, tilting a few degrees in 3D for a diorama feel; under prefers-reduced-motion the parallax and shape drift are disabled, leaving a static, legible composition.

Inspired by Skiper UI — Interactive 3D Hero (pattern) — independently built, not affiliated. Attribution policy

Parable UI

Depth you can feel

Move your cursor — every layer drifts on its own plane.

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/parallax-hero.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/parallax-hero.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<ParallaxHero className="min-h-[360px] w-full rounded-xl">
    <div className="flex max-w-md flex-col items-center gap-4 text-center">
      <span className="inline-flex items-center gap-1.5 rounded-full border border-white/15 bg-white/5 px-3 py-1 text-xs font-medium text-white/70 backdrop-blur-sm">
        <Sparkles className="size-3.5 text-violet-300" /> Parable UI
      </span>
      <h1 className="bg-gradient-to-b from-white to-white/55 bg-clip-text text-3xl font-semibold tracking-tight text-transparent sm:text-4xl">
        Depth you can feel
      </h1>
      <p className="text-sm text-white/55">
        Move your cursor — every layer drifts on its own plane.
      </p>
      <button className="mt-1 inline-flex items-center gap-1.5 rounded-lg bg-white px-4 py-2 text-sm font-medium text-black transition-transform hover:scale-[1.03] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60">
        Get started <ArrowRight className="size-4" />
      </button>
    </div>
  </ParallaxHero>

Props

ParallaxHeroProps extends React.HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
layers	ParallaxLayerSpec[]	—	Extra mid-ground planes rendered behind the copy. Each `content` translates by `depth × intensity`. Omit to use just the built-in backdrop + accents.
background	React.ReactNode	—	Backdrop node (e.g. an image). Falls back to a soft brand gradient.
intensity	number	12	Max shift in px for a depth-1 plane at the pointer extremes.

npm dependencies

motion