Please add an advanced interactive cursor trail and "wind flow" effect to my React project. 1. Create a new file called CursorTrail.tsx (or .jsx) and paste this exact code: import { useEffect, useRef } from 'react'; import { useLocation } from 'react-router-dom'; export default function CursorTrail() { const canvasRef = useRef<HTMLCanvasElement>(null); const location = useLocation(); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d'); if (!ctx) return; let width = window.innerWidth; let height = window.innerHeight; canvas.width = width; canvas.height = height; let particles: any[] = []; let ripples: any[] = []; let mouse = { x: width / 2, y: height / 2, vx: 0, vy: 0 }; let lastMouse = { x: width / 2, y: height / 2 }; let isMobile = width < 768; const handleResize = () => { width = window.innerWidth; height = window.innerHeight; canvas.width = width; canvas.height = height; isMobile = width < 768; }; window.addEventListener('resize', handleResize); const handleMouseMove = (e: MouseEvent) => { lastMouse.x = mouse.x; lastMouse.y = mouse.y; mouse.x = e.clientX; mouse.y = e.clientY; mouse.vx = mouse.x - lastMouse.x; mouse.vy = mouse.y - lastMouse.y; }; window.addEventListener('mousemove', handleMouseMove); const handleClick = (e: MouseEvent) => { if (isMobile) return; ripples.push(new Ripple(e.clientX, e.clientY, location.pathname === '/' && window.scrollY < window.innerHeight)); }; window.addEventListener('click', handleClick); class Ripple { x: number; y: number; radius: number; maxRadius: number; life: number; maxLife: number; isHero: boolean; constructor(x: number, y: number, isHero: boolean) { this.x = x; this.y = y; this.radius = 0; this.maxRadius = 60; this.life = 1; this.maxLife = 1; this.isHero = isHero; } update() { this.radius += (this.maxRadius - this.radius) * 0.1; this.life -= 0.03; } draw(ctx: CanvasRenderingContext2D) { ctx.beginPath();