Aurora Dots

1'use client';
2import React, { useEffect, useRef } from 'react';
3import { cn } from '@/lib/utils';
4 
5interface Cluster {
6  cx: number;
7  cy: number;
8  radius: number;
9  count: number;
10}
11 
12interface Particle {
13  x: number;
14  y: number;
15  baseOpacity: number;
16  phase: number;
17}
18 
19interface AuroraDotsProps {
20  particleColor?: string;
21  particleSize?: number;
22  glowIntensity?: number;
23  hoverGlowIntensity?: number;
24  animationSpeed?: number;
25  hoverRadius?: number;
26  interactive?: boolean;
27  clusters?: Cluster[];
28  className?: string;
29  children?: React.ReactNode;
30}
31 
32export function AuroraDots({
33  particleColor = '34, 211, 238',
34  particleSize = 2,
35  glowIntensity = 0.3,
36  hoverGlowIntensity = 0.5,
37  animationSpeed = 3,
38  hoverRadius = 10,
39  interactive = true,
40  clusters = [
41    { cx: 20, cy: 15, radius: 8, count: 45 },
42    { cx: 45, cy: 12, radius: 6, count: 35 },
43    { cx: 70, cy: 18, radius: 10, count: 60 },
44    { cx: 85, cy: 14, radius: 7, count: 40 },
45    { cx: 15, cy: 35, radius: 9, count: 50 },
46    { cx: 35, cy: 40, radius: 7, count: 42 },
47    { cx: 55, cy: 38, radius: 8, count: 48 },
48    { cx: 75, cy: 35, radius: 6, count: 38 },
49    { cx: 88, cy: 40, radius: 7, count: 40 },
50    { cx: 10, cy: 60, radius: 8, count: 45 },
51    { cx: 30, cy: 58, radius: 9, count: 52 },
52    { cx: 50, cy: 62, radius: 7, count: 42 },
53    { cx: 68, cy: 60, radius: 10, count: 58 },
54    { cx: 85, cy: 65, radius: 8, count: 46 },
55    { cx: 18, cy: 82, radius: 7, count: 40 },
56    { cx: 42, cy: 85, radius: 8, count: 48 },
57    { cx: 65, cy: 80, radius: 9, count: 50 },
58    { cx: 82, cy: 88, radius: 6, count: 35 },
59  ],
60  className,
61  children,
62}: AuroraDotsProps) {
63  const canvasRef = useRef<HTMLCanvasElement>(null);
64  const containerRef = useRef<HTMLDivElement>(null);
65  const particlesRef = useRef<Particle[]>([]);
66  const mouseRef = useRef({ x: -1000, y: -1000 });
67  const animationRef = useRef<number | undefined>(undefined);
68  const autoHoverPosRef = useRef({ x: 0.5, y: 0.5, angle: 0 });
69  const isVisibleRef = useRef(true);
70 
71  useEffect(() => {
72    const canvas = canvasRef.current;
73    const container = containerRef.current;
74    if (!canvas || !container) return;
75 
76    const ctx = canvas.getContext('2d');
77    if (!ctx) return;
78 
79    const observer = new IntersectionObserver(
80      ([entry]) => {
81        isVisibleRef.current = entry.isIntersecting;
82        if (entry.isIntersecting && !animationRef.current) {
83          animate();
84        }
85      },
86      { threshold: 0 },
87    );
88 
89// … truncated