Cursor Image Trail

1"use client";
2 
3import * as React from "react";
4import { AnimatePresence, motion } from "motion/react";
5 
6import { cn } from "@/lib/utils";
7 
8export interface CursorImageTrailProps {
9  items: React.ReactNode[];
10  /** Size of each trail item in px. @default 120 */
11  itemSize?: number;
12  /** Max simultaneous items in the trail. @default 8 */
13  trailLength?: number;
14  /** Minimum cursor travel (px) before spawning a new item. @default 80 */
15  spawnDistance?: number;
16  /** Max random rotation applied to each item in degrees. @default 20 */
17  rotationRange?: number;
18  /** Render target — defaults to the whole window. */
19  containerRef?: React.RefObject<HTMLElement>;
20  className?: string;
21  children?: React.ReactNode;
22}
23 
24interface TrailItem {
25  id: number;
26  x: number;
27  y: number;
28  rotation: number;
29  itemIndex: number;
30}
31 
32let _id = 0;
33const nextId = () => ++_id;
34 
35export function CursorImageTrail({
36  items,
37  itemSize = 120,
38  trailLength = 8,
39  spawnDistance = 80,
40  rotationRange = 20,
41  containerRef,
42  className,
43  children,
44}: CursorImageTrailProps) {
45  const [trail, setTrail] = React.useState<TrailItem[]>([]);
46  const lastPos = React.useRef<{ x: number; y: number } | null>(null);
47  const itemCounter = React.useRef(0);
48  const containerElRef = React.useRef<HTMLDivElement>(null);
49 
50  React.useEffect(() => {
51    const el = containerRef?.current ?? containerElRef.current ?? window;
52 
53    const onLeave = () => setTrail([]);
54 
55    const onMove = (e: Event) => {
56      const mouseEvent = e as MouseEvent;
57      const rect =
58        containerRef?.current?.getBoundingClientRect() ??
59        containerElRef.current?.getBoundingClientRect();
60 
61      const x = rect ? mouseEvent.clientX - rect.left : mouseEvent.clientX;
62      const y = rect ? mouseEvent.clientY - rect.top : mouseEvent.clientY;
63 
64      if (lastPos.current) {
65        const dx = x - lastPos.current.x;
66        const dy = y - lastPos.current.y;
67        const dist = Math.sqrt(dx * dx + dy * dy);
68        if (dist < spawnDistance) return;
69      }
70 
71      lastPos.current = { x, y };
72 
73      const rotation = (Math.random() * 2 - 1) * rotationRange;
74      const itemIndex = itemCounter.current % items.length;
75      itemCounter.current += 1;
76 
77      setTrail((prev) => {
78        const next = [...prev, { id: nextId(), x, y, rotation, itemIndex }];
79        return next.slice(-trailLength);
80      });
81    };
82 
83    el.addEventListener("mousemove", onMove);
84    el.addEventListener("mouseleave", onLeave);
85    return () => {
86// … truncated