Magical Mouse

1'use client';
2 
3import { cn } from '@/lib/utils';
4import { Sparkle } from 'lucide-react';
5import * as React from 'react';
6import { createRoot } from 'react-dom/client';
7 
8interface Point {
9  x: number;
10  y: number;
11}
12 
13interface MouseSparklesProps {
14  /**
15   * Custom icon component to render instead of the default Sparkle
16   * @default Sparkle from lucide-react
17   */
18  icon?: React.ReactNode;
19  /**
20   * Duration of the star animation in milliseconds
21   * @default 1500
22   */
23  starAnimationDuration?: number;
24  /**
25   * Minimum time between star spawns in milliseconds
26   * @default 250
27   */
28  minimumTimeBetweenStars?: number;
29  /**
30   * Minimum distance between star spawns in pixels
31   * @default 75
32   */
33  minimumDistanceBetweenStars?: number;
34  /**
35   * Duration of the glow effect in milliseconds
36   * @default 75
37   */
38  glowDuration?: number;
39  /**
40   * Maximum spacing between glow points in pixels
41   * @default 10
42   */
43  maximumGlowPointSpacing?: number;
44  /**
45   * Colors for the stars in RGB format
46   * @default ["249 146 253", "252 254 255"]
47   */
48  colors?: string[];
49  /**
50   * Sizes for the stars
51   * @default ["1.4rem", "1rem", "0.6rem"]
52   */
53  sizes?: string[];
54  /**
55   * Custom class name
56   */
57  className?: string;
58}
59 
60const MouseSparkles = React.forwardRef<HTMLDivElement, MouseSparklesProps>(
61  (
62    {
63      icon: Icon = <Sparkle className="h-full w-full" />,
64      starAnimationDuration = 1500,
65      minimumTimeBetweenStars = 250,
66      minimumDistanceBetweenStars = 75,
67      glowDuration = 75,
68      maximumGlowPointSpacing = 10,
69      colors = ['249 146 253', '252 254 255'],
70      sizes = ['1.4rem', '1rem', '0.6rem'],
71      className,
72      ...props
73    },
74    ref
75  ) => {
76    const configRef = React.useRef({
77      starAnimationDuration,
78      minimumTimeBetweenStars,
79      minimumDistanceBetweenStars,
80      glowDuration,
81      maximumGlowPointSpacing,
82      colors,
83      sizes,
84      animations: ['fall-1', 'fall-2', 'fall-3'],
85    });
86 
87    const lastRef = React.useRef({
88      starTimestamp: Date.now(),
89      starPosition: { x: 0, y: 0 },
90      mousePosition: { x: 0, y: 0 },
91    });
92 
93    let count = 0;
94 
95    const createStar = React.useCallback(
96      (position: Point) => {
97        const wrapper = document.createElement('div');
98        const color = selectRandom(configRef.current.colors);
99        const size = selectRandom(configRef.current.sizes);
100 
101        wrapper.className = cn(
102          'absolute z-[10000] pointer-events-none',
103// … truncated