Flickering Grid

1<script lang="ts">
2	import { onMount } from "svelte";
3	import { cn } from "$UTILS$";
4 
5	interface FlickeringGridProps {
6		squareSize?: number;
7		gridGap?: number;
8		flickerChance?: number;
9		color?: string;
10		width?: number;
11		height?: number;
12		class?: string;
13		maxOpacity?: number;
14	}
15 
16	let {
17		squareSize = 4,
18		gridGap = 6,
19		flickerChance = 0.3,
20		color = "rgb(0, 0, 0)",
21		width,
22		height,
23		class: className,
24		maxOpacity = 0.3,
25		...props
26	}: FlickeringGridProps = $props();
27 
28	let canvasRef: HTMLCanvasElement | null = $state(null);
29	let containerRef: HTMLDivElement | null = $state(null);
30	let isInView = $state(false);
31	let canvasSize = $state({ width: 0, height: 0 });
32 
33	const memoizedColor = $derived.by(() => {
34		const toRGBA = (color: string) => {
35			if (typeof window === "undefined") {
36				return `rgba(0, 0, 0,`;
37			}
38			const canvas = document.createElement("canvas");
39			canvas.width = canvas.height = 1;
40			const ctx = canvas.getContext("2d");
41			if (!ctx) return "rgba(255, 0, 0,";
42			ctx.fillStyle = color;
43			ctx.fillRect(0, 0, 1, 1);
44			const [r, g, b] = Array.from(ctx.getImageData(0, 0, 1, 1).data);
45			return `rgba(${r}, ${g}, ${b},`;
46		};
47		return toRGBA(color);
48	});
49 
50	const setupCanvas = (canvas: HTMLCanvasElement, width: number, height: number) => {
51		const dpr = window.devicePixelRatio || 1;
52		canvas.width = width * dpr;
53		canvas.height = height * dpr;
54		canvas.style.width = `${width}px`;
55		canvas.style.height = `${height}px`;
56		const cols = Math.floor(width / (squareSize + gridGap));
57		const rows = Math.floor(height / (squareSize + gridGap));
58 
59		const squares = new Float32Array(cols * rows);
60		for (let i = 0; i < squares.length; i++) {
61			squares[i] = Math.random() * maxOpacity;
62		}
63 
64		return { cols, rows, squares, dpr };
65	};
66 
67	const updateSquares = (squares: Float32Array, deltaTime: number) => {
68		for (let i = 0; i < squares.length; i++) {
69			if (Math.random() < flickerChance * deltaTime) {
70				squares[i] = Math.random() * maxOpacity;
71			}
72		}
73	};
74 
75	const drawGrid = (
76		ctx: CanvasRenderingContext2D,
77		width: number,
78		height: number,
79		cols: number,
80		rows: number,
81		squares: Float32Array,
82		dpr: number
83	) => {
84		ctx.clearRect(0, 0, width, height);
85		ctx.fillStyle = "transparent";
86		ctx.fillRect(0, 0, width, height);
87 
88		for (let i = 0; i < cols; i++) {
89			for (let j = 0; j < rows; j++) {
90				const opacity = squares[i * rows + j];
91				ctx.fillStyle = `${memoizedColor}${opacity})`;
92				ctx.fillRect(
93					i * (squareSize + gridGap) * dpr,
94// … truncated