Stars Background

1'use client';
2 
3import * as React from 'react';
4import {
5  type HTMLMotionProps,
6  motion,
7  useMotionValue,
8  useSpring,
9  type SpringOptions,
10  type Transition,
11} from 'motion/react';
12 
13import { cn } from '@/lib/utils';
14 
15type StarLayerProps = HTMLMotionProps<'div'> & {
16  count: number;
17  size: number;
18  transition: Transition;
19  starColor: string;
20};
21 
22function generateStars(count: number, starColor: string) {
23  const shadows: string[] = [];
24  for (let i = 0; i < count; i++) {
25    const x = Math.floor(Math.random() * 4000) - 2000;
26    const y = Math.floor(Math.random() * 4000) - 2000;
27    shadows.push(`${x}px ${y}px ${starColor}`);
28  }
29  return shadows.join(', ');
30}
31 
32function StarLayer({
33  count = 1000,
34  size = 1,
35  transition = { repeat: Infinity, duration: 50, ease: 'linear' },
36  starColor = '#fff',
37  className,
38  ...props
39}: StarLayerProps) {
40  const [boxShadow, setBoxShadow] = React.useState<string>('');
41 
42  React.useEffect(() => {
43    setBoxShadow(generateStars(count, starColor));
44  }, [count, starColor]);
45 
46  return (
47    <motion.div
48      data-slot="star-layer"
49      animate={{ y: [0, -2000] }}
50      transition={transition}
51      className={cn('absolute top-0 left-0 w-full h-[2000px]', className)}
52      {...props}
53    >
54      <div
55        className="absolute bg-transparent rounded-full"
56        style={{
57          width: `${size}px`,
58          height: `${size}px`,
59          boxShadow: boxShadow,
60        }}
61      />
62      <div
63        className="absolute bg-transparent rounded-full top-[2000px]"
64        style={{
65          width: `${size}px`,
66          height: `${size}px`,
67          boxShadow: boxShadow,
68        }}
69      />
70    </motion.div>
71  );
72}
73 
74type StarsBackgroundProps = React.ComponentProps<'div'> & {
75  factor?: number;
76  speed?: number;
77  transition?: SpringOptions;
78  starColor?: string;
79  pointerEvents?: boolean;
80};
81 
82function StarsBackground({
83  children,
84  className,
85  factor = 0.05,
86  speed = 50,
87  transition = { stiffness: 50, damping: 20 },
88  starColor = '#fff',
89  pointerEvents = true,
90  ...props
91}: StarsBackgroundProps) {
92  const offsetX = useMotionValue(1);
93  const offsetY = useMotionValue(1);
94 
95  const springX = useSpring(offsetX, transition);
96  const springY = useSpring(offsetY, transition);
97 
98  const handleMouseMove = React.useCallback(
99    (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
100      const centerX = window.innerWidth / 2;
101      const centerY = window.innerHeight / 2;
102// … truncated