MeshGradient

1"use client";
2 
3/*
4 * MeshGradient: the Neon brand-deck gradient as a live WebGL surface —
5 * a defocused warm color field (moss, ember, gold, and a yellow-green
6 * bloom) drifting over near-black. A brand background for heroes,
7 * covers, and marketing moments. Static single frame under reduced
8 * motion. GLSL lives in mesh-gradient-shader.ts.
9 */
10 
11import { useEffect, useRef } from "react";
12import type { ComponentProps } from "react";
13 
14import { cn } from "@/lib/utils";
15 
16import { MESH_FRAGMENT, MESH_VERTEX } from "./mesh-gradient-shader";
17 
18export type MeshGradientPalette = [
19  base: string,
20  moss: string,
21  ember: string,
22  gold: string,
23  bloom: string,
24];
25 
26export type MeshGradientProps = Omit<ComponentProps<"canvas">, "children"> & {
27  /** Animation speed multiplier; 0 freezes the field. */
28  speed?: number;
29  /** 0-1 domain warp — how organic the blob edges get. */
30  warp?: number;
31  /** 0-1 dither strength; keeps soft falloffs from banding. */
32  grain?: number;
33  /** Brightness multiplier on the bloom blob. */
34  glow?: number;
35  /** The field, painted back to front: [base, moss, ember, gold, bloom]. */
36  colors?: MeshGradientPalette;
37};
38 
39/**
40 * Seconds for a dial or palette change to close ~63% of its gap —
41 * uniforms ease toward their targets each frame, so a dragged slider
42 * or a palette switch glides instead of snapping.
43 */
44const SMOOTH_TAU = 0.12;
45 
46const DEFAULT_COLORS: MeshGradientPalette = [
47  "#0b0b08",
48  "#2c4a33",
49  "#a85f1b",
50  "#edbf4e",
51  "#eef2a0",
52];
53 
54const parseColor = (css: string): [number, number, number] => {
55  const probe = document.createElement("canvas");
56  probe.width = 1;
57  probe.height = 1;
58  const context = probe.getContext("2d");
59 
60  if (!context) {
61    return [0, 0, 0];
62  }
63 
64  context.fillStyle = css;
65  context.fillRect(0, 0, 1, 1);
66  const [r, g, b] = context.getImageData(0, 0, 1, 1).data;
67  return [(r ?? 0) / 255, (g ?? 0) / 255, (b ?? 0) / 255];
68};
69 
70const warnDev = (message: string) => {
71  if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
72    console.warn(message);
73  }
74};
75 
76const compile = (
77  gl: WebGLRenderingContext,
78  type: number,
79  source: string
80): WebGLShader | null => {
81  const shader = gl.createShader(type);
82 
83  if (!shader) {
84    return null;
85  }
86 
87  gl.shaderSource(shader, source);
88  gl.compileShader(shader);
89 
90  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
91    warnDev(
92      `neon-ui: shader compile failed: ${gl.getShaderInfoLog(shader) ?? "unknown"}`
93    );
94// … truncated