Border Beam

1"use client"
2 
3import * as React from "react"
4import { motion } from "motion/react"
5import { cn } from "@/registry/wise-ui/lib/utils"
6 
7interface BorderBeamProps {
8  size?: number
9  duration?: number
10  delay?: number
11  color?: string
12  className?: string
13}
14 
15function BorderBeam({
16  size = 80,
17  duration = 6,
18  delay = 0,
19  color = "hsl(var(--primary))",
20  className,
21}: BorderBeamProps) {
22  return (
23    <div
24      className={cn(
25        "pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit]",
26        className
27      )}
28    >
29      <motion.div
30        className="absolute inset-0"
31        style={{
32          background: `conic-gradient(from 0deg, transparent 0%, transparent 70%, ${color} 85%, transparent 100%)`,
33          width: "200%",
34          height: "200%",
35          left: "-50%",
36          top: "-50%",
37        }}
38        animate={{ rotate: 360 }}
39        transition={{
40          duration,
41          delay,
42          repeat: Infinity,
43          ease: "linear",
44        }}
45      />
46      {/* Inner mask to show only the border strip */}
47      <div className="absolute inset-[1.5px] rounded-[inherit] bg-background" />
48    </div>
49  )
50}
51BorderBeam.displayName = "BorderBeam"
52 
53export { BorderBeam }
54export type { BorderBeamProps }