Spaces:
Running
Running
File size: 2,782 Bytes
ee7d7b9 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | import React, { useEffect, useRef } from 'react';
import { useUserStore } from '@/store/userStore';
interface Particle {
x: number;
y: number;
vx: number;
vy: number;
radius: number;
}
export const ParticleNetwork: React.FC = () => {
const canvasRef = useRef<HTMLCanvasElement>(null);
const { isDark } = useUserStore();
useEffect(() => {
const canvas = canvasRef.current;
if (!canvas) return;
const ctx = canvas.getContext('2d');
if (!ctx) return;
let particles: Particle[] = [];
let animationFrameId: number;
const resize = () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
initParticles();
};
const initParticles = () => {
particles = [];
const numParticles = Math.floor((canvas.width * canvas.height) / 15000);
for (let i = 0; i < numParticles; i++) {
particles.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
vx: (Math.random() - 0.5) * 0.5,
vy: (Math.random() - 0.5) * 0.5,
radius: Math.random() * 1.5 + 0.5,
});
}
};
const draw = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
const color = isDark ? 'rgba(255, 255, 255,' : 'rgba(0, 0, 0,';
// Update positions
particles.forEach((p) => {
p.x += p.vx;
p.y += p.vy;
if (p.x < 0 || p.x > canvas.width) p.vx *= -1;
if (p.y < 0 || p.y > canvas.height) p.vy *= -1;
});
// Draw connections
for (let i = 0; i < particles.length; i++) {
for (let j = i + 1; j < particles.length; j++) {
const dx = particles[i].x - particles[j].x;
const dy = particles[i].y - particles[j].y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 120) {
ctx.beginPath();
ctx.strokeStyle = `${color} ${1 - distance / 120})`;
ctx.lineWidth = 0.5;
ctx.moveTo(particles[i].x, particles[i].y);
ctx.lineTo(particles[j].x, particles[j].y);
ctx.stroke();
}
}
}
// Draw particles
particles.forEach((p) => {
ctx.beginPath();
ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
ctx.fillStyle = `${color} 0.5)`;
ctx.fill();
});
animationFrameId = requestAnimationFrame(draw);
};
window.addEventListener('resize', resize);
resize();
draw();
return () => {
window.removeEventListener('resize', resize);
cancelAnimationFrame(animationFrameId);
};
}, [isDark]);
return (
<canvas
ref={canvasRef}
className="absolute inset-0 pointer-events-none"
style={{ opacity: 0.4 }}
/>
);
};
|