Border Beam

1<script lang="ts">
2	import { motion, type Transition } from "motion-sv";
3	import { cn } from "$UTILS$";
4 
5	interface BorderBeamProps {
6		size?: number;
7		duration?: number;
8		delay?: number;
9		colorFrom?: string;
10		colorTo?: string;
11		transition?: Transition;
12		class?: string;
13		style?: string;
14		reverse?: boolean;
15		initialOffset?: number;
16		borderWidth?: number;
17	}
18 
19	let {
20		class: className,
21		size = 50,
22		delay = 0,
23		duration = 6,
24		colorFrom = "#ffaa40",
25		colorTo = "#9c40ff",
26		transition,
27		reverse = false,
28		initialOffset = 0,
29		borderWidth = 1,
30	}: BorderBeamProps = $props();
31 
32	const containerStyle = $derived(`--border-beam-width: ${borderWidth}px;`);
33 
34	const beamStyle = $derived({
35		width: size,
36		offsetPath: `rect(0 auto auto 0 round ${size}px)`,
37		"--color-from": colorFrom,
38		"--color-to": colorTo,
39	} as any);
40 
41	const animateConfig = $derived({
42		offsetDistance: reverse
43			? [`${100 - initialOffset}%`, `${-initialOffset}%`]
44			: [`${initialOffset}%`, `${100 + initialOffset}%`],
45	});
46 
47	const transitionConfig = $derived({
48		repeat: Infinity,
49		ease: "linear" as const,
50		duration,
51		delay: -delay,
52		...transition,
53	} as any);
54</script>
55 
56<div
57	class="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]"
58	style={containerStyle}
59>
60	<motion.div
61		class={cn(
62			"absolute aspect-square",
63			"bg-linear-to-l from-(--color-from) via-(--color-to) to-transparent",
64			className
65		)}
66		style={beamStyle}
67		initial={{ offsetDistance: `${initialOffset}%` }}
68		animate={animateConfig}
69		transition={transitionConfig}
70	/>
71</div>