Shimmer Button

1<script lang="ts">
2	import { cn } from "$UTILS$";
3	import type { Snippet } from "svelte";
4	import type { HTMLButtonAttributes } from "svelte/elements";
5 
6	interface ShimmerButtonProps extends HTMLButtonAttributes {
7		children: Snippet;
8		class?: string;
9		shimmerColor?: string;
10		shimmerSize?: string;
11		borderRadius?: string;
12		shimmerDuration?: string;
13		background?: string;
14	}
15 
16	let {
17		children,
18		class: className,
19		shimmerColor = "#ffffff",
20		shimmerSize = "0.05em",
21		shimmerDuration = "3s",
22		borderRadius = "100px",
23		background = "rgba(0, 0, 0, 1)",
24		...props
25	}: ShimmerButtonProps = $props();
26</script>
27 
28<button
29	style="
30	--spread: 90deg;
31	--shimmer-color: {shimmerColor};
32	--radius: {borderRadius};
33	--speed: {shimmerDuration};
34	--cut: {shimmerSize};
35	--bg: {background};
36	"
37	class={cn(
38		"group relative z-0 flex cursor-pointer items-center justify-center overflow-hidden [border-radius:var(--radius)] border border-white/10 px-6 py-3 whitespace-nowrap text-white [background:var(--bg)]",
39		"transform-gpu transition-transform duration-300 ease-in-out active:translate-y-px",
40		className
41	)}
42	{...props}
43>
44	<!-- spark container -->
45	<div class={cn("-z-30 blur-[2px]", "@container-[size] absolute inset-0 overflow-visible")}>
46		<!-- spark -->
47		<div
48			class="animate-shimmer-slide absolute inset-0 aspect-[1] h-[100cqh] rounded-none [mask:none]"
49		>
50			<!-- spark before -->
51			<div
52				class="animate-spin-around absolute -inset-full w-auto [translate:0_0] rotate-0 [background:conic-gradient(from_calc(270deg-(var(--spread)*0.5)),transparent_0,var(--shimmer-color)_var(--spread),transparent_var(--spread))]"
53			></div>
54		</div>
55	</div>
56	{@render children()}
57 
58	<!-- Highlight -->
59	<div
60		class={cn(
61			"absolute inset-0 size-full",
62 
63			"rounded-2xl px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#ffffff1f]",
64 
65			// transition
66			"transform-gpu transition-all duration-300 ease-in-out",
67 
68			// on hover
69			"group-hover:shadow-[inset_0_-6px_10px_#ffffff3f]",
70 
71			// on click
72			"group-active:shadow-[inset_0_-10px_10px_#ffffff3f]"
73		)}
74	></div>
75 
76	<!-- backdrop -->
77	<div
78		class={cn(
79			"absolute inset-(--cut) -z-20 [border-radius:var(--radius)] [background:var(--bg)]"
80		)}
81	></div>
82</button>