{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "border-beam",
  "type": "registry:ui",
  "title": "Border Beam",
  "description": "Animated beam of light traveling along the border of a container.",
  "files": [
    {
      "path": "registry/new-york/effects/border-beam.tsx",
      "content": "\"use client\"\n\nimport { useGlobalStyles } from \"@/hooks/use-global-styles\"\nimport { cn } from \"@/lib/utils\"\n\nconst BORDER_BEAM_STYLES = `\n@keyframes border-beam-spin {\n  from {\n    --angle: 0deg;\n  }\n  to {\n    --angle: 360deg;\n  }\n}\n\n@property --angle {\n  syntax: \"<angle>\";\n  initial-value: 0deg;\n  inherits: false;\n}\n`\n\ninterface BorderBeamProps {\n  className?: string\n  size?: number\n  duration?: number\n  delay?: number\n  colorFrom?: string\n  colorTo?: string\n  borderWidth?: number\n  /** Match iOS-style squircle corners (requires Chrome 139+) */\n  squircle?: boolean\n}\n\nexport function BorderBeam({\n  className,\n  size = 200,\n  duration = 12,\n  delay = 0,\n  colorFrom = \"#ffaa40\",\n  colorTo = \"#9c40ff\",\n  borderWidth = 1.5,\n  squircle = false,\n}: BorderBeamProps) {\n  useGlobalStyles(BORDER_BEAM_STYLES, \"border-beam-styles\")\n\n  const squircleStyle = squircle\n    ? ({ cornerShape: \"squircle\" } as React.CSSProperties)\n    : {}\n\n  return (\n    <div\n      className={cn(\n        \"pointer-events-none absolute inset-0 rounded-[inherit]\",\n        className,\n      )}\n      style={\n        {\n          \"--size\": size,\n          \"--duration\": `${duration}s`,\n          \"--delay\": `-${delay}s`,\n          \"--color-from\": colorFrom,\n          \"--color-to\": colorTo,\n          \"--border-width\": `${borderWidth}px`,\n          ...squircleStyle,\n        } as React.CSSProperties\n      }\n    >\n      <div\n        className=\"absolute inset-0 rounded-[inherit]\"\n        style={\n          {\n            padding: \"var(--border-width)\",\n            background: `\n            linear-gradient(\n              var(--angle, 0deg),\n              transparent 0%,\n              transparent 35%,\n              var(--color-from) 50%,\n              var(--color-to) 65%,\n              transparent 80%,\n              transparent 100%\n            )\n          `,\n            mask: \"linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)\",\n            maskComposite: \"exclude\",\n            WebkitMask:\n              \"linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)\",\n            WebkitMaskComposite: \"xor\",\n            animation: `border-beam-spin var(--duration) linear infinite var(--delay)`,\n            ...squircleStyle,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ]
}