Gravity Stars Background

1'use client';
2 
3import * as React from 'react';
4 
5import { cn } from '@/lib/utils';
6 
7type MouseGravity = 'attract' | 'repel';
8type GlowAnimation = 'instant' | 'ease' | 'spring';
9type StarsInteractionType = 'bounce' | 'merge';
10 
11type GravityStarsProps = {
12  starsCount?: number;
13  starsSize?: number;
14  starsOpacity?: number;
15  glowIntensity?: number;
16  glowAnimation?: GlowAnimation;
17  movementSpeed?: number;
18  mouseInfluence?: number;
19  mouseGravity?: MouseGravity;
20  gravityStrength?: number;
21  starsInteraction?: boolean;
22  starsInteractionType?: StarsInteractionType;
23} & React.ComponentProps<'div'>;
24 
25type Particle = {
26  x: number;
27  y: number;
28  vx: number;
29  vy: number;
30  size: number;
31  opacity: number;
32  baseOpacity: number;
33  mass: number;
34  glowMultiplier?: number;
35  glowVelocity?: number;
36};
37 
38function GravityStarsBackground({
39  starsCount = 75,
40  starsSize = 2,
41  starsOpacity = 0.75,
42  glowIntensity = 15,
43  glowAnimation = 'ease',
44  movementSpeed = 0.3,
45  mouseInfluence = 100,
46  mouseGravity = 'attract',
47  gravityStrength = 75,
48  starsInteraction = false,
49  starsInteractionType = 'bounce',
50  className,
51  ...props
52}: GravityStarsProps) {
53  const containerRef = React.useRef<HTMLDivElement | null>(null);
54  const canvasRef = React.useRef<HTMLCanvasElement | null>(null);
55  const animRef = React.useRef<number | null>(null);
56  const starsRef = React.useRef<Particle[]>([]);
57  const mouseRef = React.useRef<{ x: number; y: number }>({ x: 0, y: 0 });
58  const [dpr, setDpr] = React.useState(1);
59  const [canvasSize, setCanvasSize] = React.useState({
60    width: 800,
61    height: 600,
62  });
63 
64  const readColor = React.useCallback(() => {
65    const el = containerRef.current;
66    if (!el) return '#ffffff';
67    const cs = getComputedStyle(el);
68    return cs.color || '#ffffff';
69  }, []);
70 
71  const initStars = React.useCallback(
72    (w: number, h: number) => {
73      starsRef.current = Array.from({ length: starsCount }).map(() => {
74        const angle = Math.random() * Math.PI * 2;
75        const speed = movementSpeed * (0.5 + Math.random() * 0.5);
76        return {
77          x: Math.random() * w,
78          y: Math.random() * h,
79          vx: Math.cos(angle) * speed,
80          vy: Math.sin(angle) * speed,
81          size: Math.random() * starsSize + 1,
82          opacity: starsOpacity,
83          baseOpacity: starsOpacity,
84          mass: Math.random() * 0.5 + 0.5,
85          glowMultiplier: 1,
86          glowVelocity: 0,
87        };
88      });
89    },
90// … truncated