Pointer Trail Gallery

"use client";

import { useEffect, useRef, useState, type ReactNode, type RefObject } from "react";
import { AnimatePresence, motion } from "motion/react";

import { cn } from "@/lib/cn";

/* ------------------------------------------------------------------ */
/*  Types                                                              */
/* ------------------------------------------------------------------ */

export interface PointerTrailGalleryProps {
  /** Visuals cycled through the trail (images, cards, any JSX). [Required] */
  items: ReactNode[];
  /** Rendered width of each trail item in px. [Optional, default: 120] */
  itemSize?: number;
  /** Max simultaneous items kept on screen. [Optional, default: 8] */
  trailLength?: number;
  /** Cursor travel in px before the next item spawns. [Optional, default: 80] */
  spawnDistance?: number;
  /** Max random tilt applied to each item in degrees. [Optional, default: 18] */
  rotationRange?: number;
  /** External spawn area. Defaults to the component's own container. [Optional] */
  containerRef?: RefObject<HTMLElement | null>;
  className?: string;
  children?: ReactNode;
}

interface TrailItem {
  id: number;
  x: number;
  y: number;
  rotation: number;
  itemIndex: number;
}

/* ------------------------------------------------------------------ */
/*  PointerTrailGallery                                                   */
/* ------------------------------------------------------------------ */

/**
 * Spawns a trail of images along the pointer path: every `spawnDistance`
 * pixels of travel drops the next item with a random tilt, older items
 * shrink and blur away, and leaving the area clears the trail. Uses
 * pointer events so pen and touch drags leave a trail too, and stays
 * quiet under prefers-reduced-motion.
 * @param {ReactNode[]} items - Visuals cycled through the trail [Required]
 * @param {number} itemSize - Item width in px [Optional, default: 120]
 * @param {number} trailLength - Max items on screen [Optional, default: 8]
 * @param {number} spawnDistance - Travel between spawns [Optional, default: 80]
 * @param {number} rotationRange - Max tilt in degrees [Optional, default: 18]
 */
export function PointerTrailGallery({
  items,
  itemSize = 120,
  trailLength = 8,
  spawnDistance = 80,
  rotationRange = 18,
  containerRef,
  className,
  children,
}: PointerTrailGalleryProps) {
  const [trail, setTrail] = useState<TrailItem[]>([]);
  const lastPos = useRef<{ x: number; y: number } | null>(null);
  const counters = useRef({ id: 0, item: 0 });
  const ownRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const el = containerRef?.current ?? ownRef.current;
    if (!el) return;
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;

    const onLeave = () => {
      lastPos.current = null;
      setTrail([]);
    };

    const onMove = (e: PointerEvent) => {
      const rect = el.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;

      if (lastPos.current) {
        const dist = Math.hypot(x - lastPos.current.x, y - lastPos.current.y);
        if (dist < spawnDistance) return;
      }
      lastPos.current = { x, y };

      const c = counters.current;
      const spawned: TrailItem = {
        id: ++c.id,
        x,
        y,
        rotation: (Math.random() * 2 - 1) * rotationRange,
        itemIndex: c.item++ % items.length,
      };
      setTrail((prev) => [...prev, spawned].slice(-trailLength));
    };

    el.addEventListener("pointermove", onMove);
    el.addEventListener("pointerleave", onLeave);
    return () => {
      el.removeEventListener("pointermove", onMove);
      el.removeEventListener("pointerleave", onLeave);
    };
  }, [items.length, spawnDistance, rotationRange, trailLength, containerRef]);

  const total = trail.length;

  return (
    <div ref={ownRef} className={cn("relative overflow-hidden", className)}>
      {children}

      <AnimatePresence>
        {trail.map((item, i) => {
          const age = total - 1 - i;
          const scale = 0.6 + 0.4 * (1 - age / trailLength);

          return (
            <motion.div
              key={item.id}
              className="pointer-events-none absolute select-none"
              style={{
                left: item.x,
                top: item.y,
                width: itemSize,
                x: "-50%",
                y: "-50%",
                zIndex: i,
              }}
              initial={{ opacity: 0, scale: 0.5, rotate: item.rotation * 1.5 }}
              animate={{ opacity: 1, scale, rotate: item.rotation }}
              exit={{
                opacity: 0,
                scale: 0.3,
                rotate: item.rotation * 0.5,
                filter: "blur(4px)",
              }}
              transition={{ duration: 0.4, ease: [0.23, 1, 0.32, 1] }}
            >
              <div className="w-full [&>img]:h-auto [&>img]:w-full [&>svg]:h-auto [&>svg]:w-full">
                {items[item.itemIndex]}
              </div>
            </motion.div>
          );
        })}
      </AnimatePresence>
    </div>
  );
}