Sparkles

1
// @ts-nocheck
2
'use client';
3

4
import { useEffect, useId, useState } from 'react';
5
import Particles, { initParticlesEngine } from '@tsparticles/react';
6
import { loadSlim } from '@tsparticles/slim';
7

8
interface SparklesProps {
9
  className?: string;
10
  size?: number;
11
  minSize?: number | null;
12
  density?: number;
13
  speed?: number;
14
  minSpeed?: number | null;
15
  opacity?: number;
16
  direction?: string;
17
  opacitySpeed?: number;
18
  minOpacity?: number | null;
19
  color?: string;
20
  mousemove?: boolean;
21
  hover?: boolean;
22
  background?: string;
23
  options?: Record<string, any>; // Adjust type as needed based on `options` structure
24
}
25

26
export function Sparkles({
27
  className,
28
  size = 1.2,
29
  minSize = null,
30
  density = 800,
31
  speed = 1.5,
32
  minSpeed = null,
33
  opacity = 1,
34
  direction = '',
35
  opacitySpeed = 3,
36
  minOpacity = null,
37
  color = '#ffffff',
38
  mousemove = false,
39
  hover = false,
40
  background = 'transparent',
41
  options = {},
42
}: SparklesProps) {
43
  const [isReady, setIsReady] = useState(false);
44

45
  useEffect(() => {
46
    initParticlesEngine(async (engine) => {
47
      await loadSlim(engine);
48
    }).then(() => {
49
      setIsReady(true);
50
    });
51
  }, []);
52

53
  const id = useId();
54
  const defaultOptions = {
55
    background: {
56
      color: {
57
        value: background,
58
      },
59
    },
60
    fullScreen: {
61
      enable: false,
62
      zIndex: 1,
63
    },
64
    fpsLimit: 300,
65

66
    interactivity: {
67
      events: {
68
        onClick: {
69
          enable: true,
70
          mode: 'push',
71
        },
72
        onHover: {
73
          enable: hover,
74
          mode: 'grab',
75
          parallax: {
76
            enable: mousemove,
77
            force: 60,
78
            smooth: 10,
79
          },
80
        },
81
        resize: true as any,
82
      },
83
      modes: {
84
        push: {
85
          quantity: 4,
86
        },
87
        repulse: {
88
          distance: 200,
89
          duration: 0.4,
90
        },
91
      },
92
    },
93
    particles: {
94
      color: {
95
        value: color,
96
      },
97
      move: {
98
        enable: true,
99
        direction,
100
        speed: {
101
          min: minSpeed || speed / 130,
102
          max: speed,
103
        },
104
        straight: true,
105
      },
106
      collisions: {
107
        absorb: {
108
          speed: 2,
109
        },
110
        bounce: {
111
          horizontal: {
112
            value: 1,
113
          },
114
          vertical: {
115
            value: 1,
116
          },
117
        },
118
        enable: false,
119
        maxSpeed: 50,
120
        mode: 'bounce',
121
        overlap: {
122
          enable: true,
123
          retries: 0,
124
        },
125
      },
126
      number: {
127
        value: density,
128
      },
129
      opacity: {
130
        value: {
131
          min: minOpacity || opacity / 10,
132
          max: opacity,
133
        },
134
        animation: {
135
          enable: true,
136
          sync: false,
137
          speed: opacitySpeed,
138
        },
139
      },
140
      size: {
141
        value: {
142
          min: minSize || size / 1.5,
143
          max: size,
144
        },
145
      },
146
    },
147
    detectRetina: true,
148
  };
149
  return (
150
    isReady && (
151
      <Particles id={id} options={defaultOptions} className={className} />
152
    )
153
  );
154
}