Progressive Blur

1<script lang="ts">
2	import { cn } from "$UTILS$";
3	import type { HTMLAttributes } from "svelte/elements";
4 
5	interface ProgressiveBlurProps extends HTMLAttributes<HTMLDivElement> {
6		/**
7		 * Additional CSS classes
8		 */
9		class?: string;
10		/**
11		 * Height of the blur area
12		 */
13		height?: string;
14		/**
15		 * Position of the blur effect
16		 */
17		position?: "top" | "bottom" | "both";
18		/**
19		 * Array of blur levels in pixels
20		 */
21		blurLevels?: number[];
22	}
23 
24	let {
25		class: className,
26		height = "30%",
27		position = "bottom",
28		blurLevels = [0.5, 1, 2, 4, 8, 16, 32, 64],
29		...props
30	}: ProgressiveBlurProps = $props();
31 
32	// Create array with length equal to blurLevels.length - 2 (for before/after pseudo elements)
33	const divElements = $derived(Array(blurLevels.length - 2).fill(null));
34 
35	const getMaskGradient = (index: number) => {
36		const blurIndex = index + 1;
37		const startPercent = blurIndex * 12.5;
38		const midPercent = (blurIndex + 1) * 12.5;
39		const endPercent = (blurIndex + 2) * 12.5;
40 
41		if (position === "bottom") {
42			return `linear-gradient(to bottom, rgba(0,0,0,0) ${startPercent}%, rgba(0,0,0,1) ${midPercent}%, rgba(0,0,0,1) ${endPercent}%, rgba(0,0,0,0) ${endPercent + 12.5}%)`;
43		} else if (position === "top") {
44			return `linear-gradient(to top, rgba(0,0,0,0) ${startPercent}%, rgba(0,0,0,1) ${midPercent}%, rgba(0,0,0,1) ${endPercent}%, rgba(0,0,0,0) ${endPercent + 12.5}%)`;
45		} else {
46			return `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,1) 5%, rgba(0,0,0,1) 95%, rgba(0,0,0,0) 100%)`;
47		}
48	};
49 
50	const getFirstLayerMask = () => {
51		if (position === "bottom") {
52			return `linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12.5%, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 37.5%)`;
53		} else if (position === "top") {
54			return `linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12.5%, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 37.5%)`;
55		} else {
56			return `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,1) 5%, rgba(0,0,0,1) 95%, rgba(0,0,0,0) 100%)`;
57		}
58	};
59 
60	const getLastLayerMask = () => {
61		if (position === "bottom") {
62			return `linear-gradient(to bottom, rgba(0,0,0,0) 87.5%, rgba(0,0,0,1) 100%)`;
63		} else if (position === "top") {
64			return `linear-gradient(to top, rgba(0,0,0,0) 87.5%, rgba(0,0,0,1) 100%)`;
65		} else {
66			return `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,1) 5%, rgba(0,0,0,1) 95%, rgba(0,0,0,0) 100%)`;
67		}
68	};
69</script>
70 
71<div
72	class={cn(
73		"gradient-blur pointer-events-none absolute inset-x-0 z-10",
74		className,
75// … truncated