{
  "name": "glowing-stars",
  "type": "registry:ui",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "components/ui/glowing-stars.tsx",
      "content": "\"use client\";\n\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\nexport const GlowingStarsBackgroundCard = ({\n  className,\n  children,\n}: {\n  className?: string;\n  children?: React.ReactNode;\n}) => {\n  const [mouseEnter, setMouseEnter] = useState(false);\n\n  return (\n    <div\n      onMouseEnter={() => {\n        setMouseEnter(true);\n      }}\n      onMouseLeave={() => {\n        setMouseEnter(false);\n      }}\n      className={cn(\n        \"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\",\n        className\n      )}\n    >\n      <div className=\"flex justify-center items-center\">\n        <Illustration mouseEnter={mouseEnter} />\n      </div>\n      <div className=\"px-2 pb-6\">{children}</div>\n    </div>\n  );\n};\n\nexport const GlowingStarsDescription = ({\n  className,\n  children,\n}: {\n  className?: string;\n  children?: React.ReactNode;\n}) => {\n  return (\n    <p className={cn(\"text-base text-white max-w-[16rem]\", className)}>\n      {children}\n    </p>\n  );\n};\n\nexport const GlowingStarsTitle = ({\n  className,\n  children,\n}: {\n  className?: string;\n  children?: React.ReactNode;\n}) => {\n  return (\n    <h2 className={cn(\"font-bold text-2xl text-[#eaeaea]\", className)}>\n      {children}\n    </h2>\n  );\n};\n\nexport const Illustration = ({ mouseEnter }: { mouseEnter: boolean }) => {\n  const stars = 108;\n  const columns = 18;\n\n  const [glowingStars, setGlowingStars] = useState<number[]>([]);\n\n  const highlightedStars = useRef<number[]>([]);\n\n  useEffect(() => {\n    const interval = setInterval(() => {\n      highlightedStars.current = Array.from({ length: 5 }, () =>\n        Math.floor(Math.random() * stars)\n      );\n      setGlowingStars([...highlightedStars.current]);\n    }, 3000);\n\n    return () => clearInterval(interval);\n  }, []);\n\n  return (\n    <div\n      className=\"h-48 p-1 w-full\"\n      style={{\n        display: \"grid\",\n        gridTemplateColumns: `repeat(${columns}, 1fr)`,\n        gap: `1px`,\n      }}\n    >\n      {[...Array(stars)].map((_, starIdx) => {\n        const isGlowing = glowingStars.includes(starIdx);\n        const delay = (starIdx % 10) * 0.1;\n        const staticDelay = starIdx * 0.01;\n        return (\n          <div\n            key={`matrix-col-${starIdx}}`}\n            className=\"relative flex items-center justify-center\"\n          >\n            <Star\n              isGlowing={mouseEnter ? true : isGlowing}\n              delay={mouseEnter ? staticDelay : delay}\n            />\n            {mouseEnter && <Glow delay={staticDelay} />}\n            <AnimatePresence mode=\"wait\">\n              {isGlowing && <Glow delay={delay} />}\n            </AnimatePresence>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n\nconst Star = ({ isGlowing, delay }: { isGlowing: boolean; delay: number }) => {\n  return (\n    <motion.div\n      key={delay}\n      initial={{\n        scale: 1,\n      }}\n      animate={{\n        scale: isGlowing ? [1, 1.2, 2.5, 2.2, 1.5] : 1,\n        background: isGlowing ? \"#fff\" : \"#666\",\n      }}\n      transition={{\n        duration: 2,\n        ease: \"easeInOut\",\n        delay: delay,\n      }}\n      className={cn(\"bg-[#666] h-[1px] w-[1px] rounded-full relative z-20\")}\n    ></motion.div>\n  );\n};\n\nconst Glow = ({ delay }: { delay: number }) => {\n  return (\n    <motion.div\n      initial={{\n        opacity: 0,\n      }}\n      animate={{\n        opacity: 1,\n      }}\n      transition={{\n        duration: 2,\n        ease: \"easeInOut\",\n        delay: delay,\n      }}\n      exit={{\n        opacity: 0,\n      }}\n      className=\"absolute  left-1/2 -translate-x-1/2 z-10 h-[4px] w-[4px] rounded-full bg-blue-500 blur-[1px] shadow-2xl shadow-blue-400\"\n    />\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/ui/glowing-stars.tsx"
    }
  ],
  "author": "Manu Arora <hi@manuarora.in>",
  "title": "Glowing Stars"
}