Neon Gradient Card

1<script lang="ts">
2	import { onMount } from "svelte";
3	import { cn } from "$UTILS$";
4	import type { Snippet } from "svelte";
5 
6	interface NeonColorsProps {
7		firstColor: string;
8		secondColor: string;
9	}
10 
11	interface NeonGradientCardProps {
12		children?: Snippet;
13		class?: string;
14		borderSize?: number;
15		borderRadius?: number;
16		neonColors?: NeonColorsProps;
17	}
18 
19	let {
20		class: className,
21		children,
22		borderSize = 2,
23		borderRadius = 20,
24		neonColors = {
25			firstColor: "#ff00aa",
26			secondColor: "#00FFF1",
27		},
28		...props
29	}: NeonGradientCardProps = $props();
30 
31	let containerRef: HTMLDivElement | null = $state(null);
32	let dimensions = $state({ width: 0, height: 0 });
33 
34	const updateDimensions = () => {
35		if (containerRef) {
36			const { offsetWidth, offsetHeight } = containerRef;
37			dimensions = { width: offsetWidth, height: offsetHeight };
38		}
39	};
40 
41	onMount(() => {
42		updateDimensions();
43		window.addEventListener("resize", updateDimensions);
44 
45		return () => {
46			window.removeEventListener("resize", updateDimensions);
47		};
48	});
49 
50	$effect(() => {
51		if (containerRef) {
52			updateDimensions();
53		}
54	});
55 
56	let containerStyle = $derived(`
57    --border-size: ${borderSize}px;
58    --border-radius: ${borderRadius}px;
59    --neon-first-color: ${neonColors.firstColor};
60    --neon-second-color: ${neonColors.secondColor};
61    --card-width: ${dimensions.width}px;
62    --card-height: ${dimensions.height}px;
63    --card-content-radius: ${borderRadius - borderSize}px;
64    --pseudo-element-background-image: linear-gradient(0deg, ${neonColors.firstColor}, ${neonColors.secondColor});
65    --pseudo-element-width: ${dimensions.width + borderSize * 2}px;
66    --pseudo-element-height: ${dimensions.height + borderSize * 2}px;
67    --after-blur: ${dimensions.width / 3}px;
68  `);
69</script>
70 
71<div
72	bind:this={containerRef}
73	style={containerStyle}
74	class={cn("relative z-10 size-full rounded-(--border-radius)", className)}
75	{...props}
76>
77	<div
78		class={cn(
79			"relative size-full min-h-[inherit] rounded-(--card-content-radius) bg-gray-100 p-6",
80			"before:absolute before:-top-(--border-size) before:-left-(--border-size) before:-z-10 before:block",
81			"before:h-(--pseudo-element-height) before:w-(--pseudo-element-width) before:rounded-(--border-radius) before:content-['']",
82			"before:bg-[linear-gradient(0deg,var(--neon-first-color),var(--neon-second-color))] before:bg-size-[100%_200%]",
83			"before:animate-background-position-spin",
84// … truncated