{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glowing-effect",
  "type": "registry:block",
  "title": "Glowing effect",
  "description": "Glowing effect",
  "files": [
    {
      "path": "components/usages/glowingeffectusage.tsx",
      "content": "\"use client\";\r\n\r\nimport { GlowingEffect } from \"@/registry/open-source/glowing-effect\";\r\nimport { Box, Lock, Search, Settings, Sparkles } from \"lucide-react\";\r\n\r\nexport default function GlowingEffectDemo() {\r\n\treturn (\r\n\t\t<>\r\n\t\t\t<ul className=\"grid grid-cols-1 grid-rows-none gap-4 md:grid-cols-12 md:grid-rows-3 lg:gap-4 xl:max-h-136 xl:grid-rows-2\">\r\n\t\t\t\t<GridItem\r\n\t\t\t\t\tarea=\"md:[grid-area:1/1/2/7] xl:[grid-area:1/1/2/5]\"\r\n\t\t\t\t\ticon={\r\n\t\t\t\t\t\t<Box className=\"h-4 w-4 text-secondary dark:text-secondary\" />\r\n\t\t\t\t\t}\r\n\t\t\t\t\ttitle=\"Do things the right way\"\r\n\t\t\t\t\tdescription=\"Running out of copy so I'll write anything.\"\r\n\t\t\t\t/>\r\n\r\n\t\t\t\t<GridItem\r\n\t\t\t\t\tarea=\"md:[grid-area:1/7/2/13] xl:[grid-area:2/1/3/5]\"\r\n\t\t\t\t\ticon={\r\n\t\t\t\t\t\t<Settings className=\"h-4 w-4 text-secondary dark:text-secondary\" />\r\n\t\t\t\t\t}\r\n\t\t\t\t\ttitle=\"The best AI code editor ever.\"\r\n\t\t\t\t\tdescription=\"Yes, it's true. I'm not even kidding. Ask my mom if you don't believe me.\"\r\n\t\t\t\t/>\r\n\r\n\t\t\t\t<GridItem\r\n\t\t\t\t\tarea=\"md:[grid-area:2/1/3/7] xl:[grid-area:1/5/3/8]\"\r\n\t\t\t\t\ticon={\r\n\t\t\t\t\t\t<Lock className=\"h-4 w-4 text-secondary dark:text-secondary\" />\r\n\t\t\t\t\t}\r\n\t\t\t\t\ttitle=\"You should buy Aceternity UI Pro\"\r\n\t\t\t\t\tdescription=\"It's the best money you'll ever spend\"\r\n\t\t\t\t/>\r\n\r\n\t\t\t\t<GridItem\r\n\t\t\t\t\tarea=\"md:[grid-area:2/7/3/13] xl:[grid-area:1/8/2/13]\"\r\n\t\t\t\t\ticon={\r\n\t\t\t\t\t\t<Sparkles className=\"h-4 w-4 text-secondary dark:text-secondary\" />\r\n\t\t\t\t\t}\r\n\t\t\t\t\ttitle=\"This card is also built by Cursor\"\r\n\t\t\t\t\tdescription=\"I'm not even kidding. Ask my mom if you don't believe me.\"\r\n\t\t\t\t/>\r\n\r\n\t\t\t\t<GridItem\r\n\t\t\t\t\tarea=\"md:[grid-area:3/1/4/13] xl:[grid-area:2/8/3/13]\"\r\n\t\t\t\t\ticon={\r\n\t\t\t\t\t\t<Search className=\"h-4 w-4 text-secondary dark:text-secondary\" />\r\n\t\t\t\t\t}\r\n\t\t\t\t\ttitle=\"Coming soon on Aceternity UI\"\r\n\t\t\t\t\tdescription=\"I'm writing the code as I record this, no shit.\"\r\n\t\t\t\t/>\r\n\t\t\t</ul>\r\n\t\t</>\r\n\t);\r\n}\r\n\r\ninterface GridItemProps {\r\n\tarea: string;\r\n\ticon: React.ReactNode;\r\n\ttitle: string;\r\n\tdescription: React.ReactNode;\r\n}\r\n\r\nconst GridItem = ({ area, icon, title, description }: GridItemProps) => {\r\n\treturn (\r\n\t\t<li className={`min-h-56 list-none ${area}`}>\r\n\t\t\t<div className=\"relative h-full rounded-2.5xl border  p-2  md:rounded-3xl md:p-3\">\r\n\t\t\t\t<GlowingEffect\r\n\t\t\t\t\tspread={40}\r\n\t\t\t\t\tglow={true}\r\n\t\t\t\t\tdisabled={false}\r\n\t\t\t\t\tproximity={64}\r\n\t\t\t\t\tinactiveZone={0.01}\r\n\t\t\t\t/>\r\n\t\t\t\t<div className=\"relative flex h-full flex-col justify-between gap-6 overflow-hidden rounded-xl border-0.75 p-6  dark:shadow-[0px_0px_27px_0px_#2D2D2D] md:p-6\">\r\n\t\t\t\t\t<div className=\"relative flex flex-1 flex-col justify-between gap-3\">\r\n\t\t\t\t\t\t<div className=\"w-fit rounded-lg border border-gray-600 p-2 \">\r\n\t\t\t\t\t\t\t{icon}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div className=\"space-y-3\">\r\n\t\t\t\t\t\t\t<h3 className=\"pt-0.5 text-xl/[1.375rem] font-semibold font-sans -tracking-4 md:text-2xl/[1.875rem] text-balance text-secondary dark:text-secondary\">\r\n\t\t\t\t\t\t\t\t{title}\r\n\t\t\t\t\t\t\t</h3>\r\n\t\t\t\t\t\t\t<h2\r\n\t\t\t\t\t\t\t\tclassName=\"md:[&_b]:font-semibold md:[&_strong]:font-semibold font-sans text-sm/[1.125rem] \r\n              md:text-base/[1.375rem]  text-secondary dark:text-secondary\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t{description}\r\n\t\t\t\t\t\t\t</h2>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</li>\r\n\t);\r\n};\r\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/glowingeffectusage.tsx",
      "content": "\"use client\";\r\n\r\nimport { GlowingEffect } from \"@/registry/open-source/glowing-effect\";\r\nimport { Box, Lock, Search, Settings, Sparkles } from \"lucide-react\";\r\n\r\nexport default function GlowingEffectDemo() {\r\n\treturn (\r\n\t\t<>\r\n\t\t\t<ul className=\"grid grid-cols-1 grid-rows-none gap-4 md:grid-cols-12 md:grid-rows-3 lg:gap-4 xl:max-h-136 xl:grid-rows-2\">\r\n\t\t\t\t<GridItem\r\n\t\t\t\t\tarea=\"md:[grid-area:1/1/2/7] xl:[grid-area:1/1/2/5]\"\r\n\t\t\t\t\ticon={\r\n\t\t\t\t\t\t<Box className=\"h-4 w-4 text-secondary dark:text-secondary\" />\r\n\t\t\t\t\t}\r\n\t\t\t\t\ttitle=\"Do things the right way\"\r\n\t\t\t\t\tdescription=\"Running out of copy so I'll write anything.\"\r\n\t\t\t\t/>\r\n\r\n\t\t\t\t<GridItem\r\n\t\t\t\t\tarea=\"md:[grid-area:1/7/2/13] xl:[grid-area:2/1/3/5]\"\r\n\t\t\t\t\ticon={\r\n\t\t\t\t\t\t<Settings className=\"h-4 w-4 text-secondary dark:text-secondary\" />\r\n\t\t\t\t\t}\r\n\t\t\t\t\ttitle=\"The best AI code editor ever.\"\r\n\t\t\t\t\tdescription=\"Yes, it's true. I'm not even kidding. Ask my mom if you don't believe me.\"\r\n\t\t\t\t/>\r\n\r\n\t\t\t\t<GridItem\r\n\t\t\t\t\tarea=\"md:[grid-area:2/1/3/7] xl:[grid-area:1/5/3/8]\"\r\n\t\t\t\t\ticon={\r\n\t\t\t\t\t\t<Lock className=\"h-4 w-4 text-secondary dark:text-secondary\" />\r\n\t\t\t\t\t}\r\n\t\t\t\t\ttitle=\"You should buy Aceternity UI Pro\"\r\n\t\t\t\t\tdescription=\"It's the best money you'll ever spend\"\r\n\t\t\t\t/>\r\n\r\n\t\t\t\t<GridItem\r\n\t\t\t\t\tarea=\"md:[grid-area:2/7/3/13] xl:[grid-area:1/8/2/13]\"\r\n\t\t\t\t\ticon={\r\n\t\t\t\t\t\t<Sparkles className=\"h-4 w-4 text-secondary dark:text-secondary\" />\r\n\t\t\t\t\t}\r\n\t\t\t\t\ttitle=\"This card is also built by Cursor\"\r\n\t\t\t\t\tdescription=\"I'm not even kidding. Ask my mom if you don't believe me.\"\r\n\t\t\t\t/>\r\n\r\n\t\t\t\t<GridItem\r\n\t\t\t\t\tarea=\"md:[grid-area:3/1/4/13] xl:[grid-area:2/8/3/13]\"\r\n\t\t\t\t\ticon={\r\n\t\t\t\t\t\t<Search className=\"h-4 w-4 text-secondary dark:text-secondary\" />\r\n\t\t\t\t\t}\r\n\t\t\t\t\ttitle=\"Coming soon on Aceternity UI\"\r\n\t\t\t\t\tdescription=\"I'm writing the code as I record this, no shit.\"\r\n\t\t\t\t/>\r\n\t\t\t</ul>\r\n\t\t</>\r\n\t);\r\n}\r\n\r\ninterface GridItemProps {\r\n\tarea: string;\r\n\ticon: React.ReactNode;\r\n\ttitle: string;\r\n\tdescription: React.ReactNode;\r\n}\r\n\r\nconst GridItem = ({ area, icon, title, description }: GridItemProps) => {\r\n\treturn (\r\n\t\t<li className={`min-h-56 list-none ${area}`}>\r\n\t\t\t<div className=\"relative h-full rounded-2.5xl border  p-2  md:rounded-3xl md:p-3\">\r\n\t\t\t\t<GlowingEffect\r\n\t\t\t\t\tspread={40}\r\n\t\t\t\t\tglow={true}\r\n\t\t\t\t\tdisabled={false}\r\n\t\t\t\t\tproximity={64}\r\n\t\t\t\t\tinactiveZone={0.01}\r\n\t\t\t\t/>\r\n\t\t\t\t<div className=\"relative flex h-full flex-col justify-between gap-6 overflow-hidden rounded-xl border-0.75 p-6  dark:shadow-[0px_0px_27px_0px_#2D2D2D] md:p-6\">\r\n\t\t\t\t\t<div className=\"relative flex flex-1 flex-col justify-between gap-3\">\r\n\t\t\t\t\t\t<div className=\"w-fit rounded-lg border border-gray-600 p-2 \">\r\n\t\t\t\t\t\t\t{icon}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div className=\"space-y-3\">\r\n\t\t\t\t\t\t\t<h3 className=\"pt-0.5 text-xl/[1.375rem] font-semibold font-sans -tracking-4 md:text-2xl/[1.875rem] text-balance text-secondary dark:text-secondary\">\r\n\t\t\t\t\t\t\t\t{title}\r\n\t\t\t\t\t\t\t</h3>\r\n\t\t\t\t\t\t\t<h2\r\n\t\t\t\t\t\t\t\tclassName=\"md:[&_b]:font-semibold md:[&_strong]:font-semibold font-sans text-sm/[1.125rem] \r\n              md:text-base/[1.375rem]  text-secondary dark:text-secondary\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t{description}\r\n\t\t\t\t\t\t\t</h2>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</li>\r\n\t);\r\n};\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/glowing-effect.tsx",
      "content": "\"use client\";\n\nimport { memo, useCallback, useEffect, useRef } from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\nimport { animate } from \"motion/react\";\n\n// Credit:\n// https://ui.aceternity.com/components/glowing-effect\n\ninterface GlowingEffectProps {\n\tblur?: number;\n\tinactiveZone?: number;\n\tproximity?: number;\n\tspread?: number;\n\tvariant?: \"default\" | \"white\";\n\tglow?: boolean;\n\tclassName?: string;\n\tdisabled?: boolean;\n\tmovementDuration?: number;\n\tborderWidth?: number;\n}\nconst GlowingEffect = memo(\n\t({\n\t\tblur = 0,\n\t\tinactiveZone = 0.7,\n\t\tproximity = 0,\n\t\tspread = 20,\n\t\tvariant = \"default\",\n\t\tglow = false,\n\t\tclassName,\n\t\tmovementDuration = 2,\n\t\tborderWidth = 1,\n\t\tdisabled = true,\n\t}: GlowingEffectProps) => {\n\t\tconst containerRef = useRef<HTMLDivElement>(null);\n\t\tconst lastPosition = useRef({ x: 0, y: 0 });\n\t\tconst animationFrameRef = useRef<number>(0);\n\n\t\tconst handleMove = useCallback(\n\t\t\t(e?: MouseEvent | { x: number; y: number }) => {\n\t\t\t\tif (!containerRef.current) return;\n\n\t\t\t\tif (animationFrameRef.current) {\n\t\t\t\t\tcancelAnimationFrame(animationFrameRef.current);\n\t\t\t\t}\n\n\t\t\t\tanimationFrameRef.current = requestAnimationFrame(() => {\n\t\t\t\t\tconst element = containerRef.current;\n\t\t\t\t\tif (!element) return;\n\n\t\t\t\t\tconst { left, top, width, height } =\n\t\t\t\t\t\telement.getBoundingClientRect();\n\t\t\t\t\tconst mouseX = e?.x ?? lastPosition.current.x;\n\t\t\t\t\tconst mouseY = e?.y ?? lastPosition.current.y;\n\n\t\t\t\t\tif (e) {\n\t\t\t\t\t\tlastPosition.current = { x: mouseX, y: mouseY };\n\t\t\t\t\t}\n\n\t\t\t\t\tconst center = [left + width * 0.5, top + height * 0.5];\n\t\t\t\t\tconst distanceFromCenter = Math.hypot(\n\t\t\t\t\t\tmouseX - center[0],\n\t\t\t\t\t\tmouseY - center[1]\n\t\t\t\t\t);\n\t\t\t\t\tconst inactiveRadius =\n\t\t\t\t\t\t0.5 * Math.min(width, height) * inactiveZone;\n\n\t\t\t\t\tif (distanceFromCenter < inactiveRadius) {\n\t\t\t\t\t\telement.style.setProperty(\"--active\", \"0\");\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\tconst isActive =\n\t\t\t\t\t\tmouseX > left - proximity &&\n\t\t\t\t\t\tmouseX < left + width + proximity &&\n\t\t\t\t\t\tmouseY > top - proximity &&\n\t\t\t\t\t\tmouseY < top + height + proximity;\n\n\t\t\t\t\telement.style.setProperty(\"--active\", isActive ? \"1\" : \"0\");\n\n\t\t\t\t\tif (!isActive) return;\n\n\t\t\t\t\tconst currentAngle =\n\t\t\t\t\t\tparseFloat(element.style.getPropertyValue(\"--start\")) || 0;\n\t\t\t\t\tlet targetAngle =\n\t\t\t\t\t\t(180 * Math.atan2(mouseY - center[1], mouseX - center[0])) /\n\t\t\t\t\t\t\tMath.PI +\n\t\t\t\t\t\t90;\n\n\t\t\t\t\tconst angleDiff =\n\t\t\t\t\t\t((targetAngle - currentAngle + 180) % 360) - 180;\n\t\t\t\t\tconst newAngle = currentAngle + angleDiff;\n\n\t\t\t\t\tanimate(currentAngle, newAngle, {\n\t\t\t\t\t\tduration: movementDuration,\n\t\t\t\t\t\tease: [0.16, 1, 0.3, 1],\n\t\t\t\t\t\tonUpdate: (value) => {\n\t\t\t\t\t\t\telement.style.setProperty(\"--start\", String(value));\n\t\t\t\t\t\t},\n\t\t\t\t\t});\n\t\t\t\t});\n\t\t\t},\n\t\t\t[inactiveZone, proximity, movementDuration]\n\t\t);\n\n\t\tuseEffect(() => {\n\t\t\tif (disabled) return;\n\n\t\t\tconst handleScroll = () => handleMove();\n\t\t\tconst handlePointerMove = (e: PointerEvent) => handleMove(e);\n\n\t\t\twindow.addEventListener(\"scroll\", handleScroll, { passive: true });\n\t\t\tdocument.body.addEventListener(\"pointermove\", handlePointerMove, {\n\t\t\t\tpassive: true,\n\t\t\t});\n\n\t\t\treturn () => {\n\t\t\t\tif (animationFrameRef.current) {\n\t\t\t\t\tcancelAnimationFrame(animationFrameRef.current);\n\t\t\t\t}\n\t\t\t\twindow.removeEventListener(\"scroll\", handleScroll);\n\t\t\t\tdocument.body.removeEventListener(\"pointermove\", handlePointerMove);\n\t\t\t};\n\t\t}, [handleMove, disabled]);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"pointer-events-none absolute -inset-px hidden rounded-[inherit] border opacity-0 transition-opacity\",\n\t\t\t\t\t\tglow && \"opacity-100\",\n\t\t\t\t\t\tvariant === \"white\" && \"border-white\",\n\t\t\t\t\t\tdisabled && \"block!\"\n\t\t\t\t\t)}\n\t\t\t\t/>\n\t\t\t\t<div\n\t\t\t\t\tref={containerRef}\n\t\t\t\t\tstyle={\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"--blur\": `${blur}px`,\n\t\t\t\t\t\t\t\"--spread\": spread,\n\t\t\t\t\t\t\t\"--start\": \"0\",\n\t\t\t\t\t\t\t\"--active\": \"0\",\n\t\t\t\t\t\t\t\"--glowingeffect-border-width\": `${borderWidth}px`,\n\t\t\t\t\t\t\t\"--repeating-conic-gradient-times\": \"5\",\n\t\t\t\t\t\t\t\"--gradient\":\n\t\t\t\t\t\t\t\tvariant === \"white\"\n\t\t\t\t\t\t\t\t\t? `repeating-conic-gradient(\n                  from 236.84deg at 50% 50%,\n                  var(--black),\n                  var(--black) calc(25% / var(--repeating-conic-gradient-times))\n                )`\n\t\t\t\t\t\t\t\t\t: `radial-gradient(circle, #dd7bbb 10%, #dd7bbb00 20%),\n                radial-gradient(circle at 40% 40%, #d79f1e 5%, #d79f1e00 15%),\n                radial-gradient(circle at 60% 60%, #5a922c 10%, #5a922c00 20%), \n                radial-gradient(circle at 40% 60%, #4c7894 10%, #4c789400 20%),\n                repeating-conic-gradient(\n                  from 236.84deg at 50% 50%,\n                  #dd7bbb 0%,\n                  #d79f1e calc(25% / var(--repeating-conic-gradient-times)),\n                  #5a922c calc(50% / var(--repeating-conic-gradient-times)), \n                  #4c7894 calc(75% / var(--repeating-conic-gradient-times)),\n                  #dd7bbb calc(100% / var(--repeating-conic-gradient-times))\n                )`,\n\t\t\t\t\t\t} as React.CSSProperties\n\t\t\t\t\t}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"pointer-events-none absolute inset-0 rounded-[inherit] opacity-100 transition-opacity\",\n\t\t\t\t\t\tglow && \"opacity-100\",\n\t\t\t\t\t\tblur > 0 && \"blur-(--blur) \",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t\tdisabled && \"hidden!\"\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"glow\",\n\t\t\t\t\t\t\t\"rounded-[inherit]\",\n\t\t\t\t\t\t\t'after:content-[\"\"] after:rounded-[inherit] after:absolute after:inset-[calc(-1*var(--glowingeffect-border-width))]',\n\t\t\t\t\t\t\t\"after:[border:var(--glowingeffect-border-width)_solid_transparent]\",\n\t\t\t\t\t\t\t\"after:[background:var(--gradient)] after:bg-fixed\",\n\t\t\t\t\t\t\t\"after:opacity-(--active) after:transition-opacity after:duration-300\",\n\t\t\t\t\t\t\t\"after:[mask-clip:padding-box,border-box]\",\n\t\t\t\t\t\t\t\"after:mask-intersect\",\n\t\t\t\t\t\t\t\"after:mask-[linear-gradient(#0000,#0000),conic-gradient(from_calc((var(--start)-var(--spread))*1deg),#00000000_0deg,#fff,#00000000_calc(var(--spread)*2deg))]\"\n\t\t\t\t\t\t)}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</>\n\t\t);\n\t}\n);\n\nGlowingEffect.displayName = \"GlowingEffect\";\n\nexport { GlowingEffect };\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"
    }
  ]
}