Parallax Image

Galleries 6

About

Scroll-linked parallax wrapper that shifts images or content vertically on scroll to create a sense of depth.

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

Code

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

Usage.tsx

"use client";

import { ParallaxImage } from "@/components/ui/parallax-image";
import { useRef } from "react";

const IMAGES = [
  {
    src: "https://www.pulkit.page/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fmountain-lake.0rjyk7ectwbfv.webp&w=640&q=75&dpl=dpl_BZkeptmgHcGQhqRVHCUdGFqm6TXA",
    alt: "Mountain lake",
  },
  {
    src: "https://www.pulkit.page/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fforest-path.17xno5kn9lint.webp&w=640&q=75&dpl=dpl_BZkeptmgHcGQhqRVHCUdGFqm6TXA",
    alt: "Forest path",
  },
  {
    src: "https://www.pulkit.page/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fdesert-dunes.1ye7y5b4vv8a4.webp&w=640&q=75&dpl=dpl_BZkeptmgHcGQhqRVHCUdGFqm6TXA",
    alt: "Desert dunes",
  },
  {
    src: "https://www.pulkit.page/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Focean-waves.2xm0rm20y_whm.webp&w=640&q=75&dpl=dpl_BZkeptmgHcGQhqRVHCUdGFqm6TXA",
    alt: "Ocean waves",
  },
  {
    src: "https://www.pulkit.page/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fsnowy-peaks.0ary_8z_biis7.webp&w=640&q=75&dpl=dpl_BZkeptmgHcGQhqRVHCUdGFqm6TXA",
    alt: "Snowy peaks",
  },
  {
    src: "https://www.pulkit.page/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fautumn-valley.11ky9fnsfnra6.webp&w=640&q=75&dpl=dpl_BZkeptmgHcGQhqRVHCUdGFqm6TXA",
    alt: "Autumn valley",
  },
];

export default function ParallaxImageDemo() {
  const containerRef = useRef<HTMLDivElement>(null);

  return (
    <div className="flex w-full items-center justify-center bg-background p-6">
      <div className="w-full max-w-md overflow-hidden rounded-xl border border-border bg-card shadow-sm">
        <div className="flex items-center justify-between border-b border-border px-5 py-4">
          <h3 className="text-lg font-semibold text-foreground">
            Scroll to explore
          </h3>
          <span className="text-sm text-muted-foreground">↓ scroll</span>
        </div>

        <div ref={containerRef} className="h-[430px] overflow-y-auto">
          <div className="grid grid-cols-2 gap-3 p-3">
            {IMAGES.map((img) => (
              <div
                key={img.alt}
                className="overflow-hidden rounded-lg border border-border bg-muted"
              >
                <ParallaxImage
                  className="h-40"
                  intensity={40}
                  containerRef={containerRef}
                >
                  <img
                    src={img.src}
                    alt={img.alt}
                    className="size-full object-cover"
                  />
                </ParallaxImage>
                <div className="px-3 py-2 text-sm text-muted-foreground">
                  {img.alt}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}