"use client"; import React, { useRef, useEffect, CSSProperties } from "react"; interface CursorTrailProps { children?: React.ReactNode; className?: string; style?: CSSProperties; color?: string; size?: number; trailLength?: number; } interface TrailPoint { x: number; y: number; } export function CursorTrail({ children, className, style, color = "#18B5FF", size = 12, trailLength = 25, }: CursorTrailProps) { const containerRef = useRef(null); const canvasRef = useRef(null); const trailRef = useRef([]); const animFrameRef = useRef(0); const activeRef = useRef(false); useEffect(() => { const container = containerRef.current; const canvas = canvasRef.current; if (!container || !canvas) return; const ctx = canvas.getContext("2d"); if (!ctx) return; const resize = () => { canvas.width = container.offsetWidth; canvas.height = container.offsetHeight; }; resize(); const ro = new ResizeObserver(resize); ro.observe(container); const onMouseMove = (e: MouseEvent) => { const rect = container.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; trailRef.current.unshift({ x, y }); if (trailRef.current.length > trailLength) { trailRef.current.length = trailLength; } if (!activeRef.current) { activeRef.current = true; animFrameRef.current = requestAnimationFrame(draw); } }; const onMouseLeave = () => { activeRef.current = false; }; container.addEventListener("mousemove", onMouseMove); container.addEventListener("mouseleave", onMouseLeave); const draw = () => { ctx.clearRect(0, 0, canvas.width, canvas.height); const points = trailRef.current; if (points.length < 2) { if (activeRef.current) animFrameRef.current = requestAnimationFrame(draw); return; } // Draw connected trail line ctx.beginPath(); ctx.moveTo(points[0].x, points[0].y); for (let i = 1; i < points.length; i++) { ctx.lineTo(points[i].x, points[i].y); } ctx.strokeStyle = color; ctx.lineWidth = 1.5; ctx.globalAlpha = 0.25; ctx.stroke(); ctx.globalAlpha = 1; // Draw circles oldest→newest (index len-1 → 0) for (let i = points.length - 1; i >= 0; i--) { const t = i / (points.length - 1); // 1 = oldest, 0 = newest const radius = size * (1 - t); const alpha = 1 - t; if (radius <= 0) continue; ctx.beginPath(); ctx.arc(points[i].x, points[i].y, radius, 0, Math.PI * 2); ctx.fillStyle = color; ctx.globalAlpha = alpha * 0.85; ctx.fill(); } ctx.globalAlpha = 1; if (activeRef.current) { animFrameRef.current = requestAnimationFrame(draw); } else { // Fade out by clearing ctx.clearRect(0, 0, canvas.width, canvas.height); trailRef.current = []; } }; return () => { cancelAnimationFrame(animFrameRef.current); container.removeEventListener("mousemove", onMouseMove); container.removeEventListener("mouseleave", onMouseLeave); ro.disconnect(); }; }, [color, size, trailLength]); return (

); } export default CursorTrail;

Cursor Trail