{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "specials-border-beam",
  "type": "registry:component",
  "title": "Border Beam",
  "description": "An animated gradient border effect that travels around a container",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/new-york/animations/specials/border-beam.tsx",
      "content": "\"use client\";\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    radius?: number;\n}\n\nexport function 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    radius = 0,\n}: BorderBeamProps) {\n    return (\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,\n                    \"--radius\": radius,\n                } as React.CSSProperties\n            }\n            className={cn(\n                \"pointer-events-none absolute inset-0 rounded-[inherit] [border:calc(var(--border-width)*1px)_solid_transparent]\",\n                // mask styles\n                \"![mask-clip:padding-box,border-box] ![mask-composite:intersect] [mask:linear-gradient(transparent,transparent),linear-gradient(white,white)]\",\n                // pseudo styles\n                \"after:absolute after:aspect-square after:w-[calc(var(--size)*1px)] after:animate-border-beam after:[animation-delay:calc(var(--delay)*1s)] 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(--radius)*1px))] after:will-change-[offset-distance]\",\n                className,\n            )}\n        />\n    );\n}\n",
      "type": "registry:component"
    }
  ]
}