2024-06-15 14:55:33 +02:00
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
|
|
|
|
|
|
interface BorderBeamProps {
|
|
|
|
|
className?: string;
|
|
|
|
|
size?: number;
|
|
|
|
|
duration?: number;
|
|
|
|
|
borderWidth?: number;
|
|
|
|
|
anchor?: number;
|
|
|
|
|
colorFrom?: string;
|
|
|
|
|
colorTo?: string;
|
|
|
|
|
delay?: number;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export const BorderBeam = ({
|
|
|
|
|
className,
|
|
|
|
|
size = 200,
|
|
|
|
|
duration = 15,
|
|
|
|
|
anchor = 90,
|
|
|
|
|
borderWidth = 1.5,
|
|
|
|
|
colorFrom = "#8803AF",
|
|
|
|
|
colorTo = "#61DAFB",
|
2024-09-07 09:12:48 +02:00
|
|
|
delay = 0
|
2024-06-15 14:55:33 +02:00
|
|
|
}: BorderBeamProps) => {
|
|
|
|
|
return (
|
|
|
|
|
<div
|
|
|
|
|
style={
|
|
|
|
|
{
|
|
|
|
|
"--size": size,
|
|
|
|
|
"--duration": duration,
|
|
|
|
|
"--anchor": anchor,
|
|
|
|
|
"--border-width": borderWidth,
|
|
|
|
|
"--color-from": colorFrom,
|
|
|
|
|
"--color-to": colorTo,
|
2024-09-07 09:12:48 +02:00
|
|
|
"--delay": `-${delay}s`
|
2024-06-15 14:55:33 +02:00
|
|
|
} as React.CSSProperties
|
|
|
|
|
}
|
|
|
|
|
className={cn(
|
|
|
|
|
"absolute inset-[0] rounded-[inherit] [border:calc(var(--border-width)*1px)_solid_transparent] opacity-10",
|
|
|
|
|
|
|
|
|
|
// mask styles
|
|
|
|
|
"![mask-clip:padding-box,border-box] ![mask-composite:intersect] [mask:linear-gradient(transparent,transparent),linear-gradient(white,white)]",
|
|
|
|
|
|
|
|
|
|
// pseudo styles
|
|
|
|
|
"after:absolute after:aspect-square after:w-[calc(var(--size)*1px)] after:animate-border-beam after:[animation-delay:var(--delay)] 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))]",
|
|
|
|
|
className
|
|
|
|
|
)}
|
|
|
|
|
/>
|
|
|
|
|
);
|
|
|
|
|
};
|
