Parallax Image Setup

"use client";

import { useEffect, useRef } from "react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

interface ParallaxImageProps {
  src: string;
  alt: string;
  speed?: number;
}

export default function ParallaxImage({ src, alt, speed = 0.5 }: ParallaxImageProps) {
  const containerRef = useRef<color: #79c0ff;">style="color: #ff7b72;">HTMLDivElement>(null);
  const imageRef = useRef<color: #79c0ff;">style="color: #ff7b72;">HTMLImageElement>(null);

  useEffect(() => {
    gsap.to(imageRef.current, {
      yPercent: -20 * speed,
      ease: "none",
      scrollTrigger: {
        trigger: containerRef.current,
        start: "top bottom",
        end: "bottom top",
        scrub: true,
      },
    });
  }, [speed]);

  return (
    <color: #79c0ff;">style="color: #ff7b72;">div color: #79c0ff;">ref={containerRef} color: #79c0ff;">className="overflow-hidden rounded-xl">
      <color: #79c0ff;">style="color: #ff7b72;">img color: #79c0ff;">ref={imageRef} color: #79c0ff;">src={src} color: #79c0ff;">alt={alt} color: #79c0ff;">className="w-full h-full object-cover scale-125" />
    </color: #79c0ff;">style="color: #ff7b72;">div>
  );
}