"use client"; import React, { useRef, useEffect, useState } from "react"; interface PlexusNode { x: number; y: number; vx: number; vy: number; radius: number; baseRadius: number; color: string; } export default function InteractiveNeonPlexusBackground() { const containerRef = useRef(null); const canvasRef = useRef(null); const [mounted, setMounted] = useState(false); useEffect(() => { setMounted(true); }, []); useEffect(() => { if (!mounted) return; const container = containerRef.current; const canvas = canvasRef.current; if (!container || !canvas) return; const ctx = canvas.getContext("2d"); if (!ctx) return; let animationFrameId: number; let nodes: PlexusNode[] = []; const nodeCount = 80; const connectionDistance = 140; const mouseRepelRadius = 180; const colors = ["#00f0ff", "#ff0055", "#7000ff"]; let mouseX = -2000; let mouseY = -2000; const initNodes = (width: number, height: number) => { nodes = []; for (let i = 0; i < nodeCount; i++) { const baseRadius = Math.random() * 1.5 + 0.5; nodes.push({ x: Math.random() * width, y: Math.random() * height, vx: (Math.random() - 0.5) * 1.2, vy: (Math.random() - 0.5) * 1.2, radius: baseRadius, baseRadius: baseRadius, color: colors[Math.floor(Math.random() * colors.length)] }); } }; const resizeCanvas = () => { const { clientWidth, clientHeight } = container; canvas.width = clientWidth; canvas.height = clientHeight; initNodes(clientWidth, clientHeight); }; const resizeObserver = new ResizeObserver(() => { resizeCanvas(); }); resizeObserver.observe(container); const handleMouseMove = (e: MouseEvent) => { const rect = canvas.getBoundingClientRect(); mouseX = e.clientX - rect.left; mouseY = e.clientY - rect.top; }; const handleMouseLeave = () => { mouseX = -2000; mouseY = -2000; }; canvas.addEventListener("mousemove", handleMouseMove); canvas.addEventListener("mouseout", handleMouseLeave); const animate = () => { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let i = 0; i < nodes.length; i++) { const node = nodes[i]; node.x += node.vx; node.y += node.vy; if (node.x < 0 || node.x > canvas.width) node.vx *= -1; if (node.y < 0 || node.y > canvas.height) node.vy *= -1; const dxMouse = mouseX - node.x; const dyMouse = mouseY - node.y; const distanceMouse = Math.sqrt(dxMouse * dxMouse + dyMouse * dyMouse); if (distanceMouse < mouseRepelRadius) { const forceDirectionX = dxMouse / distanceMouse; const forceDirectionY = dyMouse / distanceMouse; const force = (mouseRepelRadius - distanceMouse) / mouseRepelRadius; node.x -= forceDirectionX * force * 3; node.y -= forceDirectionY * force * 3; node.radius = node.baseRadius + force * 4; } else { node.radius = node.baseRadius; } for (let j = i + 1; j < nodes.length; j++) { const otherNode = nodes[j]; const dx = node.x - otherNode.x; const dy = node.y - otherNode.y; const distance = Math.sqrt(dx * dx + dy * dy); if (distance < connectionDistance) { ctx.beginPath(); ctx.strokeStyle = node.color; ctx.globalAlpha = 1 - (distance / connectionDistance); ctx.lineWidth = 0.6; ctx.moveTo(node.x, node.y); ctx.lineTo(otherNode.x, otherNode.y); ctx.stroke(); } } ctx.beginPath(); ctx.arc(node.x, node.y, node.radius, 0, Math.PI * 2); ctx.fillStyle = node.color; ctx.globalAlpha = 1; ctx.shadowBlur = 12; ctx.shadowColor = node.color; ctx.fill(); ctx.shadowBlur = 0; } animationFrameId = requestAnimationFrame(animate); }; animate(); return () => { resizeObserver.disconnect(); canvas.removeEventListener("mousemove", handleMouseMove); canvas.removeEventListener("mouseout", handleMouseLeave); cancelAnimationFrame(animationFrameId); }; }, [mounted]); if (!mounted) return null; return (

); }