Glare Hover

1<script lang="ts">
2	import type { Snippet } from "svelte";
3	import type { HTMLAttributes } from "svelte/elements";
4	import { cn } from "$UTILS$";
5 
6	type Color = `#${string}`;
7	type RGBA = `rgba(${number},${number},${number},${number})`;
8 
9	interface GlareHoverProps extends HTMLAttributes<HTMLDivElement> {
10		children?: Snippet;
11		width?: string;
12		height?: string;
13		background?: string;
14		color?: Color;
15		opacity?: number;
16		angle?: number;
17		size?: number;
18		duration?: number;
19		playOnce?: boolean;
20	}
21 
22	function parseHEX(color: Color, opacity: number): RGBA | Color {
23		const hex = color.replace("#", "");
24		const parse = (h: string) => Number.parseInt(h, 16);
25 
26		if (/^[0-9A-Fa-f]{6}$/.test(hex)) {
27			return `rgba(${parse(hex.slice(0, 2))},${parse(hex.slice(2, 4))},${parse(hex.slice(4, 6))},${opacity})`;
28		}
29 
30		if (/^[0-9A-Fa-f]{3}$/.test(hex)) {
31			return `rgba(${parse(hex[0] + hex[0])},${parse(hex[1] + hex[1])},${parse(hex[2] + hex[2])},${opacity})`;
32		}
33 
34		return color;
35	}
36 
37	let {
38		children,
39		width,
40		height,
41		background = "#000",
42		color = "#ffffff",
43		opacity = 0.5,
44		angle = -45,
45		size = 250,
46		duration = 650,
47		playOnce = false,
48		class: className,
49		style: styleProp,
50		...restProps
51	}: GlareHoverProps = $props();
52 
53	const rgba = $derived(parseHEX(color, opacity));
54	const rootStyle = $derived(
55		[
56			`--gh-angle: ${angle}deg`,
57			`--gh-duration: ${duration}ms`,
58			`--gh-size: ${size}%`,
59			`--gh-rgba: ${rgba}`,
60			`background: ${background}`,
61			styleProp,
62			width !== undefined ? `width: ${width}` : undefined,
63			height !== undefined ? `height: ${height}` : undefined,
64		]
65			.filter(
66				(value): value is string => value !== undefined && value !== null && value !== ""
67			)
68			.join("; ")
69	);
70</script>
71 
72<div
73	class={cn(
74		"relative grid size-fit cursor-pointer place-items-center overflow-hidden bg-transparent",
75		"before:pointer-events-none before:absolute before:inset-0 before:z-10 before:bg-no-repeat before:content-['']",
76		"before:bg-[linear-gradient(var(--gh-angle),transparent_60%,var(--gh-rgba)_70%,transparent,transparent_100%)]",
77		"before:bg-size-[var(--gh-size)_var(--gh-size),100%_100%]",
78		"before:bg-position-[-100%_-100%,0_0]",
79		!playOnce &&
80			"before:transition-[background-position] before:duration-(--gh-duration) before:ease-in-out",
81		playOnce &&
82			"before:transition-none hover:before:transition-[background-position] hover:before:duration-(--gh-duration)",
83		"hover:before:bg-position-[100%_100%,0_0]",
84		className
85	)}
86// … truncated