Border Beam

1"use client"
2 
3import { motion, type MotionStyle, type Transition } from "motion/react"
4 
5import { cn } from "@/lib/utils"
6 
7interface BorderBeamProps {
8  /**
9   * The size of the border beam.
10   */
11  size?: number
12  /**
13   * The duration of the border beam.
14   */
15  duration?: number
16  /**
17   * The delay of the border beam.
18   */
19  delay?: number
20  /**
21   * The color of the border beam from.
22   */
23  colorFrom?: string
24  /**
25   * The color of the border beam to.
26   */
27  colorTo?: string
28  /**
29   * The motion transition of the border beam.
30   */
31  transition?: Transition
32  /**
33   * The class name of the border beam.
34   */
35  className?: string
36  /**
37   * The style of the border beam.
38   */
39  style?: React.CSSProperties
40  /**
41   * Whether to reverse the animation direction.
42   */
43  reverse?: boolean
44  /**
45   * The initial offset position (0-100).
46   */
47  initialOffset?: number
48  /**
49   * The border width of the beam.
50   */
51  borderWidth?: number
52}
53 
54export const BorderBeam = ({
55  className,
56  size = 50,
57  delay = 0,
58  duration = 6,
59  colorFrom = "#ffaa40",
60  colorTo = "#9c40ff",
61  transition,
62  style,
63  reverse = false,
64  initialOffset = 0,
65  borderWidth = 1,
66}: BorderBeamProps) => {
67  return (
68    <div
69      className="pointer-events-none absolute inset-0 rounded-[inherit] border-(length:--border-beam-width) border-transparent mask-[linear-gradient(transparent,transparent),linear-gradient(#000,#000)] mask-intersect [mask-clip:padding-box,border-box]"
70      style={
71        {
72          "--border-beam-width": `${borderWidth}px`,
73        } as React.CSSProperties
74      }
75    >
76      <motion.div
77        className={cn(
78          "absolute aspect-square",
79          "bg-linear-to-l from-(--color-from) via-(--color-to) to-transparent",
80          className
81        )}
82        style={
83          {
84            width: size,
85            offsetPath: `rect(0 auto auto 0 round ${size}px)`,
86            "--color-from": colorFrom,
87            "--color-to": colorTo,
88            ...style,
89          } as MotionStyle
90        }
91        initial={{ offsetDistance: `${initialOffset}%` }}
92        animate={{
93          offsetDistance: reverse
94            ? [`${100 - initialOffset}%`, `${-initialOffset}%`]
95            : [`${initialOffset}%`, `${100 + initialOffset}%`],
96        }}
97        transition={{
98          repeat: Infinity,
99          ease: "linear",
100          duration,
101          delay: -delay,
102          ...transition,
103        }}
104      />
105    </div>
106  )
107}