Spotlight Card

1<script lang="ts">
2	import { cn } from '$UTILS$';
3	import type { Snippet } from 'svelte';
4	import type { HTMLAttributes } from 'svelte/elements';
5 
6	type Props = HTMLAttributes<HTMLDivElement> & {
7		children: Snippet;
8		color?: string;
9		size?: number;
10	};
11 
12	let { class: className, children, color, size = 350, ...rest }: Props = $props();
13 
14	let div: HTMLDivElement;
15	let opacity = $state(0);
16	let position = $state({ x: 0, y: 0 });
17 
18	const handleMouseMove = (e: MouseEvent) => {
19		if (!div) return;
20		const rect = div.getBoundingClientRect();
21		position = { x: e.clientX - rect.left, y: e.clientY - rect.top };
22	};
23</script>
24 
25<div
26	bind:this={div}
27	onmousemove={handleMouseMove}
28	onmouseenter={() => (opacity = 1)}
29	onmouseleave={() => (opacity = 0)}
30	class={cn(
31		'relative overflow-hidden rounded-xl border bg-card text-card-foreground shadow-sm',
32		className
33	)}
34	{...rest}
35>
36	<div
37		class={cn(
38			'pointer-events-none absolute inset-0 transition-opacity duration-300',
39			!color && 'bg-black/10 dark:bg-white/10'
40		)}
41		style="
42            opacity: {opacity};
43            {color ? `background-color: ${color};` : ''}
44            mask-image: radial-gradient(
45                {size}px circle at {position.x}px {position.y}px,
46                black,
47                transparent
48            );
49            -webkit-mask-image: radial-gradient(
50                {size}px circle at {position.x}px {position.y}px,
51                black,
52                transparent
53            );
54        "
55	></div>
56 
57	<div class="relative h-full">
58		{@render children()}
59	</div>
60</div>