Depth Parallax Scene

Heroes

About

A layered scene where consumer-supplied background/foreground layers travel at depth-proportional rates as the page scrolls and drift subtly with the pointer, used for parallax heroes and depth-of-field storytelling sections.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Depth Parallax Scene to your project and fits it to your theme.

Code

How Depth Parallax Scene is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { DepthParallaxScene } from "@/components/ui/depth-parallax-scene";

function Sky() {
  return (
    <div className="absolute inset-0">
      <div className="absolute inset-0 bg-gradient-to-b from-[#0a1224] via-[#0d1b33] to-[#122543]" />
      <div className="absolute right-[18%] top-[22%] h-56 w-56 rounded-full bg-[#3b6fe0]/40 blur-3xl" />
    </div>
  );
}

function FarRidge() {
  return (
    <div className="absolute inset-0 flex items-end justify-center">
      <div className="h-[55%] w-[150%] rounded-t-[50%] bg-[#0c1830]/90" />
    </div>
  );
}

function City() {
  const heights = [38, 62, 46, 78, 54, 70, 42, 58];
  return (
    <div className="absolute inset-0 flex items-end justify-center gap-3 px-12 pb-0">
      {heights.map((h, i) => (
        <div
          key={i}
          className="relative w-9 rounded-t-sm bg-[#1b2b45]"
          style={{ height: `${h}%` }}
        >
          <span className="absolute left-1/2 top-3 h-[3px] w-5 -translate-x-1/2 rounded-full bg-[#5fd3e8] shadow-[0_0_10px_2px_rgba(95,211,232,0.7)]" />
        </div>
      ))}
    </div>
  );
}

function FloatingCards() {
  return (
    <div className="absolute inset-0 flex items-center justify-center">
      <div className="h-28 w-28 rounded-full border border-white/20 bg-gradient-to-br from-[#5fd3e8]/60 to-[#3b6fe0]/60 shadow-[0_0_60px_10px_rgba(95,211,232,0.35)] backdrop-blur" />
    </div>
  );
}

export default function DepthParallaxSceneDemo() {
  return (
    <div className="flex w-full items-center justify-center bg-[#080c14] p-6">
      <div className="w-full max-w-2xl overflow-hidden rounded-2xl border border-[#1c2a3f]">
        <DepthParallaxScene
          scrollMode="container"
          layers={[
            { node: <Sky />, depth: 0.06 },
            { node: <FarRidge />, depth: 0.16, blurAtDepth: 2.5 },
            { node: <City />, depth: 0.32 },
            { node: <FloatingCards />, depth: 0.78 },
          ]}
          range={180}
          height={420}
          label="Layered ridge scene with floating interface cards."
        />
      </div>
    </div>
  );
}