BannerPattern

1"use client";
2 
3/*
4 * BannerPattern: neon.com's banner dot pattern as a live WebGL
5 * surface — a square-dot grid masking a drifting color field, so
6 * every dot samples the green-to-amber glow behind it. A brand
7 * background for banners, cards, and covers. Static single frame
8 * under reduced motion. GLSL lives in banner-pattern-shader.ts.
9 */
10 
11import { useEffect, useRef } from "react";
12import type { ComponentProps } from "react";
13 
14import { cn } from "@/lib/utils";
15 
16import { BANNER_FRAGMENT, BANNER_VERTEX } from "./banner-pattern-shader";
17 
18export type BannerPatternPalette = [
19  base: string,
20  green: string,
21  sage: string,
22  amber: string,
23  cream: string,
24  rust: string,
25];
26 
27export type BannerPatternProps = Omit<ComponentProps<"canvas">, "children"> & {
28  /** Animation speed multiplier; 0 freezes the field. */
29  speed?: number;
30  /** Grid cell size in CSS pixels. */
31  cell?: number;
32  /** 0-0.5 dot half-width as a fraction of the cell. */
33  dotSize?: number;
34  /** 0-1 unmasked ambient glow behind the dots. */
35  haze?: number;
36  /** 0-1 per-dot brightness variance. */
37  jitter?: number;
38  /** The field, painted back to front: [base, green, sage, amber, cream, rust]. */
39  colors?: BannerPatternPalette;
40};
41 
42/**
43 * Seconds for a dial or palette change to close ~63% of its gap —
44 * uniforms ease toward their targets each frame, so a dragged slider
45 * or a palette switch glides instead of snapping.
46 */
47const SMOOTH_TAU = 0.12;
48 
49const DEFAULT_COLORS: BannerPatternPalette = [
50  "#0a0b09",
51  "#34d59a",
52  "#97b47d",
53  "#feaa2c",
54  "#ffeacc",
55  "#b03323",
56];
57 
58const parseColor = (css: string): [number, number, number] => {
59  const probe = document.createElement("canvas");
60  probe.width = 1;
61  probe.height = 1;
62  const context = probe.getContext("2d");
63 
64  if (!context) {
65    return [0, 0, 0];
66  }
67 
68  context.fillStyle = css;
69  context.fillRect(0, 0, 1, 1);
70  const [r, g, b] = context.getImageData(0, 0, 1, 1).data;
71  return [(r ?? 0) / 255, (g ?? 0) / 255, (b ?? 0) / 255];
72};
73 
74const warnDev = (message: string) => {
75  if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
76    console.warn(message);
77  }
78};
79 
80const compile = (
81  gl: WebGLRenderingContext,
82  type: number,
83  source: string
84): WebGLShader | null => {
85  const shader = gl.createShader(type);
86 
87  if (!shader) {
88    return null;
89  }
90 
91  gl.shaderSource(shader, source);
92  gl.compileShader(shader);
93 
94  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
95    warnDev(
96// … truncated