{
  "name": "border-beam",
  "type": "registry:ui",
  "dependencies": ["framer-motion"],
  "registryDependencies": [],
  "description": "A moving gradient beam that travels along the border of its container.",
  "files": [
    {
      "path": "components/ui/border-beam.tsx",
      "content": "\"use client\"\n\nimport { motion } from \"framer-motion\"\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 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}: BorderBeamProps) {\n  return (\n    <div\n      style={\n        {\n          \"--border-width\": `${borderWidth}px`,\n        } as React.CSSProperties\n      }\n      className={cn(\n        \"pointer-events-none absolute inset-0 rounded-[inherit] [border:var(--border-width)_solid_transparent]\",\n        \"![mask-clip:padding-box,border-box] ![mask-composite:intersect] [mask:linear-gradient(transparent,transparent),linear-gradient(white,white)]\",\n        className\n      )}\n    >\n      <motion.div\n        style={{\n          width: size,\n          height: size,\n          background: `linear-gradient(to left, ${colorFrom}, ${colorTo}, transparent)`,\n          offsetPath: `rect(0 auto auto 0 round ${size}px)`,\n          offsetAnchor: `${anchor}% 50%`,\n        }}\n        initial={{ offsetDistance: \"0%\" }}\n        animate={{ offsetDistance: \"100%\" }}\n        transition={{\n          duration,\n          delay,\n          repeat: Infinity,\n          ease: \"linear\",\n        }}\n        className=\"absolute aspect-square\"\n      />\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ]
}