{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glowing-effect",
  "type": "registry:ui",
  "title": "Glowing Effect",
  "description": "Mouse-tracking glow that follows the cursor around a container's edges. Interactive card highlight.",
  "dependencies": [
    "@saasflare/ui"
  ],
  "files": [
    {
      "path": "components/ui/glowing-effect.tsx",
      "type": "registry:ui",
      "content": "\"use client\"\n\n/**\n * @fileoverview Cursor-following glowing border effect.\n * @author Saasflare™\n * Renders a glowing border highlight that follows the mouse position\n * around the edges of its container. Trending glassmorphism accent.\n * @module packages/ui/components/ui/glowing-effect\n * @package ui\n *\n * @component\n * @example\n * import { GlowingEffect } from '@saasflare/ui';\n * <div className=\"relative overflow-hidden rounded-xl border p-6\">\n *   <GlowingEffect />\n *   <h3>Feature Card</h3>\n * </div>\n *\n * @example\n * // Custom glow color and spread\n * <div className=\"relative overflow-hidden rounded-xl border p-6\">\n *   <GlowingEffect color=\"var(--chart-1)\" spread={200} blur={30} />\n *   <p>Content</p>\n * </div>\n */\n\nimport * as React from \"react\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport { cn } from \"@saasflare/ui\"\nimport { useSaasflareProps, type SaasflareComponentProps } from \"@saasflare/ui\"\nimport { useSaasflareMotion } from \"@saasflare/ui\"\n\n/** Props for the GlowingEffect component. */\nexport interface GlowingEffectProps\n  extends Omit<React.ComponentProps<\"div\">, keyof SaasflareComponentProps>,\n    SaasflareComponentProps {\n  /** Glow color. Default: `\"var(--primary)\"` */\n  color?: string\n  /** Glow spread diameter in pixels. Default: `150` */\n  spread?: number\n  /** Blur radius in pixels. Default: `20` */\n  blur?: number\n  /** Glow opacity (0–1). Default: `0.4` */\n  opacity?: number\n  /** Border radius to match parent (CSS value). Default: `\"inherit\"` */\n  borderRadius?: string\n}\n\n/**\n * Mouse-following glow effect for container borders.\n *\n * - Tracks mouse position and renders a radial gradient at cursor\n * - Only glows along the border (uses inset mask to hollow out center)\n * - Fades out when the mouse leaves\n * - Renders nothing when motion is disabled (reduced motion or `animated={false}`)\n *\n * @component\n * @package ui\n */\nexport function GlowingEffect({\n  color = \"var(--primary)\",\n  spread = 150,\n  blur = 20,\n  opacity = 0.4,\n  borderRadius = \"inherit\",\n  surface,\n  radius,\n  animated,\n  iconWeight,\n  className,\n  style,\n  ...rest\n}: GlowingEffectProps) {\n  const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n  const motion = useSaasflareMotion(sf.animated)\n  // The overlay below is `pointer-events-none`, so it can never be the pointer\n  // target. Track the cursor on the positioned parent the overlay covers\n  // instead (captured via the ref callback during commit, before effects run).\n  const parentRef = useRef<HTMLElement | null>(null)\n  const glowRef = useRef<HTMLDivElement>(null)\n  const rectRef = useRef<DOMRect | null>(null)\n  const [hovered, setHovered] = useState(false)\n\n  const captureParent = useCallback((node: HTMLDivElement | null) => {\n    parentRef.current = node?.parentElement ?? null\n  }, [])\n\n  /* Hot path stays out of React: cursor position is written as CSS variables\n   * on the glow layer (no per-frame re-render), and the parent rect is cached\n   * for the hover duration instead of a forced-layout gBCR per mousemove. */\n  useEffect(() => {\n    const parent = parentRef.current\n    if (!parent || motion.disabled) return\n    const invalidate = () => {\n      rectRef.current = null\n    }\n    const onEnter = () => {\n      rectRef.current = null\n      setHovered(true)\n    }\n    const onLeave = () => setHovered(false)\n    const onMove = (e: MouseEvent) => {\n      const glow = glowRef.current\n      if (!glow) return\n      const rect = rectRef.current ?? (rectRef.current = parent.getBoundingClientRect())\n      glow.style.setProperty(\"--glow-x\", `${e.clientX - rect.left}px`)\n      glow.style.setProperty(\"--glow-y\", `${e.clientY - rect.top}px`)\n    }\n    parent.addEventListener(\"mouseenter\", onEnter)\n    parent.addEventListener(\"mouseleave\", onLeave)\n    parent.addEventListener(\"mousemove\", onMove, { passive: true })\n    window.addEventListener(\"scroll\", invalidate, { passive: true, capture: true })\n    window.addEventListener(\"resize\", invalidate, { passive: true })\n    return () => {\n      parent.removeEventListener(\"mouseenter\", onEnter)\n      parent.removeEventListener(\"mouseleave\", onLeave)\n      parent.removeEventListener(\"mousemove\", onMove)\n      window.removeEventListener(\"scroll\", invalidate, { capture: true })\n      window.removeEventListener(\"resize\", invalidate)\n    }\n  }, [motion.disabled])\n\n  if (motion.disabled) return null\n\n  return (\n    <div\n      ref={captureParent}\n      className={cn(\"pointer-events-none absolute inset-0\", className)}\n      style={{ borderRadius, ...style }}\n      aria-hidden=\"true\"\n      data-slot=\"glowing-effect\"\n      data-surface={sf.surface}\n      data-radius={sf.radius}\n      data-animated={String(sf.animated)}\n      {...rest}\n    >\n      <div\n        ref={glowRef}\n        className=\"absolute inset-0 transition-opacity duration-300\"\n        style={{\n          opacity: hovered ? opacity : 0,\n          background: `radial-gradient(${spread}px circle at var(--glow-x, 50%) var(--glow-y, 50%), ${color}, transparent 70%)`,\n          filter: `blur(${blur}px)`,\n          borderRadius,\n          /* Mask to show glow only on borders, not fill */\n          maskImage: `\n            linear-gradient(black, black),\n            linear-gradient(black, black)\n          `,\n          maskComposite: \"exclude\",\n          WebkitMaskComposite: \"xor\",\n          maskClip: \"border-box, content-box\",\n          WebkitMaskClip: \"border-box, content-box\",\n          padding: \"2px\",\n        }}\n      />\n    </div>\n  )\n}\n",
      "target": "components/ui/glowing-effect.tsx"
    }
  ],
  "$meta": {
    "source": "https://ui.saasflare.io/r/glowing-effect.json"
  }
}