"use client"; import React, { useRef, useEffect, CSSProperties } from "react"; interface VortexBackgroundProps { children?: React.ReactNode; className?: string; style?: CSSProperties; } interface Particle { angle: number; radius: number; speed: number; size: number; hueOffset: number; } const PARTICLE_COUNT = 700; const MAX_RADIUS = 600; function createParticle(maxRadius: number): Particle { return { angle: Math.random() * Math.PI * 2, radius: Math.random() * maxRadius, speed: 0.003 + Math.random() * 0.007, size: 0.5 + Math.random() * 2, hueOffset: Math.random() * 360, }; } export function VortexBackground({ children, className, style }: VortexBackgroundProps) { const canvasRef = useRef(null); const particlesRef = useRef([]); const animFrameRef = useRef(0); const hueRef = useRef(0); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext("2d"); if (!ctx) return; const initParticles = (maxRadius: number) => { particlesRef.current = Array.from({ length: PARTICLE_COUNT }, () => createParticle(maxRadius) ); }; const resize = () => { canvas.width = canvas.offsetWidth; canvas.height = canvas.offsetHeight; const maxRadius = Math.sqrt(canvas.width ** 2 + canvas.height ** 2) / 2; initParticles(maxRadius); }; resize(); const ro = new ResizeObserver(resize); ro.observe(canvas); const draw = () => { const w = canvas.width; const h = canvas.height; const cx = w / 2; const cy = h / 2; const maxRadius = Math.sqrt(w ** 2 + h ** 2) / 2; ctx.fillStyle = "rgba(0,0,0,0.04)"; ctx.fillRect(0, 0, w, h); hueRef.current = (hueRef.current + 0.3) % 360; for (const p of particlesRef.current) { p.angle += p.speed; p.radius -= 0.4 + p.speed * 10; if (p.radius < 1) { p.angle = Math.random() * Math.PI * 2; p.radius = maxRadius * (0.5 + Math.random() * 0.5); } const x = cx + Math.cos(p.angle) * p.radius; const y = cy + Math.sin(p.angle) * p.radius; const hue = (hueRef.current + p.hueOffset) % 360; const alpha = Math.min(1, p.radius / (maxRadius * 0.3)); ctx.beginPath(); ctx.arc(x, y, p.size, 0, Math.PI * 2); ctx.fillStyle = `hsla(${hue}, 100%, 65%, ${alpha})`; ctx.fill(); } animFrameRef.current = requestAnimationFrame(draw); }; // Paint initial background ctx.fillStyle = "#050508"; ctx.fillRect(0, 0, canvas.width, canvas.height); animFrameRef.current = requestAnimationFrame(draw); return () => { cancelAnimationFrame(animFrameRef.current); ro.disconnect(); }; }, []); return (

); } export default VortexBackground;

Vortex Background