Pixelated Image Trail

"use client";

import { useEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";
import { cn } from "@/lib/utils";

interface TrailConfig {
  imageLifespan: number;
  inDuration: number;
  outDuration: number;
  staggerIn: number;
  staggerOut: number;
  slideDuration: number;
  slideEasing: string;
  easing: string;
}

export interface PixelatedImageTrailProps {
  className?: string;
  images?: string[];
  config?: Partial<TrailConfig>;
  slices?: number;
  spawnThreshold?: number;
  smoothing?: number;
}

export function PixelatedImageTrail({
  className,
  images = [],
  config: configOverride = {},
  slices = 4,
  spawnThreshold = 100,
  smoothing = 0.1,
}: PixelatedImageTrailProps) {
  const [mounted, setMounted] = useState(false);
  const trailContainerRef = useRef<HTMLDivElement>(null);
  const currentImageIndexRef = useRef(0);
  const mousePosRef = useRef({ x: 0, y: 0 });
  const lastMousePosRef = useRef({ x: 0, y: 0 });
  const interpolatedMousePosRef = useRef({ x: 0, y: 0 });
  const animationFrameRef = useRef<number | null>(null);

  useEffect(() => {
      setMounted(true);
  }, []);

  useEffect(() => {
      if (!mounted) return;

      const defaultConfig: TrailConfig = {
          imageLifespan: 400,
          inDuration: 150,
          outDuration: 300,
          staggerIn: 6,
          staggerOut: 4,
          slideDuration: 900,
          slideEasing: "cubic-bezier(0.16, 1, 0.3, 1)",
          easing: "cubic-bezier(0.16, 1, 0.3, 1)",
      };

      const config = { ...defaultConfig, ...configOverride };
      const trailImageCount = 5;
      const finalImages = images.length > 0 ? images : Array.from(
          { length: trailImageCount },
          (_, i) => `/trail-images/image${i + 1}.jpg`
      );

      // Preload images for instant display
      finalImages.forEach(src => {
          const img = new Image();
          img.src = src;
      });

      const trailContainer = trailContainerRef.current;
      if (!trailContainer) return;

      const MathUtils = {
          lerp: (a: number, b: number, n: number) => (1 - n) * a + n * b,
          distance: (x1: number, y1: number, x2: number, y2: number) =>
              Math.hypot(x2 - x1, y2 - y1),
      };

      const getMouseDistance = () =>
          MathUtils.distance(
              interpolatedMousePosRef.current.x,
              interpolatedMousePosRef.current.y,
              lastMousePosRef.current.x,
              lastMousePosRef.current.y
          );

      const createTrailImage = () => {
          const imgContainer = document.createElement("div");
          imgContainer.classList.add("pixelated-trail-img");

          const imgSrc = finalImages[currentImageIndexRef.current];
          currentImageIndexRef.current =
              (currentImageIndexRef.current + 1) % finalImages.length;

          const rect = trailContainer.getBoundingClientRect();
          const startX = interpolatedMousePosRef.current.x - rect.left - 87.5;
          const startY = interpolatedMousePosRef.current.y - rect.top - 87.5;

          const dx = mousePosRef.current.x - interpolatedMousePosRef.current.x;
          const dy = mousePosRef.current.y - interpolatedMousePosRef.current.y;

          const targetX = startX + dx * 0.5;
          const targetY = startY + dy * 0.5;

          const rotation = Math.random() * 12 - 6;
          imgContainer.style.transform = `rotate(${rotation}deg) translate3d(0, 0, 0)`;
          imgContainer.style.left = `${startX}px`;
          imgContainer.style.top = `${startY}px`;
          imgContainer.style.transition = `left ${config.slideDuration}ms ${config.slideEasing}, top ${config.slideDuration}ms ${config.slideEasing}, opacity 200ms ease-out`;

          const maskLayers: HTMLDivElement[] = [];

          for (let i = 0; i < slices; i++) {
              const layer = document.createElement("div");
              layer.classList.add("pixelated-mask-layer");

              const imageLayer = document.createElement("div");
              imageLayer.classList.add("pixelated-image-layer");
              imageLayer.style.backgroundImage = `url(${imgSrc})`;

              const sliceSize = 100 / slices;
              const startClipY = i * sliceSize;
              const endClipY = (i + 1) * sliceSize;

              layer.style.clipPath = `polygon(50% ${startClipY}%, 50% ${startClipY}%, 50% ${endClipY}%, 50% ${endClipY}%)`;
              layer.style.transition = `clip-path ${config.inDuration}ms ${config.easing}`;
              layer.style.transform = "translate3d(0, 0, 0)";
              layer.style.backfaceVisibility = "hidden";

              layer.appendChild(imageLayer);
              imgContainer.appendChild(layer);
              maskLayers.push(layer);
          }

          trailContainer.appendChild(imgContainer);

          requestAnimationFrame(() => {
              imgContainer.style.left = `${targetX}px`;
              imgContainer.style.top = `${targetY}px`;

              maskLayers.forEach((layer, i) => {
                  const sliceSize = 100 / slices;
                  const startClipY = i * sliceSize;
                  const endClipY = (i + 1) * sliceSize;
                  const distanceFromMiddle = Math.abs(i - (slices - 1) / 2);
                  const delay = distanceFromMiddle * config.staggerIn;

                  setTimeout(() => {
                      layer.style.clipPath = `polygon(0% ${startClipY}%, 100% ${startClipY}%, 100% ${endClipY}%, 0% ${endClipY}%)`;
                  }, delay);
              });
          });

          setTimeout(() => {
              if (config.outDuration > 0) {
                  maskLayers.forEach((layer, i) => {
                      const distanceFromMiddle = Math.abs(i - (slices - 1) / 2);
                      const delay = distanceFromMiddle * config.staggerOut;
                      setTimeout(() => {
                          const sliceSize = 100 / slices;
                          const startClipY = i * sliceSize;
                          const endClipY = (i + 1) * sliceSize;
                          layer.style.clipPath = `polygon(50% ${startClipY}%, 50% ${startClipY}%, 50% ${endClipY}%, 50% ${endClipY}%)`;
                      }, delay);
                  });

                  setTimeout(() => {
                      if (imgContainer.parentElement === trailContainer) {
                          trailContainer.removeChild(imgContainer);
                      }
                  }, config.outDuration + (slices * config.staggerOut) + 100);
              } else {
                  if (imgContainer.parentElement === trailContainer) {
                      trailContainer.removeChild(imgContainer);
                  }
              }
          }, config.imageLifespan);
      };

      const handleMouseMove = (e: MouseEvent) => {
          mousePosRef.current = { x: e.clientX, y: e.clientY };
      };

      const render = () => {
          interpolatedMousePosRef.current.x = MathUtils.lerp(
              interpolatedMousePosRef.current.x,
              mousePosRef.current.x,
              smoothing
          );
          interpolatedMousePosRef.current.y = MathUtils.lerp(
              interpolatedMousePosRef.current.y,
              mousePosRef.current.y,
              smoothing
          );

          if (getMouseDistance() > spawnThreshold) {
              lastMousePosRef.current = { ...interpolatedMousePosRef.current };
              createTrailImage();
          }

          animationFrameRef.current = requestAnimationFrame(render);
      };

      window.addEventListener("mousemove", handleMouseMove);
      animationFrameRef.current = requestAnimationFrame(render);

      const initMouse = (e: MouseEvent) => {
          mousePosRef.current = { x: e.clientX, y: e.clientY };
          interpolatedMousePosRef.current = { x: e.clientX, y: e.clientY };
          lastMousePosRef.current = { x: e.clientX, y: e.clientY };
          window.removeEventListener("mousemove", initMouse);
      }
      window.addEventListener("mousemove", initMouse, { once: true });

      return () => {
          window.removeEventListener("mousemove", handleMouseMove);
          if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current);
      };
  }, [mounted, configOverride, slices, spawnThreshold, smoothing, JSON.stringify(images)]);

  if (!mounted) return null;

  return createPortal(
      <div className={cn("pixelated-trail-container", className)} ref={trailContainerRef}></div>,
      document.body
  );
}

export default PixelatedImageTrail;