fix: restore cursor trail fragment import

package.json

@@ -19,6 +19,7 @@
     "dotenv": "^16.4.7",
     "express": "^4.21.2",
     "express-rate-limit": "^8.1.0",
+    "framer-motion": "^12.23.24",
     "langchain": "^0.3.13",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

src/components/CursorTrail.tsx

@@ -0,0 +1,275 @@
+import React, {
+  CSSProperties,
+  FC,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+interface CursorTrailProps {
+  images: string[];
+  children: ReactNode;
+  className?: string;
+  spawnInterval?: number;
+  maxItems?: number;
+  fadeDuration?: number;
+}
+
+interface TrailItem {
+  id: number;
+  x: number;
+  y: number;
+  image: string;
+  createdAt: number;
+  size: number;
+  rotation: number;
+}
+
+type TrailStyle = CSSProperties & {
+  '--cursor-trail-rotate'?: string;
+  '--cursor-trail-duration'?: string;
+};
+
+type RevealStyle = CSSProperties & {
+  '--cursor-trail-duration'?: string;
+};
+
+type VeilStyle = CSSProperties & {
+  '--cursor-trail-veil-opacity'?: string;
+};
+
+const DEFAULT_SPAWN_INTERVAL = 70;
+const DEFAULT_MAX_ITEMS = 28;
+const DEFAULT_FADE_DURATION = 900;
+
+const CursorTrail: FC<CursorTrailProps> = ({
+  images,
+  children,
+  className,
+  spawnInterval = DEFAULT_SPAWN_INTERVAL,
+  maxItems = DEFAULT_MAX_ITEMS,
+  fadeDuration = DEFAULT_FADE_DURATION,
+}) => {
+  const [items, setItems] = useState<TrailItem[]>([]);
+  const lastSpawnRef = useRef(0);
+  const idRef = useRef(0);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const isInsideRef = useRef(false);
+  const rectRef = useRef<DOMRect | null>(null);
+  const rafRef = useRef<number>();
+
+  const chosenImages = useMemo(() => images.filter(Boolean), [images]);
+  const hasImages = chosenImages.length > 0;
+
+  useEffect(() => {
+    if (!hasImages) {
+      return undefined;
+    }
+
+    const prune = () => {
+      const now = performance.now();
+      setItems((current) => {
+        const filtered = current.filter((item) => now - item.createdAt < fadeDuration);
+        if (filtered.length > 0) {
+          rafRef.current = window.requestAnimationFrame(prune);
+        } else {
+          rafRef.current = undefined;
+        }
+        return filtered;
+      });
+    };
+
+    if (items.length > 0 && rafRef.current === undefined) {
+      rafRef.current = window.requestAnimationFrame(prune);
+    }
+
+    return () => {
+      if (rafRef.current !== undefined) {
+        window.cancelAnimationFrame(rafRef.current);
+        rafRef.current = undefined;
+      }
+    };
+  }, [fadeDuration, hasImages, items.length]);
+
+  const updateRect = useCallback(() => {
+    const node = containerRef.current;
+    if (!node) {
+      rectRef.current = null;
+      return;
+    }
+
+    rectRef.current = node.getBoundingClientRect();
+  }, []);
+
+  useEffect(() => {
+    if (!hasImages) {
+      return undefined;
+    }
+
+    updateRect();
+
+    const handleResize = () => updateRect();
+    window.addEventListener('resize', handleResize);
+    window.addEventListener('scroll', handleResize, true);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      window.removeEventListener('scroll', handleResize, true);
+    };
+  }, [hasImages, updateRect]);
+
+  const spawnItem = useCallback(
+    (clientX: number, clientY: number) => {
+      if (!hasImages) {
+        return;
+      }
+
+      const now = performance.now();
+      if (now - lastSpawnRef.current < spawnInterval) {
+        return;
+      }
+
+      const rect = rectRef.current ?? containerRef.current?.getBoundingClientRect();
+      if (!rect) {
+        return;
+      }
+
+      if (
+        clientX < rect.left ||
+        clientX > rect.right ||
+        clientY < rect.top ||
+        clientY > rect.bottom
+      ) {
+        return;
+      }
+
+      lastSpawnRef.current = now;
+
+      const x = clientX - rect.left;
+      const y = clientY - rect.top;
+
+      const image = chosenImages[Math.floor(Math.random() * chosenImages.length)];
+      const size = 36 + Math.random() * 32;
+      const rotation = -22 + Math.random() * 44;
+
+      setItems((current) => {
+        const filtered = current.filter((item) => now - item.createdAt < fadeDuration);
+        const nextItems = [
+          ...filtered,
+          {
+            id: idRef.current++,
+            x,
+            y,
+            image,
+            createdAt: now,
+            size,
+            rotation,
+          },
+        ];
+
+        if (nextItems.length > maxItems) {
+          return nextItems.slice(nextItems.length - maxItems);
+        }
+
+        return nextItems;
+      });
+    },
+    [chosenImages, fadeDuration, hasImages, maxItems, spawnInterval],
+  );
+
+  const handlePointerEnter = useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      isInsideRef.current = true;
+      updateRect();
+      spawnItem(event.clientX, event.clientY);
+    },
+    [spawnItem, updateRect],
+  );
+
+  const handlePointerLeave = useCallback(() => {
+    isInsideRef.current = false;
+    setItems([]);
+    if (rafRef.current !== undefined) {
+      window.cancelAnimationFrame(rafRef.current);
+      rafRef.current = undefined;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!hasImages) {
+      return undefined;
+    }
+
+    const handleWindowPointerMove = (event: PointerEvent) => {
+      if (!isInsideRef.current) {
+        return;
+      }
+
+      spawnItem(event.clientX, event.clientY);
+    };
+
+    window.addEventListener('pointermove', handleWindowPointerMove, { passive: true });
+
+    return () => {
+      window.removeEventListener('pointermove', handleWindowPointerMove);
+    };
+  }, [hasImages, spawnItem]);
+
+  const outerClassName = ['relative block isolate', className].filter(Boolean).join(' ');
+  const veilOpacity = items.length > 0 ? '0.56' : '0.26';
+  const veilStyle: VeilStyle = {
+    '--cursor-trail-veil-opacity': veilOpacity,
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      className={outerClassName}
+      onPointerEnter={handlePointerEnter}
+      onPointerLeave={handlePointerLeave}
+    >
+      <div className="relative z-[1]">{children}</div>
+      <div className="pointer-events-none absolute inset-0 z-[2] overflow-visible">
+        <div className="cursor-trail-veil" aria-hidden="true" style={veilStyle} />
+        {items.map((item) => {
+          const commonDuration = `${fadeDuration}ms`;
+          const revealStyle: RevealStyle = {
+            left: item.x,
+            top: item.y,
+            width: item.size * 1.85,
+            height: item.size * 1.85,
+            '--cursor-trail-duration': commonDuration,
+          };
+
+          const style: TrailStyle = {
+            left: item.x,
+            top: item.y,
+            width: item.size,
+            height: item.size,
+            position: 'absolute',
+            '--cursor-trail-rotate': `${item.rotation}deg`,
+            '--cursor-trail-duration': commonDuration,
+          };
+
+          return (
+            <React.Fragment key={item.id}>
+              <div className="cursor-trail-reveal" style={revealStyle} />
+              <img
+                src={item.image}
+                alt=""
+                aria-hidden="true"
+                className="cursor-trail-item select-none"
+                style={style}
+              />
+            </React.Fragment>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default CursorTrail;