progressive-blur

1<script lang="ts">
2	import { cn } from "$UTILS$";
3 
4	export const GRADIENT_ANGLES = {
5		top: 0,
6		right: 90,
7		bottom: 180,
8		left: 270,
9	};
10 
11	type ProgressiveBlurProps = {
12		direction?: keyof typeof GRADIENT_ANGLES;
13		blurLayers?: number;
14		class?: string;
15		blurIntensity?: number;
16	};
17 
18	let {
19		direction = "bottom",
20		blurLayers = 8,
21		class: _class = "",
22		blurIntensity = 0.25,
23	}: ProgressiveBlurProps = $props();
24 
25	let layers = $derived(Math.max(blurLayers, 2));
26	let segmentSize = $derived(1 / (blurLayers + 1));
27</script>
28 
29<div class={cn("relative", _class)}>
30	{#each { length: layers } as _, index}
31		{@const angle = GRADIENT_ANGLES[direction]}
32		{@const gradientStops = [
33			index * segmentSize,
34			(index + 1) * segmentSize,
35			(index + 2) * segmentSize,
36			(index + 3) * segmentSize,
37		].map(
38			(pos, posIndex) =>
39				`rgba(255, 255, 255, ${posIndex === 1 || posIndex === 2 ? 1 : 0}) ${pos * 100}%`
40		)}
41		{@const gradient = `linear-gradient(${angle}deg, ${gradientStops.join(", ")})`}
42 
43		<div
44			class="pointer-events-none absolute inset-0 rounded-[inherit]"
45			style="mask-image: {gradient};
46  -webkit-mask-image: {gradient};
47  backdrop-filter: blur({index * blurIntensity}px); z-index: {index * 10};"
48		></div>
49	{/each}
50</div>