Background ASCII Wake

1"use client";
2 
3import { useEffect, useRef } from "react";
4 
5// ---------------------------------------------------------------------------
6// WakeGlyph — a full-bleed monospace character-comet field. A sparse, static
7// ambient scatter sits at rest; the pointer stamps a "heat" value into the
8// cells it passes over, and each stamped cell decays back toward the ambient
9// floor at a rate fixed at stamp time — a fast pass stamps many cells at a
10// low, quick-decaying heat (a long, thin, short-lived wake), a slow pass
11// stamps fewer cells at high heat with a slow decay rate (a fat, lingering
12// blob). Direct-DOM rAF over a persistent Float32Array grid, glyph density
13// mapped from an ASCII ramp, theme-aware ink read via getComputedStyle.
14// ---------------------------------------------------------------------------
15 
16const RAMP = " .:-=+*#%@";
17 
18export interface WakeGlyphProps {
19  /** grid cell size in px */
20  cellSize?: number;
21  className?: string;
22}
23 
24// deterministic PRNG so the ambient scatter is stable within a session
25function mulberry32(seed: number) {
26  let a = seed >>> 0;
27  return () => {
28    a |= 0;
29    a = (a + 0x6d2b79f5) | 0;
30    let t = Math.imul(a ^ (a >>> 15), 1 | a);
31    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
32    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
33  };
34}
35 
36export function WakeGlyph({ cellSize = 12, className = "" }: WakeGlyphProps) {
37  const canvasRef = useRef<HTMLCanvasElement>(null);
38 
39  useEffect(() => {
40    const canvas = canvasRef.current;
41    if (!canvas) return;
42    const ctx = canvas.getContext("2d");
43    if (!ctx) return;
44 
45    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
46    let fg = getComputedStyle(canvas).color;
47    const monoFont =
48      getComputedStyle(document.documentElement).getPropertyValue("--font-mono") ||
49      "ui-monospace, monospace";
50 
51    let dpr = 1;
52    let cols = 0;
53    let rows = 0;
54    let heat: Float32Array = new Float32Array(0);
55    let rate: Float32Array = new Float32Array(0);
56    let ambient: Float32Array = new Float32Array(0);
57    let raf = 0;
58    let last = 0;
59    const pointer = { x: -1, y: -1, t: 0, has: false };
60 
61    const resize = () => {
62      dpr = Math.min(window.devicePixelRatio || 1, 2);
63      const { width, height } = canvas.getBoundingClientRect();
64      canvas.width = Math.max(1, Math.round(width * dpr));
65      canvas.height = Math.max(1, Math.round(height * dpr));
66      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
67// … truncated