Particle Galaxy

1"use client"
2 
3import { cn } from "@/lib/utils"
4import { useEffect, useRef, useState } from "react"
5import * as THREE from "three"
6import { WebGLErrorBoundary, WebGLFallback } from "./webgl-error-boundary"
7 
8interface ParticleGalaxyProps {
9    className?: string
10    /** Number of particles in the galaxy (affects performance) */
11    particleCount?: number
12    /** Base size of particles */
13    particleSize?: number
14    /** Speed of automatic rotation */
15    rotationSpeed?: number
16    /** Number of spiral arms */
17    spiralArms?: number
18    /** Array of 3 color values for the galaxy */
19    colors?: [string, string, string]
20    /** Strength of mouse interaction (0-1) */
21    mouseInfluence?: number
22    /** Enable automatic rotation */
23    autoRotate?: boolean
24    /** Blend mode: 'additive' for dark backgrounds, 'normal' for light backgrounds */
25    blendMode?: "additive" | "normal"
26    /** How spread out the galaxy is (1-5) */
27    spread?: number
28    /** Particle density/opacity (0-1) */
29    density?: number
30    /** Glow intensity (0-100) */
31    glow?: number
32    /** Enable gentle camera movement */
33    cameraMovement?: boolean
34    /** Concentration of particles toward center (0-1) */
35    centerConcentration?: number
36    /** Enable particle pulsation animation */
37    pulsate?: boolean
38    /** Speed of particle pulsation (0.1-2) */
39    pulsateSpeed?: number
40    /** Enable mouse wheel zoom */
41    enableZoom?: boolean
42    /** Enable click and drag rotation */
43    enableDrag?: boolean
44    /** Enable touch gestures on mobile */
45    enableTouch?: boolean
46    /** Rotation damping factor (0-1) - higher = more responsive */
47    damping?: number
48    /** Min zoom distance */
49    minZoom?: number
50    /** Max zoom distance */
51    maxZoom?: number
52}
53 
54export function ParticleGalaxy({
55    className,
56    particleCount = 10000,
57    particleSize = 0.02,
58    rotationSpeed = 0.001,
59    spiralArms = 3,
60    colors: colorProp = ["#4f46e5", "#8b5cf6", "#ec4899"],
61    mouseInfluence = 0.5,
62    autoRotate = true,
63    blendMode = "additive",
64    spread = 2.5,
65    density = 0.7,
66    glow = 60,
67    cameraMovement = true,
68    centerConcentration = 0.5,
69    pulsate = true,
70    pulsateSpeed = 1,
71    enableZoom = true,
72    enableDrag = true,
73    enableTouch = true,
74    damping = 0.1,
75    minZoom = 1.5,
76    maxZoom = 10,
77}: ParticleGalaxyProps) {
78    const containerRef = useRef<HTMLDivElement>(null)
79    const canvasRef = useRef<HTMLCanvasElement>(null)
80// … truncated