{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "border-beam",
  "title": "Border Beam",
  "description": "An animated beam of light which travels along the border of its container.",
  "files": [
    {
      "path": "registry/reusables/border-beam.tsx",
      "content": "import type { CSSProperties } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface BorderBeamProps {\n  className?: string\n  size?: number\n  duration?: number\n  borderWidth?: number\n  anchor?: number\n  colorFrom?: string\n  colorTo?: string\n  delay?: number\n}\n\nexport const BorderBeam = ({\n  className,\n  size = 200,\n  duration = 15,\n  anchor = 90,\n  borderWidth = 1.5,\n  colorFrom = \"#ffaa40\",\n  colorTo = \"#9c40ff\",\n  delay = 0,\n}: BorderBeamProps) => {\n  return (\n    <>\n      <style>\n        {`\n          @keyframes border-beam {\n            to {\n              offset-distance: 100%;\n            }\n          }\n        `}\n      </style>\n      <div\n        style={\n          {\n            \"--size\": size,\n            \"--duration\": duration,\n            \"--anchor\": anchor,\n            \"--border-width\": borderWidth,\n            \"--color-from\": colorFrom,\n            \"--color-to\": colorTo,\n            \"--delay\": `-${delay}s`,\n          } as CSSProperties\n        }\n        className={cn(\n          \"pointer-events-none absolute inset-0 rounded-[inherit] [border:calc(var(--border-width)*1px)_solid_transparent]\",\n\n          // mask styles\n          \"![mask-composite:intersect] ![mask-clip:padding-box,border-box] [mask:linear-gradient(transparent,transparent),linear-gradient(white,white)]\",\n\n          // pseudo styles\n          \"after:absolute after:aspect-square after:w-[calc(var(--size)*1px)] after:[animation:border-beam_calc(var(--duration)*1s)_infinite_linear] after:[animation-delay:var(--delay)] after:[background:linear-gradient(to_left,var(--color-from),var(--color-to),transparent)] after:[offset-anchor:calc(var(--anchor)*1%)_50%] after:[offset-path:rect(0_auto_auto_0_round_calc(var(--size)*1px))]\",\n          className\n        )}\n      />\n    </>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/border-beam.tsx"
    }
  ],
  "type": "registry:component"
}