Glowing Stars

1"use client";
2 
3import React, { useEffect, useRef, useState } from "react";
4import { AnimatePresence, motion } from "motion/react";
5import { cn } from "@/lib/utils";
6 
7export const GlowingStarsBackgroundCard = ({
8  className,
9  children,
10}: {
11  className?: string;
12  children?: React.ReactNode;
13}) => {
14  const [mouseEnter, setMouseEnter] = useState(false);
15 
16  return (
17    <div
18      onMouseEnter={() => {
19        setMouseEnter(true);
20      }}
21      onMouseLeave={() => {
22        setMouseEnter(false);
23      }}
24      className={cn(
25        "bg-[linear-gradient(110deg,#333_0.6%,#222)] p-4 max-w-md max-h-[20rem] h-full w-full rounded-xl border border-[#eaeaea] dark:border-neutral-600",
26        className
27      )}
28    >
29      <div className="flex justify-center items-center">
30        <Illustration mouseEnter={mouseEnter} />
31      </div>
32      <div className="px-2 pb-6">{children}</div>
33    </div>
34  );
35};
36 
37export const GlowingStarsDescription = ({
38  className,
39  children,
40}: {
41  className?: string;
42  children?: React.ReactNode;
43}) => {
44  return (
45    <p className={cn("text-base text-white max-w-[16rem]", className)}>
46      {children}
47    </p>
48  );
49};
50 
51export const GlowingStarsTitle = ({
52  className,
53  children,
54}: {
55  className?: string;
56  children?: React.ReactNode;
57}) => {
58  return (
59    <h2 className={cn("font-bold text-2xl text-[#eaeaea]", className)}>
60      {children}
61    </h2>
62  );
63};
64 
65export const Illustration = ({ mouseEnter }: { mouseEnter: boolean }) => {
66  const stars = 108;
67  const columns = 18;
68 
69  const [glowingStars, setGlowingStars] = useState<number[]>([]);
70 
71  const highlightedStars = useRef<number[]>([]);
72 
73  useEffect(() => {
74    const interval = setInterval(() => {
75      highlightedStars.current = Array.from({ length: 5 }, () =>
76        Math.floor(Math.random() * stars)
77      );
78      setGlowingStars([...highlightedStars.current]);
79    }, 3000);
80 
81    return () => clearInterval(interval);
82  }, []);
83 
84  return (
85    <div
86      className="h-48 p-1 w-full"
87      style={{
88        display: "grid",
89        gridTemplateColumns: `repeat(${columns}, 1fr)`,
90        gap: `1px`,
91      }}
92    >
93      {[...Array(stars)].map((_, starIdx) => {
94        const isGlowing = glowingStars.includes(starIdx);
95        const delay = (starIdx % 10) * 0.1;
96        const staticDelay = starIdx * 0.01;
97        return (
98          <div
99            key={`matrix-col-${starIdx}}`}
100            className="relative flex items-center justify-center"
101          >
102            <Star
103// … truncated