'use client'; import { useEffect, useRef } from 'react'; export interface ParticleNetworkProps { particleCount?: number; connectionDistance?: number; speed?: number; color?: string; } export function ParticleNetwork(props: ParticleNetworkProps) { const { particleCount = 50, connectionDistance = 100, speed = 1.0, color = '#37352f' } = props; const propsRef = useRef(props); useEffect(() => { propsRef.current = { particleCount, connectionDistance, speed, color }; }, [particleCount, connectionDistance, speed, color]); const canvasRef = useRef(null); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d'); if (!ctx) return; let animationId: number; let particles: { x: number, y: number, vx: number, vy: number }[] = []; const resize = () => { const parent = canvas.parentElement; if (parent) { const dpr = window.devicePixelRatio || 1; canvas.width = parent.clientWidth * dpr; canvas.height = parent.clientHeight * dpr; canvas.style.width = `${parent.clientWidth}px`; canvas.style.height = `${parent.clientHeight}px`; ctx.scale(dpr, dpr); initParticles(); } }; const initParticles = () => { const { particleCount = 50 } = propsRef.current; const width = canvas.width / (window.devicePixelRatio || 1); const height = canvas.height / (window.devicePixelRatio || 1); particles = []; for (let i = 0; i < particleCount; i++) { particles.push({ x: Math.random() * width, y: Math.random() * height, vx: (Math.random() - 0.5) * 1, vy: (Math.random() - 0.5) * 1 }); } }; const render = () => { const { particleCount = 50, connectionDistance = 100, speed = 1.0, color = '#37352f' } = propsRef.current; const width = canvas.width / (window.devicePixelRatio || 1); const height = canvas.height / (window.devicePixelRatio || 1); // Re-init check if (particles.length !== particleCount) { if (particles.length < particleCount) { for (let i = 0; i < particleCount - particles.length; i++) { particles.push({ x: Math.random() * width, y: Math.random() * height, vx: (Math.random() - 0.5) * 1, vy: (Math.random() - 0.5) * 1 }); } } else { particles = particles.slice(0, particleCount); } } ctx.clearRect(0, 0, width, height); ctx.fillStyle = color; ctx.strokeStyle = color; // Update and draw particles for (let i = 0; i < particles.length; i++) { const p = particles[i]; p.x += p.vx * speed; p.y += p.vy * speed; // Bounce if (p.x < 0 || p.x > width) p.vx *= -1; if (p.y < 0 || p.y > height) p.vy *= -1; ctx.beginPath(); ctx.arc(p.x, p.y, 2, 0, Math.PI * 2); ctx.fill(); // Connect for (let j = i + 1; j < particles.length; j++) { const p2 = particles[j]; const dx = p.x - p2.x; const dy = p.y - p2.y; const dist = Math.sqrt(dx * dx + dy * dy); if (dist < connectionDistance) { ctx.globalAlpha = 1 - (dist / connectionDistance); ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.lineTo(p2.x, p2.y); ctx.stroke(); ctx.globalAlpha = 1; } } } animationId = requestAnimationFrame(render); }; window.addEventListener('resize', resize); resize(); render(); return () => { window.removeEventListener('resize', resize); cancelAnimationFrame(animationId); }; }, []); return (

Particle Network