Image Trail

1"use client"
2 
3import React, { useEffect, useRef } from "react"
4import { Expo, gsap, Power1, Quint } from "gsap"
5 
6interface ImageTrailProps {
7    images: string[]
8    imageWidth?: number
9    imageHeight?: number
10    threshold?: number
11    duration?: number
12}
13 
14export function ImageTrail({
15    images = [],
16    imageWidth = 200,
17    imageHeight = 200,
18    threshold = 50,
19    duration = 1.6,
20}: ImageTrailProps) {
21    const contentRef = useRef<HTMLDivElement | null>(null)
22    const imagesRef = useRef<HTMLImageElement[]>([])
23    const mousePos = useRef({ x: 0, y: 0 })
24    const cacheMousePos = useRef({ x: 0, y: 0 })
25    const lastMousePos = useRef({ x: 0, y: 0 })
26    const zIndexVal = useRef(1)
27    const imgPosition = useRef(0)
28    const parentSize = useRef({ width: 0, height: 0 })
29 
30    useEffect(() => {
31        if (contentRef.current) {
32            imagesRef.current = Array.from(contentRef.current.querySelectorAll("img"))
33        }
34 
35        const handleMouseMove = (e: MouseEvent) => {
36            const rect = contentRef.current?.getBoundingClientRect()
37            if (rect) {
38                mousePos.current = {
39                    x: e.clientX - rect.left,
40                    y: e.clientY - rect.top,
41                }
42            }
43        }
44 
45        calcParentSize()
46        if (imagesRef.current.length === 0) {
47            return
48        }
49 
50        window.addEventListener("mousemove", handleMouseMove)
51        window.addEventListener("resize", calcParentSize)
52 
53        requestAnimationFrame(renderImages)
54 
55        return () => {
56            window.removeEventListener("mousemove", handleMouseMove)
57            window.removeEventListener("resize", calcParentSize)
58        }
59        // eslint-disable-next-line react-hooks/exhaustive-deps
60    }, [])
61 
62    const calcParentSize = () => {
63        const rect = contentRef.current?.getBoundingClientRect()
64        if (rect) {
65            parentSize.current = { width: rect.width, height: rect.height }
66        }
67    }
68 
69    const lerp = (a: number, b: number, n: number) => (1 - n) * a + n * b
70 
71    const getMouseDistance = () => {
72        const dx = mousePos.current.x - lastMousePos.current.x
73        const dy = mousePos.current.y - lastMousePos.current.y
74        return Math.hypot(dx, dy)
75    }
76 
77    const renderImages = () => {
78        const distance = getMouseDistance()
79 
80        cacheMousePos.current.x = lerp(
81            cacheMousePos.current.x,
82            mousePos.current.x,
83            0.1
84        )
85// … truncated