"use client"; import React, { useRef, useEffect, useState } from "react"; interface OrbitArc { startOffset: number; length: number; speed: number; color: string; thickness: number; } interface OrbitRing { radius: number; arcs: OrbitArc[]; parallaxFactor: number; } export default function ConcentricOrbitRingsBackground() { 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", { alpha: false }); if (!ctx) return; let animationFrameId: number; let time = 0; let mouseX = -2000; let mouseY = -2000; let targetMouseX = 0; let targetMouseY = 0; let rings: OrbitRing[] = []; const colors = ["#0ea5e9", "#8b5cf6", "#ec4899", "#10b981"]; const initRings = (width: number, height: number) => { rings = []; const maxRadius = Math.max(width, height) * 0.8; const ringSpacing = 45; const numRings = Math.floor(maxRadius / ringSpacing); for (let i = 1; i <= numRings; i++) { const radius = i * ringSpacing; const numArcs = Math.random() > 0.4 ? Math.floor(Math.random() * 3) + 1 : 0; const arcs: OrbitArc[] = []; for (let j = 0; j < numArcs; j++) { arcs.push({ startOffset: Math.random() * Math.PI * 2, length: Math.random() * Math.PI * 0.8 + 0.2, speed: (Math.random() * 0.008 + 0.002) * (Math.random() > 0.5 ? 1 : -1), color: colors[Math.floor(Math.random() * colors.length)], thickness: Math.random() * 1.5 + 1 }); } rings.push({ radius, arcs, parallaxFactor: i * 0.02 }); } }; const resizeCanvas = () => { const { clientWidth, clientHeight } = container; canvas.width = clientWidth; canvas.height = clientHeight; targetMouseX = clientWidth / 2; targetMouseY = clientHeight / 2; mouseX = targetMouseX; mouseY = targetMouseY; initRings(clientWidth, clientHeight); }; const resizeObserver = new ResizeObserver(() => { resizeCanvas(); }); resizeObserver.observe(container); const handleMouseMove = (e: MouseEvent) => { const rect = canvas.getBoundingClientRect(); targetMouseX = e.clientX - rect.left; targetMouseY = e.clientY - rect.top; }; const handleMouseLeave = () => { targetMouseX = canvas.width / 2; targetMouseY = canvas.height / 2; }; canvas.addEventListener("mousemove", handleMouseMove); canvas.addEventListener("mouseleave", handleMouseLeave); const animate = () => { ctx.fillStyle = "#020205"; ctx.fillRect(0, 0, canvas.width, canvas.height); time += 1; mouseX += (targetMouseX - mouseX) * 0.05; mouseY += (targetMouseY - mouseY) * 0.05; const centerX = canvas.width / 2; const centerY = canvas.height / 2; ctx.globalCompositeOperation = "screen"; for (let i = 0; i < rings.length; i++) { const ring = rings[i]; const offsetX = (mouseX - centerX) * ring.parallaxFactor; const offsetY = (mouseY - centerY) * ring.parallaxFactor; ctx.save(); ctx.translate(centerX + offsetX, centerY + offsetY); ctx.beginPath(); ctx.arc(0, 0, ring.radius, 0, Math.PI * 2); ctx.strokeStyle = "rgba(255, 255, 255, 0.03)"; ctx.lineWidth = 1; ctx.stroke(); for (let j = 0; j < ring.arcs.length; j++) { const arc = ring.arcs[j]; const currentAngle = arc.startOffset + time * arc.speed; ctx.beginPath(); ctx.arc(0, 0, ring.radius, currentAngle, currentAngle + arc.length); ctx.strokeStyle = arc.color; ctx.lineWidth = arc.thickness; ctx.lineCap = "round"; ctx.shadowBlur = 15; ctx.shadowColor = arc.color; ctx.stroke(); ctx.shadowBlur = 0; } ctx.restore(); } ctx.globalCompositeOperation = "source-over"; animationFrameId = requestAnimationFrame(animate); }; animate(); return () => { resizeObserver.disconnect(); canvas.removeEventListener("mousemove", handleMouseMove); canvas.removeEventListener("mouseleave", handleMouseLeave); cancelAnimationFrame(animationFrameId); }; }, [mounted]); if (!mounted) return null; return (