{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glowing-background",
  "type": "registry:block",
  "title": "Glowing background",
  "description": "Glowing background",
  "files": [
    {
      "path": "components/usages/glowingbackgroundusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport {\n\tGlowingStarsBackgroundCard,\n\tGlowingStarsDescription,\n\tGlowingStarsTitle,\n} from \"@/registry/open-source/glowing-background\";\n\nexport default function GlowingStarsBackgroundCardPreview() {\n\treturn (\n\t\t<div className=\"flex py-20 items-center justify-center antialiased\">\n\t\t\t<GlowingStarsBackgroundCard>\n\t\t\t\t<GlowingStarsTitle>Next.js 14</GlowingStarsTitle>\n\t\t\t\t<div className=\"flex justify-between items-end\">\n\t\t\t\t\t<GlowingStarsDescription>\n\t\t\t\t\t\tThe power of full-stack to the frontend. Read the release\n\t\t\t\t\t\tnotes.\n\t\t\t\t\t</GlowingStarsDescription>\n\t\t\t\t\t<div className=\"h-8 w-8 rounded-full bg-[hsla(0,0%,100%,.1)] flex items-center justify-center\">\n\t\t\t\t\t\t<Icon />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</GlowingStarsBackgroundCard>\n\t\t</div>\n\t);\n}\n\nconst Icon = () => {\n\treturn (\n\t\t<svg\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\tfill=\"none\"\n\t\t\tviewBox=\"0 0 24 24\"\n\t\t\tstroke-width=\"1.5\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tclassName=\"h-4 w-4 text-secondary stroke-2\"\n\t\t>\n\t\t\t<path\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\td=\"M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3\"\n\t\t\t/>\n\t\t</svg>\n\t);\n};\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/glowingbackgroundusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport {\n\tGlowingStarsBackgroundCard,\n\tGlowingStarsDescription,\n\tGlowingStarsTitle,\n} from \"@/registry/open-source/glowing-background\";\n\nexport default function GlowingStarsBackgroundCardPreview() {\n\treturn (\n\t\t<div className=\"flex py-20 items-center justify-center antialiased\">\n\t\t\t<GlowingStarsBackgroundCard>\n\t\t\t\t<GlowingStarsTitle>Next.js 14</GlowingStarsTitle>\n\t\t\t\t<div className=\"flex justify-between items-end\">\n\t\t\t\t\t<GlowingStarsDescription>\n\t\t\t\t\t\tThe power of full-stack to the frontend. Read the release\n\t\t\t\t\t\tnotes.\n\t\t\t\t\t</GlowingStarsDescription>\n\t\t\t\t\t<div className=\"h-8 w-8 rounded-full bg-[hsla(0,0%,100%,.1)] flex items-center justify-center\">\n\t\t\t\t\t\t<Icon />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</GlowingStarsBackgroundCard>\n\t\t</div>\n\t);\n}\n\nconst Icon = () => {\n\treturn (\n\t\t<svg\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\tfill=\"none\"\n\t\t\tviewBox=\"0 0 24 24\"\n\t\t\tstroke-width=\"1.5\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tclassName=\"h-4 w-4 text-secondary stroke-2\"\n\t\t>\n\t\t\t<path\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\td=\"M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3\"\n\t\t\t/>\n\t\t</svg>\n\t);\n};\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/glowing-background.tsx",
      "content": "\"use client\";\r\n\r\nimport React, { useEffect, useRef, useState } from \"react\";\r\n\r\nimport { cn } from \"@/registry/utilities/cn\";\r\nimport { AnimatePresence, motion } from \"motion/react\";\r\n\r\n// https://ui.aceternity.com/components/glowing-stars-effect\r\n\r\nexport const GlowingStarsBackgroundCard = ({\r\n\tclassName,\r\n\tchildren,\r\n}: {\r\n\tclassName?: string;\r\n\tchildren?: React.ReactNode;\r\n}) => {\r\n\tconst [mouseEnter, setMouseEnter] = useState(false);\r\n\r\n\treturn (\r\n\t\t<div\r\n\t\t\tonMouseEnter={() => {\r\n\t\t\t\tsetMouseEnter(true);\r\n\t\t\t}}\r\n\t\t\tonMouseLeave={() => {\r\n\t\t\t\tsetMouseEnter(false);\r\n\t\t\t}}\r\n\t\t\tclassName={cn(\r\n\t\t\t\t\"bg-[linear-gradient(110deg,#333_0.6%,#222)] p-4 max-w-md max-h-80 h-full w-full rounded-xl border border-[#eaeaea] dark:border-neutral-600\",\r\n\t\t\t\tclassName\r\n\t\t\t)}\r\n\t\t>\r\n\t\t\t<div className=\"flex justify-center items-center\">\r\n\t\t\t\t<Illustration mouseEnter={mouseEnter} />\r\n\t\t\t</div>\r\n\t\t\t<div className=\"px-2 pb-6\">{children}</div>\r\n\t\t</div>\r\n\t);\r\n};\r\n\r\nexport const GlowingStarsDescription = ({\r\n\tclassName,\r\n\tchildren,\r\n}: {\r\n\tclassName?: string;\r\n\tchildren?: React.ReactNode;\r\n}) => {\r\n\treturn (\r\n\t\t<p className={cn(\"text-base text-foreground max-w-[16rem]\", className)}>\r\n\t\t\t{children}\r\n\t\t</p>\r\n\t);\r\n};\r\n\r\nexport const GlowingStarsTitle = ({\r\n\tclassName,\r\n\tchildren,\r\n}: {\r\n\tclassName?: string;\r\n\tchildren?: React.ReactNode;\r\n}) => {\r\n\treturn (\r\n\t\t<h2 className={cn(\"font-bold text-2xl text-foreground\", className)}>\r\n\t\t\t{children}\r\n\t\t</h2>\r\n\t);\r\n};\r\n\r\nexport const Illustration = ({ mouseEnter }: { mouseEnter: boolean }) => {\r\n\tconst stars = 108;\r\n\tconst columns = 18;\r\n\r\n\tconst [glowingStars, setGlowingStars] = useState<number[]>([]);\r\n\r\n\tconst highlightedStars = useRef<number[]>([]);\r\n\r\n\tuseEffect(() => {\r\n\t\tconst interval = setInterval(() => {\r\n\t\t\thighlightedStars.current = Array.from({ length: 5 }, () =>\r\n\t\t\t\tMath.floor(Math.random() * stars)\r\n\t\t\t);\r\n\t\t\tsetGlowingStars([...highlightedStars.current]);\r\n\t\t}, 3000);\r\n\r\n\t\treturn () => clearInterval(interval);\r\n\t}, []);\r\n\r\n\treturn (\r\n\t\t<div\r\n\t\t\tclassName=\"h-48 p-1 w-full\"\r\n\t\t\tstyle={{\r\n\t\t\t\tdisplay: \"grid\",\r\n\t\t\t\tgridTemplateColumns: `repeat(${columns}, 1fr)`,\r\n\t\t\t\tgap: `1px`,\r\n\t\t\t}}\r\n\t\t>\r\n\t\t\t{[...Array(stars)].map((_, starIdx) => {\r\n\t\t\t\tconst isGlowing = glowingStars.includes(starIdx);\r\n\t\t\t\tconst delay = (starIdx % 10) * 0.1;\r\n\t\t\t\tconst staticDelay = starIdx * 0.01;\r\n\t\t\t\treturn (\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tkey={`matrix-col-${starIdx}}`}\r\n\t\t\t\t\t\tclassName=\"relative flex items-center justify-center\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<Star\r\n\t\t\t\t\t\t\tisGlowing={mouseEnter ? true : isGlowing}\r\n\t\t\t\t\t\t\tdelay={mouseEnter ? staticDelay : delay}\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t{mouseEnter && <Glow delay={staticDelay} />}\r\n\t\t\t\t\t\t<AnimatePresence mode=\"wait\">\r\n\t\t\t\t\t\t\t{isGlowing && <Glow delay={delay} />}\r\n\t\t\t\t\t\t</AnimatePresence>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t);\r\n\t\t\t})}\r\n\t\t</div>\r\n\t);\r\n};\r\n\r\nconst Star = ({ isGlowing, delay }: { isGlowing: boolean; delay: number }) => {\r\n\treturn (\r\n\t\t<motion.div\r\n\t\t\tkey={delay}\r\n\t\t\tinitial={{\r\n\t\t\t\tscale: 1,\r\n\t\t\t}}\r\n\t\t\tanimate={{\r\n\t\t\t\tscale: isGlowing ? [1, 1.2, 2.5, 2.2, 1.5] : 1,\r\n\t\t\t\tbackground: isGlowing ? \"#fff\" : \"#666\",\r\n\t\t\t}}\r\n\t\t\ttransition={{\r\n\t\t\t\tduration: 2,\r\n\t\t\t\tease: \"easeInOut\",\r\n\t\t\t\tdelay: delay,\r\n\t\t\t}}\r\n\t\t\tclassName={cn(\"bg-background h-px w-px rounded-full relative z-20\")}\r\n\t\t></motion.div>\r\n\t);\r\n};\r\n\r\nconst Glow = ({ delay }: { delay: number }) => {\r\n\treturn (\r\n\t\t<motion.div\r\n\t\t\tinitial={{\r\n\t\t\t\topacity: 0,\r\n\t\t\t}}\r\n\t\t\tanimate={{\r\n\t\t\t\topacity: 1,\r\n\t\t\t}}\r\n\t\t\ttransition={{\r\n\t\t\t\tduration: 2,\r\n\t\t\t\tease: \"easeInOut\",\r\n\t\t\t\tdelay: delay,\r\n\t\t\t}}\r\n\t\t\texit={{\r\n\t\t\t\topacity: 0,\r\n\t\t\t}}\r\n\t\t\tclassName=\"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\"\r\n\t\t/>\r\n\t);\r\n};\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}