Glyph Matrix

1"use client"
2 
3import { useEffect, useRef } from "react"
4 
5import { cn } from "@/lib/utils"
6 
7interface GlyphMatrixProps extends React.HTMLAttributes<HTMLCanvasElement> {
8  /** Characters to randomly pick from */
9  glyphs?: string
10  /** Cell size in px (also font size) */
11  cellSize?: number
12  /** Probability (0-1) a cell mutates each tick */
13  mutationRate?: number
14  /** Tick interval in ms */
15  interval?: number
16  /** Fade out toward bottom (0 = no fade) */
17  fadeBottom?: number
18  /** Glyph color (any CSS color). Pass a theme-aware value from the consumer. */
19  color?: string
20}
21 
22/**
23 * GlyphMatrix — an animated grid of subtly shifting glyphs.
24 * Pass a `color` prop (e.g. driven by next-themes) to adapt it to
25 * light and dark modes.
26 */
27export function GlyphMatrix({
28  glyphs = "01·•+*/\\<>=",
29  cellSize = 14,
30  mutationRate = 0.04,
31  interval = 90,
32  className,
33  fadeBottom = 0.6,
34  color = "#6B7280",
35  style,
36  ...props
37}: GlyphMatrixProps) {
38  const canvasRef = useRef<HTMLCanvasElement | null>(null)
39  // Current glyph color as RGBA (a in 0-1). Kept in a ref so a color change
40  // (e.g. theme toggle) recolors the next frame without restarting the
41  // animation. Defaults to #6B7280.
42  const rgbaRef = useRef({ r: 107, g: 114, b: 128, a: 1 })
43 
44  // Resolve the CSS color string to RGBA (handles hex, rgb, hsl, oklch, ...).
45  useEffect(() => {
46    const probe = document.createElement("canvas")
47    probe.width = 1
48    probe.height = 1
49    const probeCtx = probe.getContext("2d")
50    if (!probeCtx) return
51    // Seed with the default so an invalid color falls back to it: the 2d
52    // context keeps the previous fillStyle when assigned an invalid value
53    // instead of silently turning black.
54    probeCtx.fillStyle = "#6B7280"
55    probeCtx.fillStyle = color
56    probeCtx.fillRect(0, 0, 1, 1)
57    const [r, g, b, a] = probeCtx.getImageData(0, 0, 1, 1).data
58    rgbaRef.current = { r, g, b, a: a / 255 }
59  }, [color])
60 
61  useEffect(() => {
62    const canvas = canvasRef.current
63    if (!canvas) return
64 
65    const ctx = canvas.getContext("2d")
66    if (!ctx) return
67 
68    let cols = 0
69    let rows = 0
70    let cells: string[] = []
71    let alphas: number[] = []
72    let raf = 0
73    let last = 0
74    let stopped = false
75 
76    const resize = () => {
77      const dpr = window.devicePixelRatio || 1
78      const { clientWidth: w, clientHeight: h } = canvas
79 
80      canvas.width = w * dpr
81      canvas.height = h * dpr
82      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
83 
84// … truncated