{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "border-beam",
  "title": "Border Beam",
  "description": "A light that travels around a card's border.",
  "dependencies": [],
  "registryDependencies": [
    "utils",
    "https://ui.cuelark.com/r/theme.json",
    "https://ui.cuelark.com/r/motion.json"
  ],
  "files": [
    {
      "path": "src/registry/cuelark/ui/border-beam.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { gsap, motionScale, useGSAP } from \"@/lib/motion\";\nimport { cn } from \"@/lib/utils\";\n\ntype BorderBeamProps = React.ComponentProps<\"div\"> & {\n  /** Seconds per lap. */\n  duration?: number;\n  /** Beam color; defaults to the signal token. */\n  color?: string;\n  /** Beam length as a fraction of the border (0–1). */\n  size?: number;\n};\n\n/**\n * A light that travels around the border of its parent (absolutely positioned; give the parent `relative`\n * and a radius). A conic gradient masked to a 1.5px ring, rotated by GSAP through a registered angle.\n */\nfunction BorderBeam({ className, duration = 6, color = \"var(--signal)\", size = 0.18, style, ...props }: BorderBeamProps) {\n  const ref = React.useRef<HTMLDivElement>(null);\n\n  useGSAP(\n    () => {\n      const el = ref.current;\n      if (!el || !motionScale(el)) return;\n      gsap.fromTo(el, { \"--beam-angle\": \"0deg\" }, { \"--beam-angle\": \"360deg\", duration, ease: \"none\", repeat: -1 });\n    },\n    { scope: ref, dependencies: [duration] },\n  );\n\n  const sweep = Math.round(size * 360);\n  return (\n    <div\n      ref={ref}\n      aria-hidden=\"true\"\n      data-slot=\"border-beam\"\n      className={cn(\n        \"pointer-events-none absolute -inset-px rounded-[inherit] p-[1.5px]\",\n        className,\n      )}\n      style={{\n        background: `conic-gradient(from var(--beam-angle, 0deg), transparent 0deg, color-mix(in oklch, ${color}, transparent 100%) ${sweep * 0.1}deg, ${color} ${sweep * 0.8}deg, transparent ${sweep}deg)`,\n        // Only the 1.5px ring between border-box and content-box shows: the content box is cut out.\n        mask: \"linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0)\",\n        WebkitMask: \"linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)\",\n        WebkitMaskComposite: \"xor\",\n        ...style,\n      }}\n      {...props}\n    />\n  );\n}\n\nexport { BorderBeam };\nexport type { BorderBeamProps };\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Docs and examples: https://ui.cuelark.com/components/border-beam",
  "categories": [
    "effects"
  ],
  "type": "registry:ui"
}