Pixel Trail

1"use client"
2 
3import React, { useCallback, useMemo, useRef } from "react"
4import { motion, useAnimationControls } from "motion/react"
5import { v4 as uuidv4 } from "uuid"
6 
7import { cn } from "@/lib/utils"
8import { useDimensions } from "@/hooks/use-dimensions"
9 
10interface PixelTrailProps {
11  pixelSize: number // px
12  fadeDuration?: number // ms
13  delay?: number // ms
14  className?: string
15  pixelClassName?: string
16}
17 
18const PixelTrail: React.FC<PixelTrailProps> = ({
19  pixelSize = 20,
20  fadeDuration = 500,
21  delay = 0,
22  className,
23  pixelClassName,
24}) => {
25  const containerRef = useRef<HTMLDivElement>(null)
26  const dimensions = useDimensions(containerRef)
27  const trailId = useRef(uuidv4())
28 
29  const handleMouseMove = useCallback(
30    (e: React.MouseEvent<HTMLDivElement>) => {
31      if (!containerRef.current) return
32 
33      const rect = containerRef.current.getBoundingClientRect()
34      const x = Math.floor((e.clientX - rect.left) / pixelSize)
35      const y = Math.floor((e.clientY - rect.top) / pixelSize)
36 
37      const pixelElement = document.getElementById(
38        `${trailId.current}-pixel-${x}-${y}`
39      )
40      if (pixelElement) {
41        const animatePixel = (pixelElement as any).__animatePixel
42        if (animatePixel) animatePixel()
43      }
44    },
45    [pixelSize]
46  )
47 
48  const columns = useMemo(
49    () => Math.ceil(dimensions.width / pixelSize),
50    [dimensions.width, pixelSize]
51  )
52  const rows = useMemo(
53    () => Math.ceil(dimensions.height / pixelSize),
54    [dimensions.height, pixelSize]
55  )
56 
57  return (
58    <div
59      ref={containerRef}
60      className={cn(
61        "absolute inset-0 w-full h-full pointer-events-auto",
62        className
63      )}
64      onMouseMove={handleMouseMove}
65    >
66      {Array.from({ length: rows }).map((_, rowIndex) => (
67        <div key={rowIndex} className="flex">
68          {Array.from({ length: columns }).map((_, colIndex) => (
69            <PixelDot
70              key={`${colIndex}-${rowIndex}`}
71              id={`${trailId.current}-pixel-${colIndex}-${rowIndex}`}
72              size={pixelSize}
73              fadeDuration={fadeDuration}
74              delay={delay}
75              className={pixelClassName}
76            />
77          ))}
78        </div>
79      ))}
80    </div>
81  )
82}
83 
84export default PixelTrail
85 
86interface PixelDotProps {
87  id: string
88  size: number
89  fadeDuration: number
90  delay: number
91  className?: string
92}
93 
94const PixelDot: React.FC<PixelDotProps> = React.memo(
95  ({ id, size, fadeDuration, delay, className }) => {
96// … truncated