border-beam

1"use client";
2 
3import { cn } from "@/lib/utils";
4 
5interface BorderBeamProps {
6    className?: string;
7    size?: number;
8    duration?: number;
9    borderWidth?: number;
10    anchor?: number;
11    colorFrom?: string;
12    colorTo?: string;
13    delay?: number;
14}
15 
16export const BorderBeam = ({
17    className,
18    size = 200,
19    duration = 15,
20    anchor = 90,
21    borderWidth = 1.5,
22    colorFrom = "#ffaa40",
23    colorTo = "#9c40ff",
24    delay = 0,
25}: BorderBeamProps) => {
26    return (
27        <>
28            <style jsx>{`
29        @keyframes border-beam {
30          100% {
31            offset-distance: 100%;
32          }
33        }
34      `}</style>
35            <div
36                style={
37                    {
38                        "--size": size,
39                        "--duration": duration,
40                        "--anchor": anchor,
41                        "--border-width": borderWidth,
42                        "--color-from": colorFrom,
43                        "--color-to": colorTo,
44                        "--delay": delay,
45                    } as React.CSSProperties
46                }
47                className={cn(
48                    "absolute inset-[0] rounded-[inherit] [border:calc(var(--border-width)*1px)_solid_transparent]",
49                    "![mask-clip:padding-box,border-box] ![mask-composite:intersect] [mask:linear-gradient(transparent,transparent),linear-gradient(white,white)]",
50                    "after:absolute after:aspect-square after:w-[calc(var(--size)*1px)] after:[animation:border-beam_calc(var(--duration)*1s)_infinite_linear] after:[animation-delay:var(--delay)s] after:[background:linear-gradient(to_left,var(--color-from),var(--color-to),transparent)] after:[offset-anchor:calc(var(--anchor)*1%)_50%] after:[offset-path:rect(0_auto_auto_0_round_calc(var(--size)*1px))]",
51                    className,
52                )}
53            />
54        </>
55    );
56};