Glyph Matrix

1<script lang="ts">
2	import { cn } from "$UTILS$";
3	import { watch } from "runed";
4	import type { HTMLAttributes } from "svelte/elements";
5 
6	interface GlyphMatrixProps extends HTMLAttributes<HTMLCanvasElement> {
7		/** Characters to randomly pick from */
8		glyphs?: string;
9		/** Cell size in px (also font size) */
10		cellSize?: number;
11		/** Probability (0-1) a cell mutates each tick */
12		mutationRate?: number;
13		/** Tick interval in ms */
14		interval?: number;
15		/** Fade out toward bottom (0 = no fade) */
16		fadeBottom?: number;
17		/** Glyph color (any CSS color). Use a lighter color for a brighter matrix look. */
18		color?: string;
19		/** Brightness multiplier. 1 = original, 1.15-1.25 = subtle, 1.4-1.6 = strong, 1.8+ = very bright. */
20		boost?: number;
21		class?: string;
22	}
23 
24	type RGBA = {
25		r: number;
26		g: number;
27		b: number;
28		a: number;
29	};
30 
31	const DEFAULT_GLYPHS = "01\u00B7\u2022+*/\\<>=";
32	const DEFAULT_COLOR = "#6B7280";
33	const DEFAULT_RGBA: RGBA = { r: 107, g: 114, b: 128, a: 1 };
34 
35	let {
36		glyphs = DEFAULT_GLYPHS,
37		cellSize = 14,
38		mutationRate = 0.04,
39		interval = 90,
40		class: className = "",
41		fadeBottom = 0.6,
42		color = DEFAULT_COLOR,
43		boost = 1.2,
44		style,
45		...props
46	}: GlyphMatrixProps = $props();
47 
48	let canvas: HTMLCanvasElement | null = $state(null);
49	let rgba = DEFAULT_RGBA;
50	let alphaBoost = 1;
51 
52	function randomGlyph(pool: string) {
53		return pool[Math.floor(Math.random() * pool.length)] ?? " ";
54	}
55 
56	function randomAlpha(range: number) {
57		return 0.05 + Math.random() * range;
58	}
59 
60	function normalizeBoost(amount: number) {
61		return Math.max(0, amount);
62	}
63 
64	function boostChannel(value: number, amount: number) {
65		const normalized = normalizeBoost(amount);
66		const mix = Math.max(0, normalized - 1);
67		return Math.min(255, Math.round(value + (255 - value) * mix));
68	}
69 
70	function getAlphaBoost(amount: number) {
71		const normalized = normalizeBoost(amount);
72		return normalized <= 1 ? normalized : 1 + (normalized - 1) * 1.75;
73	}
74 
75	// Resolve CSS colors once so the draw loop can stay cheap.
76	// `boost` brightens the glyph color and also makes the glyphs read more clearly.
77	function resolveColor(value: string, amount: number): RGBA {
78		if (typeof document === "undefined") return DEFAULT_RGBA;
79 
80		const probe = document.createElement("canvas");
81		const context = probe.getContext("2d");
82 
83		if (!context) return DEFAULT_RGBA;
84 
85		context.fillStyle = DEFAULT_COLOR;
86		context.fillStyle = value;
87		context.fillRect(0, 0, 1, 1);
88 
89// … truncated