Ripple

1<script lang="ts">
2	import { cn } from "$UTILS$";
3	import type { HTMLAttributes } from "svelte/elements";
4 
5	interface RippleProps extends HTMLAttributes<HTMLDivElement> {
6		mainCircleSize?: number;
7		mainCircleOpacity?: number;
8		numCircles?: number;
9		class?: string;
10	}
11 
12	let {
13		mainCircleSize = 210,
14		mainCircleOpacity = 0.24,
15		numCircles = 8,
16		class: className,
17		...props
18	}: RippleProps = $props();
19</script>
20 
21<div
22	class={cn(
23		"pointer-events-none absolute inset-0 mask-[linear-gradient(to_bottom,white,transparent)] select-none",
24		className
25	)}
26	{...props}
27>
28	{#each Array.from({ length: numCircles }) as _, i}
29		{@const size = mainCircleSize + i * 70}
30		{@const opacity = mainCircleOpacity - i * 0.03}
31		{@const animationDelay = `${i * 0.06}s`}
32		<div
33			class="animate-ripple bg-foreground/25 absolute rounded-full border shadow-xl"
34			style="
35				--i: {i};
36				width: {size}px;
37				height: {size}px;
38				opacity: {opacity};
39				animation-delay: {animationDelay};
40				border-style: solid;
41				border-width: 1px;
42				border-color: var(--foreground);
43				top: 50%;
44				left: 50%;
45				transform: translate(-50%, -50%) scale(1);"
46		></div>
47	{/each}
48</div>
49 
50<!--
51style:--i={i}
52			style:width="{size}px"
53			style:height="{size}px"
54			style:opacity
55			style:animation-delay={animationDelay}
56			style:border-style="solid"
57			style:border-width="1px"
58			style:border-color="var(--foreground)"
59			style:top="50%"
60			style:left="50%"
61			style:transform="translate(-50%, -50%) scale(1)"
62 -->