Shiny Button

1<script lang="ts">
2	import { motion, type MotionProps, type Transition } from "motion-sv";
3	import { cn } from "$UTILS$";
4	import type { Snippet } from "svelte";
5	import type { HTMLButtonAttributes } from "svelte/elements";
6 
7	interface ShinyButtonProps extends HTMLButtonAttributes {
8		children: Snippet;
9		class?: string;
10	}
11 
12	let { children, class: className, ...props }: ShinyButtonProps = $props();
13 
14	let animationProps: MotionProps = {
15		initial: { "--x": "100%", scale: 0.8 },
16		animate: { "--x": "-100%", scale: 1 },
17		// whileTap: { scale: 0.95 },
18		whilePress: { scale: 0.95 },
19		transition: {
20			repeat: Infinity,
21			repeatType: "loop",
22			repeatDelay: 1,
23			type: "spring",
24			stiffness: 20,
25			damping: 15,
26			mass: 2,
27			scale: {
28				type: "spring",
29				stiffness: 200,
30				damping: 5,
31				mass: 0.5,
32			},
33		},
34	};
35</script>
36 
37<motion.button
38	class={cn(
39		"relative cursor-pointer rounded-lg border px-6 py-2 font-medium backdrop-blur-xl transition-shadow duration-300 ease-in-out hover:shadow dark:bg-[radial-gradient(circle_at_50%_0%,var(--primary)/10%_0%,transparent_60%)] dark:hover:shadow-[0_0_20px_var(--primary)/10%]",
40		className
41	)}
42	{...animationProps}
43>
44	<span
45		class="relative block size-full text-sm tracking-wide text-[rgb(0,0,0,65%)] uppercase dark:font-light dark:text-[rgb(255,255,255,90%)]"
46		style="mask-image: linear-gradient(-75deg,var(--primary) calc(var(--x) + 20%),transparent calc(var(--x) + 30%),var(--primary) calc(var(--x) + 100%));"
47	>
48		{@render children()}
49	</span>
50	<span
51		style="mask: linear-gradient(rgb(0,0,0), rgb(0,0,0)) content-box exclude,linear-gradient(rgb(0,0,0), rgb(0,0,0));
52		-webkit-mask: linear-gradient(rgb(0,0,0), rgb(0,0,0)) content-box exclude,linear-gradient(rgb(0,0,0), rgb(0,0,0));
53		background-image: linear-gradient(-75deg,var(--primary)/10% calc(var(--x)+20%),var(--primary)/50% calc(var(--x)+25%),var(--primary)/10% calc(var(--x)+100%))"
54		class="absolute inset-0 z-10 block rounded-[inherit] p-px"
55	>
56	</span>
57</motion.button>