Sparkles

1
'use client';
2

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

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

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

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

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

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