Horizontal Depth Fade

"use client";

import { HorizontalDepthFade } from "@/components/ui/horizontal-depth-fade";
import { useMemo, useRef } from "react";

export default function HorizontalDepthFadeDemo() {
  const scrollContainerRef = useRef<HTMLDivElement>(null);

  const images = useMemo(
    () =>
      Array.from({ length: 12 }, (_, i) => ({
        src: `https://picsum.photos/seed/hbs${i + 1}/540/690`,
        alt: `Demo image ${i + 1}`,
      })),
    [],
  );

  return (
    <div
      ref={scrollContainerRef}
      className="relative h-screen w-full overflow-y-auto bg-background"
    >
      <HorizontalDepthFade
        images={images}
        scrollContainerRef={scrollContainerRef}
        brightnessBoost={55}
        focusSpread={0.14}
        scaleEffect={0.11}
        scrollLength={360}
      />
    </div>
  );
}