border-beam

1"use client"
2 
3import { motion } from "framer-motion"
4import { cn } from "@/lib/utils"
5 
6interface BorderBeamProps {
7  className?: string
8  size?: number
9  duration?: number
10  borderWidth?: number
11  anchor?: number
12  colorFrom?: string
13  colorTo?: string
14  delay?: number
15}
16 
17export function BorderBeam({
18  className,
19  size = 200,
20  duration = 15,
21  anchor = 90,
22  borderWidth = 1.5,
23  colorFrom = "#ffaa40",
24  colorTo = "#9c40ff",
25  delay = 0,
26}: BorderBeamProps) {
27  return (
28    <div
29      style={
30        {
31          "--border-width": `${borderWidth}px`,
32        } as React.CSSProperties
33      }
34      className={cn(
35        "pointer-events-none absolute inset-0 rounded-[inherit] [border:var(--border-width)_solid_transparent]",
36        "![mask-clip:padding-box,border-box] ![mask-composite:intersect] [mask:linear-gradient(transparent,transparent),linear-gradient(white,white)]",
37        className
38      )}
39    >
40      <motion.div
41        style={{
42          width: size,
43          height: size,
44          background: `linear-gradient(to left, ${colorFrom}, ${colorTo}, transparent)`,
45          offsetPath: `rect(0 auto auto 0 round ${size}px)`,
46          offsetAnchor: `${anchor}% 50%`,
47        }}
48        initial={{ offsetDistance: "0%" }}
49        animate={{ offsetDistance: "100%" }}
50        transition={{
51          duration,
52          delay,
53          repeat: Infinity,
54          ease: "linear",
55        }}
56        className="absolute aspect-square"
57      />
58    </div>
59  )
60}