Mesh Gradient

1/* Deepak Kumar E — https://craft.iam-deepak.space */2 3import { useEffect, useRef } from "react";4 5/**6 * An animated mesh gradient, drawn in a fragment shader.7 *8 * Raw WebGL rather than three.js on purpose. A gradient is one full-screen9 * triangle and about forty lines of GLSL; reaching for a scene graph to draw10 * it costs ~150KB to gain nothing. That is the difference between this11 * running for free and it being the heaviest thing on your landing page.12 *13 * The motion is a sum of three drifting radial fields. Layering cheap fields14 * beats one expensive noise function here — smooth gradients hide the low15 * frequency, so nobody can tell it is not simplex noise, and it costs a16 * handful of instructions per pixel instead of dozens.17 */18 19const VERTEX = `20attribute vec2 position;21void main() { gl_Position = vec4(position, 0.0, 1.0); }22`;23 24const FRAGMENT = `25precision mediump float;26 27uniform vec2  uResolution;28uniform float uTime;29uniform vec3  uColorA;30uniform vec3  uColorB;31uniform vec3  uColorC;32uniform float uGrain;33 34/* Cheap hash for the dither below — no texture lookup, no dependency. */35float hash(vec2 p) {36  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);37}38 39/* A soft radial field whose centre drifts on a Lissajous path.40   Centres stay in 0–1 space and the ASPECT IS APPLIED TO THE DISTANCE, not41   to the coordinate. Scaling uv.x instead leaves the centres in 0–1 while the42   coordinate runs to 2.5 on a wide canvas, so the whole right-hand side falls43   outside every field and the normalise below drives it to black. */44float field(vec2 uv, float aspect, vec2 phase, float speed, float radius) {45  vec2 centre = vec2(46    0.5 + 0.34 * sin(uTime * speed + phase.x),47    0.5 + 0.28 * cos(uTime * speed * 0.83 + phase.y)48  );49  vec2 delta = (uv - centre) * vec2(aspect, 1.0);50  /* Radii are a fraction of the half-diagonal, so one set of numbers holds up51     from a phone to an ultrawide. */52  float reach = radius * length(vec2(aspect, 1.0)) * 0.5;53  return smoothstep(reach, 0.0, length(delta));54}55 56void main() {57  vec2 uv = gl_FragCoord.xy / uResolution;58  float aspect = uResolution.x / uResolution.y;59 60  float a = field(uv, aspect, vec2(0.0, 1.7), 0.28, 1.15);61  float b = field(uv, aspect, vec2(2.4, 4.1), 0.21, 1.05);62  float c = field(uv, aspect, vec2(5.1, 2.2), 0.34, 0.95);63 64  /* A small constant weight on the third colour keeps this from dividing by65     nothing where all three fields are weak — that corner would otherwise66     read as a hard black wedge rather than settling to the base colour. */67  float base = 0.04;68  vec3 colour = uColorA * a + uColorB * b + uColorC * (c + base);69  colour /= (a + b + c + base);70 71  /* Banding is the failure mode of every large flat gradient on an 8-bit72     display. A sub-LSB of noise breaks the bands up and costs one hash. */73  float grain = (hash(gl_FragCoord.xy + fract(uTime)) - 0.5) * uGrain;74  gl_FragColor = vec4(colour + grain, 1.0);75}76`;77 78function compile(gl: WebGLRenderingContext, type: number, source: string) {79  const shader = gl.createShader(type);80  if (!shader) return null;81  gl.shaderSource(shader, source);82  gl.compileShader(shader);83  return gl.getShaderParameter(shader, gl.COMPILE_STATUS) ? shader : null;84}85 86/** `#rrggbb` to the 0–1 triple a shader wants. */87function toRgb(hex: string): [number, number, number] {88  const match = /^#?([\da-f]{6})$/i.exec(hex.trim());89  if (!match) return [0, 0, 0];90  const n = parseInt(match[1], 16);91  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255];92}93 94export interface MeshGradientProps {95  colorA?: string;96  colorB?: string;97  colorC?: string;98  /** Multiplier on the drift. 0 renders a single still frame. */99  speed?: number;100  /** Dither strength. Raise it if you can see banding on your display. */101  grain?: number;102  /** Force the still frame — for print, screenshots, or a reduced-motion test. */103  still?: boolean;104  className?: string;105}106 107export function MeshGradient({108  colorA = "#c3f53c",109  colorB = "#1a3d2e",110  colorC = "#0a0b0e",111  speed = 1,112  grain = 0.035,113  still = false,114  className = "",115}: MeshGradientProps) {116  const ref = useRef<HTMLCanvasElement>(null);117 118  useEffect(() => {119    const canvas = ref.current;120    if (!canvas) return;121 122    const gl = canvas.getContext("webgl", {123      antialias: false,124      alpha: false,125      // A gradient is repainted every frame, so preserving the buffer only126      // costs memory bandwidth.127      preserveDrawingBuffer: false,128    });129    if (!gl) return;130 131    const vertex = compile(gl, gl.VERTEX_SHADER, VERTEX);132    const fragment = compile(gl, gl.FRAGMENT_SHADER, FRAGMENT);133    if (!vertex || !fragment) return;134 135    const program = gl.createProgram();136    if (!program) return;137    gl.attachShader(program, vertex);138    gl.attachShader(program, fragment);139    gl.linkProgram(program);140    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) return;141    gl.useProgram(program);142 143    /* One triangle covering the viewport, not two making a quad: it avoids144       the diagonal seam where the GPU shades the shared edge twice. */145    const buffer = gl.createBuffer();146    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);147    gl.bufferData(148      gl.ARRAY_BUFFER,149      new Float32Array([-1, -1, 3, -1, -1, 3]),150      gl.STATIC_DRAW,151    );152    const position = gl.getAttribLocation(program, "position");153    gl.enableVertexAttribArray(position);154    gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);155 156    const uniform = (name: string) => gl.getUniformLocation(program, name);157    const uResolution = uniform("uResolution");158    const uTime = uniform("uTime");159    const uGrain = uniform("uGrain");160 161    gl.uniform3fv(uniform("uColorA"), toRgb(colorA));162    gl.uniform3fv(uniform("uColorB"), toRgb(colorB));163    gl.uniform3fv(uniform("uColorC"), toRgb(colorC));164    gl.uniform1f(uGrain, grain);165 166    const reduced =167      still ||168      (typeof matchMedia === "function" &&169        matchMedia("(prefers-reduced-motion: reduce)").matches);170 171    /* The size THIS effect run has uploaded to THIS program.172       Deliberately not read back off canvas.width, which is DOM state that173       outlives the effect. Uniforms belong to the program, and a new program174       is built every time the effect re-runs — on any prop change, and twice175       on mount under StrictMode. Comparing against the canvas then short176       circuits the very first resize of the new run, because the element177       already carries the right dimensions from the previous one, so178       uResolution is never uploaded and stays at its (0,0) default. uv179       becomes NaN, every colour resolves to black, and only the grain — which180       does not read uResolution — still shows. Reloading appears to fix it181       because a fresh canvas starts at 300x150; resizing appears to fix it182       because the dimensions genuinely change. */183    let uploadedWidth = 0;184    let uploadedHeight = 0;185 186    const resize = () => {187      /* Capped at 2×: a gradient carries no fine detail, so a 3× phone188         display would be shading nine times the pixels for no visible gain189         and a measurable battery cost. */190      const dpr = Math.min(devicePixelRatio || 1, 2);191      const width = Math.floor(canvas.clientWidth * dpr);192      const height = Math.floor(canvas.clientHeight * dpr);193      /* Ignore a zero measurement instead of committing a 0×0 buffer. During194         a client-side navigation the effect can run before layout settles,195         and a zero-size buffer sticks — the canvas stays blank until196         something else happens to resize it. */197      if (!width || !height) return;198      if (width === uploadedWidth && height === uploadedHeight) return;199 200      uploadedWidth = width;201      uploadedHeight = height;202      canvas.width = width;203      canvas.height = height;204      gl.viewport(0, 0, width, height);205      gl.uniform2f(uResolution, width, height);206    };207 208    let frame = 0;209    const start = performance.now();210 211    const draw = (now: number) => {212      resize();213      gl.uniform1f(uTime, ((now - start) / 1000) * speed);214      gl.drawArrays(gl.TRIANGLES, 0, 3);215      if (!reduced) frame = requestAnimationFrame(draw);216    };217 218    // Still or animated, the first frame is drawn the same way — so reduced219    // motion gets a composed gradient, never an empty canvas.220    draw(start);221 222    const observer = new ResizeObserver(() => {223      if (reduced) draw(performance.now());224    });225    observer.observe(canvas);226 227    return () => {228      cancelAnimationFrame(frame);229      observer.disconnect();230      gl.deleteProgram(program);231      gl.deleteShader(vertex);232      gl.deleteShader(fragment);233      gl.deleteBuffer(buffer);234      /* Deliberately NOT calling WEBGL_lose_context here.235         Forcing the context to drop looks like tidy resource management, but236         a context lost that way cannot be reacquired on the same canvas — so237         the component renders once and then comes back blank on any remount.238         React's StrictMode mounts, unmounts and remounts every effect in239         development, which means the very first thing you see is the broken240         state. Fast Refresh and conditional rendering do the same in241         production. The GPU buffer is reclaimed when the canvas is collected;242         the deletes above are the part actually worth doing. */243    };244  }, [colorA, colorB, colorC, speed, grain, still]);245 246  return (247    <canvas248      ref={ref}249      // Decorative: it carries no information a screen reader needs.250      aria-hidden251      className={`block h-full w-full ${className}`}252    />253  );254}255