Parallax Hero Images

"use client";
import { ParallaxHeroImages } from "@/lab/aceternity/ui/parallax-hero-images";

export default function ParallaxHeroImagesDemo() {
  return (
    <div className="@container relative flex h-full w-full items-center justify-center overflow-hidden bg-neutral-50 dark:bg-neutral-950">
      <ParallaxHeroImages images={images} />
      <div className="relative z-10 mx-auto flex max-w-[60%] flex-col items-center gap-[clamp(0.25rem,1.5cqw,1rem)] px-4 text-center">
        <h1 className="text-[clamp(1rem,4.5cqw,3rem)] leading-tight font-bold tracking-tight text-neutral-800 drop-shadow-[0_0_20px_rgba(255,255,255,0.8)] dark:text-neutral-100 dark:drop-shadow-[0_0_20px_rgba(0,0,0,0.8)]">
          State of the art, cutting edge images, everywhere.
        </h1>
        <p className="max-w-md text-[clamp(0.65rem,1.6cqw,1rem)] text-neutral-600 drop-shadow-[0_0_10px_rgba(255,255,255,0.6)] dark:text-neutral-400 dark:drop-shadow-[0_0_10px_rgba(0,0,0,0.6)]">
          Move your mouse to see the parallax effect. Images at different depths move at different speeds.
        </p>
      </div>
    </div>
  );
}

const images = [
  "https://assets.aceternity.com/components/hero-section-with-mesh-gradient.webp",
  "https://assets.aceternity.com/components/3d-globe.webp",
  "https://assets.aceternity.com/components/keyboard-2.webp",
  "https://assets.aceternity.com/components/hero-1.webp",
  "https://assets.aceternity.com/components/hero-2.webp",
  "https://assets.aceternity.com/components/hero-3.webp",
];