{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "border-beam",
  "type": "registry:component",
  "title": "Border beam",
  "description": "Wrap any card with a beam of light that travels around its border. A masked conic gradient in your accent colors, with pricing card demo, pauses for reduced motion.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/border-beam.tsx",
      "type": "registry:ui",
      "target": "components/ui/border-beam.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\n/**\n * A short beam of light that travels around the border of any box. Wrap a\n * card, input or pricing tier with it to mark the one thing that matters.\n * The beam is a rotating conic gradient masked to the border ring, so the\n * content inside is untouched.\n */\ntype BorderBeamProps = {\n  children?: React.ReactNode\n  /** Seconds per lap. */\n  duration?: number\n  /** Border width in pixels. */\n  width?: number\n  /** Beam length, as a fraction of the lap. */\n  length?: number\n  radius?: number\n  className?: string\n}\n\nfunction BorderBeam({ children, duration = 6, width = 1.5, length = 0.18, radius = 18, className }: BorderBeamProps) {\n  const reduce = useReducedMotion()\n  const deg = Math.round(length * 360)\n  return (\n    <div data-slot=\"border-beam\" className={cn(\"relative isolate w-fit max-w-full\", className)} style={{ borderRadius: radius }}>\n      <span\n        aria-hidden\n        className=\"pointer-events-none absolute inset-0 z-10\"\n        style={{\n          borderRadius: radius,\n          padding: width,\n          WebkitMask: \"linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0)\",\n          mask: \"linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0)\",\n        }}\n      >\n        <span\n          className=\"absolute top-1/2 left-1/2 aspect-square w-[160%] -translate-x-1/2 -translate-y-1/2\"\n          style={{\n            background: `conic-gradient(from 0deg, transparent 0deg, transparent ${360 - deg}deg, var(--accent-2) ${360 - deg * 0.6}deg, var(--accent) 356deg, transparent 360deg)`,\n            animation: reduce ? undefined : `border-beam-spin ${duration}s linear infinite`,\n          }}\n        />\n      </span>\n      {children ?? (\n        <div className=\"w-[340px] max-w-full rounded-[inherit] border border-border bg-surface p-6 shadow-raised\">\n          <p className=\"text-[12px] font-medium tracking-[0.06em] text-accent-fg uppercase\">Most popular</p>\n          <p className=\"mt-2 text-3xl font-medium tracking-[-0.04em] text-fg tabular-nums\">$24<span className=\"text-base text-fg-muted\"> / month</span></p>\n          <p className=\"mt-2 text-sm leading-[1.6] text-fg-muted\">Everything in Starter, plus unlimited projects and priority support.</p>\n        </div>\n      )}\n      <style>{`@keyframes border-beam-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}`}</style>\n    </div>\n  )\n}\n\nexport { BorderBeam }\nexport type { BorderBeamProps }\n"
    }
  ]
}