01import { useRef, useEffect } from 'react';
02
03interface Point {
04  x: number;
05  y: number;
06  vx: number;
07  vy: number;
08}
09
10export function ParticleCanvas() {
11  const canvasRef = useRef<HTMLCanvasElement>(null);
12  const pointsRef = useRef<Point[]>([]);
13  const animationRef = useRef<number>();
14
15  useEffect(() => {
16    const canvas = canvasRef.current;
17    if (!canvas) return;
18
19    const context = canvas.getContext('2d');
20    if (!context) return;
21
22    let width = 0;
23    let height = 0;
24    const SPEED = 0.5;
25    const DIST = 150;
26    const NUMBER = 60;
27    let isVisible = false;
28
29    const resizeCanvas = () => {
30      const wrapper = canvas.parentElement;
31      if (!wrapper) return;
32      width = canvas.width = wrapper.offsetWidth;
33      height = canvas.height = wrapper.offsetHeight;
34
35      pointsRef.current = [];
36      for (let i = 0; i < NUMBER; i++) {
37        pointsRef.current.push({
38          x: Math.random() * width,
39          y: Math.random() * height,
40          vx: (Math.random() - 0.5) * SPEED,
41          vy: (Math.random() - 0.5) * SPEED,
42        });
43      }
44    };
45
46    resizeCanvas();
47
48    const getDist = (a: Point, b: Point) => {
49      const dx = a.x - b.x;
50      const dy = a.y - b.y;
51      return Math.sqrt(dx * dx + dy * dy);
52    };
53
54    const drawLines = () => {
55      const points = pointsRef.current;
56      for (let i = 0; i < points.length - 1; i++) {
57        for (let j = i + 1; j < points.length; j++) {
58          const dist = getDist(points[i], points[j]);
59          if (dist <= DIST) {
60            const alpha = 1 - dist / DIST;
61            context.strokeStyle = `hsla(177, 100%, 37%, ${alpha})`;
62            context.lineWidth = Math.pow(1 - dist / DIST, 1.5) * 2;
63            context.beginPath();
64            context.moveTo(points[i].x, points[i].y);
65            context.lineTo(points[j].x, points[j].y);
66            context.stroke();
67          }
68        }
69      }
70    };
71
72    const drawPoints = () => {
73      const points = pointsRef.current;
74      for (const point of points) {
75        context.beginPath();
76        context.arc(point.x, point.y, 2, 0, Math.PI * 2);
77        context.fillStyle = 'hsl(177, 100%, 47%)';
78        context.fill();
79      }
80    };
81
82    const updatePoints = () => {
83      const points = pointsRef.current;
84      for (const point of points) {
85        point.x += point.vx;
86        point.y += point.vy;
87
88        if (point.x < 0 || point.x > width) point.vx *= -1;
89        if (point.y < 0 || point.y > height) point.vy *= -1;
90      }
91    };
92
93    const drawFrame = () => {
94      context.clearRect(0, 0, width, height);
95      drawLines();
96      drawPoints();
97    };
98
99    // Respect "reduce motion": draw one static frame instead of animating.
100    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
101      const redraw = () => {
102        resizeCanvas();
103        drawFrame();
104      };
105      drawFrame();
106      window.addEventListener('resize', redraw);
107      return () => window.removeEventListener('resize', redraw);
108    }
109
110    window.addEventListener('resize', resizeCanvas);
111
112    const animate = () => {
113      if (!isVisible) return;
114      drawFrame();
115      updatePoints();
116      animationRef.current = requestAnimationFrame(animate);
117    };
118
119    const observer = new IntersectionObserver(
120      ([entry]) => {
121        isVisible = entry.isIntersecting;
122        if (isVisible) {
123          animationRef.current = requestAnimationFrame(animate);
124        } else if (animationRef.current) {
125          cancelAnimationFrame(animationRef.current);
126        }
127      },
128      { threshold: 0 },
129    );
130
131    observer.observe(canvas);
132
133    return () => {
134      observer.disconnect();
135      window.removeEventListener('resize', resizeCanvas);
136      if (animationRef.current) {
137        cancelAnimationFrame(animationRef.current);
138      }
139    };
140  }, []);
141
142  return <canvas ref={canvasRef} className="absolute inset-0 w-full h-full" />;
143}
144
145export default ParticleCanvas;