@robr0/design-system 0.6.0 → 0.7.0

package/components/ShaderField/field.glsl.js

@@ -0,0 +1,177 @@
+const BLOB_COUNT = 8;
+const vertexSource = (
+  /* glsl */
+  `#version 300 es
+// Fullscreen triangle — no buffers, three vertices from gl_VertexID.
+void main() {
+  vec2 p = vec2((gl_VertexID << 1) & 2, gl_VertexID & 2);
+  gl_Position = vec4(p * 2.0 - 1.0, 0.0, 1.0);
+}
+`
+);
+const fragmentSource = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+
+uniform vec2  u_resolution;  // drawing-buffer size in pixels
+uniform float u_time;        // field time, seconds (speed applied JS-side)
+uniform vec3  u_color[${BLOB_COUNT}];  // linear RGB per blob
+uniform vec4  u_blob[${BLOB_COUNT}];   // xy = centre, z = sigma, w = emission weight
+uniform vec4  u_motion[${BLOB_COUNT}]; // xy = angular speeds, zw = phases
+uniform float u_intensity;   // peak-alpha ceiling
+uniform float u_warp;        // domain-warp strength
+uniform float u_scale;       // noise frequency
+uniform float u_grain;       // film-grain strength
+uniform float u_streak;      // anisotropic stretch: 0 = blobs, 1 = light streams
+uniform vec2  u_mouse;       // pointer in field coordinates (smoothed JS-side)
+uniform float u_mvel;        // smoothed pointer speed, width units/s
+uniform float u_react;       // cursor-reactivity strength
+
+out vec4 outColor;
+
+// Integer hash — WebGL2 has real uint ops, so no fract(sin()) precision
+// lottery on mobile GPUs.
+uint ihash(uvec2 p) {
+  p = p * uvec2(73333u, 7777u) ^ (p.yx >> 3u);
+  uint h = p.x ^ (p.y * 2654435761u);
+  h ^= h >> 15u;
+  h *= 2246822519u;
+  h ^= h >> 13u;
+  return h;
+}
+
+float rnd(ivec2 p) {
+  return float(ihash(uvec2(p)) >> 8) * (1.0 / 16777216.0);
+}
+
+float vnoise(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  vec2 u = f * f * f * (f * (f * 6.0 - 15.0) + 10.0);
+  ivec2 c = ivec2(i);
+  return mix(
+    mix(rnd(c), rnd(c + ivec2(1, 0)), u.x),
+    mix(rnd(c + ivec2(0, 1)), rnd(c + ivec2(1, 1)), u.x),
+    u.y
+  );
+}
+
+// 3 octaves; a 4th is invisible at this softness.
+float fbm(vec2 p) {
+  float s = 0.0;
+  float a = 0.5;
+  for (int i = 0; i < 3; i++) {
+    s += a * vnoise(p);
+    p = p * 2.02 + vec2(17.0, 9.0);
+    a *= 0.5;
+  }
+  return s;
+}
+
+void main() {
+  // CSS coordinate space: origin at container centre, one unit = width,
+  // y running downward.
+  vec2 p = (gl_FragCoord.xy - 0.5 * u_resolution) / u_resolution.x;
+  p.y = -p.y;
+
+  // Light-stream axis: a fixed diagonal. Distances across the axis are
+  // magnified before the Gaussian, so every source stretches along it and
+  // the field reads as rays instead of discs.
+  float ca = cos(0.5);
+  float sa = sin(0.5);
+  mat2 toStreak = mat2(ca, -sa, sa, ca);
+  float squeeze = 1.0 + u_streak * 4.0;
+
+  // Domain warp: the field flows rather than drifts. The noise is sampled
+  // in the same anisotropic space, so the flow lines follow the streams.
+  float t = u_time;
+  vec2 ps = toStreak * p;
+  ps.y *= squeeze;
+  vec2 q = vec2(
+    fbm(ps * u_scale + vec2(0.0, t * 0.030)),
+    fbm(ps * u_scale + vec2(5.2, 1.3) - t * 0.024)
+  );
+  vec2 w = p + u_warp * (q - 0.5);
+
+  // Cursor wake: a smooth vortex around the pointer, amplified by speed.
+  // The displacement is built from the *unnormalised* offset so it falls to
+  // zero at the cursor itself. Normalising here (md/mr) made the direction
+  // spin through 360 degrees at full strength across the centre pixel, which
+  // rendered as a pinch — a cone converging to a point.
+  vec2 md = p - u_mouse;
+  float mr2 = dot(md, md);
+  float minf = exp(-mr2 / (2.0 * 0.22 * 0.22));
+  vec2 swirl = vec2(-md.y, md.x);
+  // smoothstep, not min(): a hard clamp stepped visibly as speed crossed it.
+  float stir = 0.25 + 1.3 * smoothstep(0.0, 0.8, u_mvel);
+  w += u_react * minf * stir * (swirl * 0.9 + md * 0.35);
+
+  // Accumulate true Gaussians in linear space. Positive weights emit;
+  // negative weights absorb (shadows — the eclipse disc).
+  vec3 acc = vec3(0.0);
+  float cov = 0.0;
+  float shade = 0.0;
+  for (int i = 0; i < ${BLOB_COUNT}; i++) {
+    vec2 c = u_blob[i].xy + 0.045 * vec2(
+      cos(u_motion[i].x * t + u_motion[i].z),
+      sin(u_motion[i].y * t + u_motion[i].w)
+    );
+    vec2 d = toStreak * (w - c);
+    d.y *= squeeze;
+    float s = u_blob[i].z;
+    float g = exp(-dot(d, d) / (2.0 * s * s));
+    float wgt = u_blob[i].w;
+    if (wgt >= 0.0) {
+      acc += u_color[i] * (g * wgt);
+      cov += g * wgt;
+    } else {
+      shade += g * -wgt;
+    }
+  }
+
+  // Glow trail: wider and softer than the swirl, and mostly velocity-driven,
+  // so a resting cursor does not park a bright dot on the field.
+  //
+  // The wake brightens whatever colour it is passing over rather than adding
+  // one of its own. Injecting u_color[0] meant the trail always wore the
+  // first blob's token — gold in the site palette, violet in beam — which
+  // read as a stray colour with no relationship to the field beneath it.
+  // Weighting by the local hue keeps the wake colour-neutral: it reads as
+  // light falling on the field, and it stays correct for any palette.
+  vec3 local = acc / max(cov, 1e-4);
+  float gfall = exp(-mr2 / (2.0 * 0.3 * 0.3));
+  float glow = u_react * gfall * (0.12 + 0.5 * smoothstep(0.0, 0.8, u_mvel));
+  acc += local * glow;
+  cov += glow;
+
+  vec3 lin = acc / max(cov, 1e-4);
+  float lit = max(cov - shade, 0.0);
+  float alpha = u_intensity * (1.0 - exp(-lit * 0.9));
+
+  vec3 srgb = pow(max(lin, vec3(0.0)), vec3(1.0 / 2.2));
+
+  // Film grain: animated hash noise. At u_grain 0 this degenerates to the
+  // ±1/255 dither that kills banding, so the two share one lookup.
+  uvec2 gp = uvec2(gl_FragCoord.xy) + uvec2(
+    uint(fract(t * 7.31) * 1024.0) * 7919u,
+    uint(fract(t * 3.17) * 1024.0) * 104729u
+  );
+  float gr = float(ihash(gp) & 255u) / 255.0 - 0.5;
+  srgb += gr * (1.0 / 255.0 + u_grain * 0.35);
+  // A small grain-driven alpha floor lets the sparkle read even where the
+  // field itself is empty (the reference's grainy dark scene).
+  float grainFloor = u_grain * 0.1 * (gr + 0.5);
+  alpha = clamp(alpha * (1.0 + gr * u_grain * 0.5) + grainFloor, 0.0, 1.0);
+  srgb = clamp(srgb, 0.0, 1.0);
+
+  // Premultiplied output (context is created with premultipliedAlpha: true).
+  outColor = vec4(srgb * alpha, alpha);
+}
+`
+);
+export {
+  BLOB_COUNT,
+  fragmentSource,
+  vertexSource
+};

package/components/ShaderField/useShaderField.d.ts

@@ -0,0 +1,86 @@
+import { RefObject } from 'react';
+/** The seven tuneable properties of the field. */
+export interface ShaderParams {
+    /** Overall opacity of the field, 0.1–1. */
+    intensity: number;
+    /** Domain-warp strength: how much fbm noise bends the field, 0–0.5. */
+    warp: number;
+    /** Noise frequency. Higher values give finer, busier structure, 0.5–6. */
+    scale: number;
+    /** Drift-rate multiplier on every blob's period, 0–4. */
+    speed: number;
+    /** Dither/film-grain amplitude, 0–0.4. Also what kills 8-bit banding. */
+    grain: number;
+    /** Anisotropic stretch: 0 renders discs, 1 renders diagonal streams, 0–1. */
+    streak: number;
+    /**
+     * Cursor-wake strength, 0–1. Defaults to 0 — the interaction is built and
+     * dormant, not absent. Raising it turns on the swirl and glow trail, and
+     * with them the loop's step up from 30fps to 60fps while a wake is alive.
+     */
+    react: number;
+}
+/**
+ * One light source in the field.
+ *
+ * The coordinate space is the shader's (see field.glsl): origin at the
+ * container centre, one unit = container width, y running downward. Centres
+ * are constants — nothing here is recomputed on resize.
+ */
+export interface ShaderBlob {
+    /**
+     * Semantic colour token, read from the canvas's computed style at runtime,
+     * so the field re-themes with `data-theme` and with any scoped custom-
+     * property override. A token nothing defines resolves to no colour — an
+     * invisible source, never an error.
+     */
+    token: string;
+    /** Disc diameter in container-width units. */
+    size: number;
+    /** Centre offset from the container centre, width units. */
+    cx: number;
+    /** Centre offset from the container centre, width units. */
+    cy: number;
+    /** Drift cycle in seconds, before `speed` is applied. */
+    period: number;
+    /** Phase offset, so sources never move in lockstep. */
+    phase: number;
+    /**
+     * Emission weight. Positive emits light; negative absorbs it, giving a
+     * shadow that occludes whatever shines behind it.
+     */
+    weight: number;
+}
+/**
+ * The shipped look: seven parameters tuned by eye, cursor wake off. Spread it
+ * and override the one or two you want rather than restating the set.
+ */
+export declare const DEFAULT_SHADER_PARAMS: ShaderParams;
+/**
+ * The default composition: eight sources on core accent tokens, filling
+ * BLOB_COUNT exactly.
+ *
+ * `--color-action-primary-bg` is deliberately absent. The action colour is
+ * reserved for CTAs and focus rings, and a full-viewport decorative field is
+ * precisely the use that would stop it meaning "click here" — so the last
+ * source takes `--color-core-ui-secondary` instead.
+ */
+export declare const DEFAULT_SHADER_BLOBS: readonly ShaderBlob[];
+/**
+ * Live tunables. Changing them never rebuilds the GL state — the render loop
+ * reads them through a ref, and a paused field redraws one frame.
+ */
+export interface ShaderFieldParams extends ShaderParams {
+    /** The colour-source table; swap it to change composition live. */
+    blobs: readonly ShaderBlob[];
+}
+export interface ShaderFieldState {
+    /** False once getContext('webgl2') has returned null — the caller should
+     *  leave its CSS fallback painted. */
+    supported: boolean;
+    /** True once the first frame has been drawn. */
+    active: boolean;
+}
+export declare function parseColor(value: string): [number, number, number] | null;
+export declare function srgbToLinear(c: number): number;
+export declare function useShaderField(canvasRef: RefObject<HTMLCanvasElement | null>, params: ShaderFieldParams, enabled?: boolean): ShaderFieldState;

package/components/ShaderField/useShaderField.js

@@ -0,0 +1,395 @@
+import { useState, useRef, useEffect } from "react";
+import { BLOB_COUNT, vertexSource, fragmentSource } from "./field.glsl.js";
+const DEFAULT_SHADER_PARAMS = {
+  intensity: 0.5,
+  warp: 0.14,
+  scale: 2.7,
+  speed: 2,
+  grain: 0.1,
+  streak: 0.4,
+  react: 0
+};
+const DEFAULT_SHADER_BLOBS = [
+  { token: "--color-core-accent-gold", size: 0.45, cx: 0.175, cy: 0.125, period: 18, phase: 0, weight: 1 },
+  { token: "--color-core-accent-mint", size: 0.55, cx: 0.125, cy: 0.125, period: 16, phase: 1, weight: 1 },
+  { token: "--color-core-accent-violet", size: 0.9, cx: 0.35, cy: 0.25, period: 22, phase: 0.5, weight: 1 },
+  { token: "--color-bg-container-secondary", size: 0.55, cx: 0.025, cy: 0.075, period: 14, phase: 1.5, weight: 1 },
+  { token: "--color-core-accent-cobalt", size: 0.55, cx: -0.125, cy: 0.475, period: 17, phase: 0.8, weight: 1 },
+  { token: "--color-core-accent-coral", size: 0.48, cx: 0.39, cy: -0.26, period: 19, phase: 0.3, weight: 1 },
+  { token: "--color-core-accent-amber", size: 0.3, cx: 0.35, cy: 0.3, period: 15, phase: 1.2, weight: 1 },
+  { token: "--color-core-ui-secondary", size: 0.75, cx: -0.125, cy: -0.025, period: 20, phase: 0.7, weight: 1 }
+];
+const RENDER_SCALE = 0.5;
+const FRAME_MS = 1e3 / 30;
+const FRAME_MS_ACTIVE = 1e3 / 60;
+const WAKE_IDLE = 0.015;
+const COLOR_FADE_MS = 300;
+function parseColor(value) {
+  const v = value.trim();
+  const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(v);
+  if (hex) {
+    const h = hex[1];
+    const full = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
+    return [
+      parseInt(full.slice(0, 2), 16) / 255,
+      parseInt(full.slice(2, 4), 16) / 255,
+      parseInt(full.slice(4, 6), 16) / 255
+    ];
+  }
+  const rgb = /^rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)/.exec(v);
+  if (rgb) {
+    return [Number(rgb[1]) / 255, Number(rgb[2]) / 255, Number(rgb[3]) / 255];
+  }
+  return null;
+}
+function srgbToLinear(c) {
+  return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+}
+function compile(gl, type, source) {
+  const shader = gl.createShader(type);
+  if (!shader) return null;
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    console.error("ShaderField compile error:", gl.getShaderInfoLog(shader));
+    gl.deleteShader(shader);
+    return null;
+  }
+  return shader;
+}
+function useShaderField(canvasRef, params, enabled = true) {
+  const [supported, setSupported] = useState(true);
+  const [active, setActive] = useState(false);
+  const paramsRef = useRef(params);
+  const redrawRef = useRef(() => {
+  });
+  useEffect(() => {
+    paramsRef.current = params;
+    redrawRef.current();
+  }, [params]);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || !enabled) return;
+    const gl = canvas.getContext("webgl2", {
+      alpha: true,
+      antialias: false,
+      depth: false,
+      stencil: false,
+      premultipliedAlpha: true,
+      powerPreference: "low-power"
+    });
+    if (!gl) {
+      setSupported(false);
+      return;
+    }
+    if (!gl.isContextLost()) {
+      canvas.__dsLoseExt = gl.getExtension("WEBGL_lose_context");
+    }
+    const loseExt = () => gl.getExtension("WEBGL_lose_context") ?? canvas.__dsLoseExt ?? null;
+    let program = null;
+    let vao = null;
+    let loc = {};
+    function initGL() {
+      if (!gl) return false;
+      const vs = compile(gl, gl.VERTEX_SHADER, vertexSource);
+      const fs = compile(gl, gl.FRAGMENT_SHADER, fragmentSource);
+      if (!vs || !fs) return false;
+      program = gl.createProgram();
+      if (!program) return false;
+      gl.attachShader(program, vs);
+      gl.attachShader(program, fs);
+      gl.linkProgram(program);
+      gl.deleteShader(vs);
+      gl.deleteShader(fs);
+      if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+        console.error("ShaderField link error:", gl.getProgramInfoLog(program));
+        return false;
+      }
+      gl.useProgram(program);
+      vao = gl.createVertexArray();
+      gl.bindVertexArray(vao);
+      gl.disable(gl.BLEND);
+      gl.disable(gl.DEPTH_TEST);
+      loc = {};
+      for (const name of [
+        "u_resolution",
+        "u_time",
+        "u_color[0]",
+        "u_blob[0]",
+        "u_motion[0]",
+        "u_intensity",
+        "u_warp",
+        "u_scale",
+        "u_grain",
+        "u_streak",
+        "u_mouse",
+        "u_mvel",
+        "u_react"
+      ]) {
+        loc[name] = gl.getUniformLocation(program, name);
+      }
+      return true;
+    }
+    let uploadedBlobs = null;
+    function uploadBlobs(blobs) {
+      if (!gl) return;
+      const blob = new Float32Array(BLOB_COUNT * 4);
+      const motion = new Float32Array(BLOB_COUNT * 4);
+      for (let i = 0; i < BLOB_COUNT; i++) {
+        const b = blobs[i];
+        if (!b) {
+          blob[i * 4 + 0] = 99;
+          blob[i * 4 + 1] = 99;
+          blob[i * 4 + 2] = 0.01;
+          continue;
+        }
+        blob[i * 4 + 0] = b.cx;
+        blob[i * 4 + 1] = b.cy;
+        blob[i * 4 + 2] = b.size * 0.42;
+        blob[i * 4 + 3] = b.weight;
+        const wx = 2 * Math.PI / b.period;
+        motion[i * 4 + 0] = wx;
+        motion[i * 4 + 1] = wx * 0.83;
+        motion[i * 4 + 2] = b.phase * 2.1;
+        motion[i * 4 + 3] = b.phase * 3.7;
+      }
+      gl.uniform4fv(loc["u_blob[0]"], blob);
+      gl.uniform4fv(loc["u_motion[0]"], motion);
+      uploadedBlobs = blobs;
+    }
+    const colorCurrent = new Float32Array(BLOB_COUNT * 3);
+    const colorTarget = new Float32Array(BLOB_COUNT * 3);
+    let colorFadeT = COLOR_FADE_MS;
+    function readColors(into) {
+      const style = getComputedStyle(canvas);
+      into.fill(0);
+      paramsRef.current.blobs.slice(0, BLOB_COUNT).forEach((b, i) => {
+        const parsed = parseColor(style.getPropertyValue(b.token));
+        if (parsed) {
+          into[i * 3 + 0] = srgbToLinear(parsed[0]);
+          into[i * 3 + 1] = srgbToLinear(parsed[1]);
+          into[i * 3 + 2] = srgbToLinear(parsed[2]);
+        }
+      });
+    }
+    readColors(colorCurrent);
+    colorTarget.set(colorCurrent);
+    let bufWidth = 0;
+    let bufHeight = 0;
+    function resize() {
+      if (!gl) return;
+      const c = canvas;
+      const dpr = window.devicePixelRatio || 1;
+      const w = Math.max(1, Math.round(c.clientWidth * dpr * RENDER_SCALE));
+      const h = Math.max(1, Math.round(c.clientHeight * dpr * RENDER_SCALE));
+      if (w === bufWidth && h === bufHeight) return;
+      bufWidth = w;
+      bufHeight = h;
+      c.width = w;
+      c.height = h;
+      gl.viewport(0, 0, w, h);
+      gl.uniform2f(loc["u_resolution"], w, h);
+    }
+    let fieldTime = 0;
+    let colorsDirty = false;
+    const mouseTarget = { x: 9, y: 9 };
+    const mouse = { x: 9, y: 9 };
+    let mouseVel = 0;
+    let moveAccum = 0;
+    const onPointerMove = (e) => {
+      const c = canvas;
+      const rect = c.getBoundingClientRect();
+      if (rect.width === 0) return;
+      const x = (e.clientX - rect.left - rect.width / 2) / rect.width;
+      const y = (e.clientY - rect.top - rect.height / 2) / rect.width;
+      if (mouseTarget.x < 5) {
+        moveAccum += Math.hypot(x - mouseTarget.x, y - mouseTarget.y);
+      }
+      mouseTarget.x = x;
+      mouseTarget.y = y;
+      if (mouse.x > 5) {
+        mouse.x = x;
+        mouse.y = y;
+      }
+    };
+    window.addEventListener("pointermove", onPointerMove, { passive: true });
+    function draw(dtMs) {
+      if (!gl || !program) return;
+      resize();
+      if (paramsRef.current.blobs !== uploadedBlobs) {
+        uploadBlobs(paramsRef.current.blobs);
+        colorsDirty = true;
+      }
+      if (colorsDirty) {
+        readColors(colorTarget);
+        colorFadeT = 0;
+        colorsDirty = false;
+      }
+      if (colorFadeT < COLOR_FADE_MS) {
+        colorFadeT = Math.min(colorFadeT + dtMs, COLOR_FADE_MS);
+        const t = colorFadeT / COLOR_FADE_MS;
+        for (let i = 0; i < colorCurrent.length; i++) {
+          colorCurrent[i] += (colorTarget[i] - colorCurrent[i]) * t;
+        }
+      }
+      const p = paramsRef.current;
+      gl.uniform3fv(loc["u_color[0]"], colorCurrent);
+      gl.uniform1f(loc["u_time"], fieldTime);
+      gl.uniform1f(loc["u_intensity"], p.intensity);
+      gl.uniform1f(loc["u_warp"], p.warp);
+      gl.uniform1f(loc["u_scale"], p.scale);
+      gl.uniform1f(loc["u_grain"], p.grain);
+      gl.uniform1f(loc["u_streak"], p.streak);
+      const dtSec = Math.max(dtMs / 1e3, 1e-3);
+      const k = 1 - Math.exp(-dtSec * 14);
+      mouse.x += (mouseTarget.x - mouse.x) * k;
+      mouse.y += (mouseTarget.y - mouse.y) * k;
+      const instant = moveAccum / dtSec;
+      moveAccum = 0;
+      const blend = 1 - Math.exp(-dtSec * (instant > mouseVel ? 14 : 2.2));
+      mouseVel += (instant - mouseVel) * blend;
+      gl.uniform2f(loc["u_mouse"], mouse.x, mouse.y);
+      gl.uniform1f(loc["u_mvel"], mouseVel);
+      gl.uniform1f(loc["u_react"], p.react);
+      gl.drawArrays(gl.TRIANGLES, 0, 3);
+      frameBudget = mouseVel > WAKE_IDLE && p.react > 0 ? FRAME_MS_ACTIVE : FRAME_MS;
+    }
+    let raf = 0;
+    let lastDraw = 0;
+    let running = false;
+    let disposed = false;
+    let frameBudget = FRAME_MS;
+    const reduceQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    function frame(now) {
+      raf = requestAnimationFrame(frame);
+      const elapsed = now - lastDraw;
+      if (elapsed < frameBudget - 1) return;
+      const dt = Math.min(elapsed, 100);
+      lastDraw = now;
+      fieldTime += dt / 1e3 * paramsRef.current.speed;
+      draw(dt);
+    }
+    function start() {
+      if (running || disposed || reduceQuery.matches || document.hidden) return;
+      running = true;
+      lastDraw = performance.now();
+      raf = requestAnimationFrame(frame);
+    }
+    function stop() {
+      running = false;
+      cancelAnimationFrame(raf);
+    }
+    function renderOnce() {
+      if (disposed || running) return;
+      draw(COLOR_FADE_MS);
+    }
+    redrawRef.current = renderOnce;
+    const onReduceChange = () => {
+      if (reduceQuery.matches) {
+        stop();
+        renderOnce();
+      } else {
+        start();
+      }
+    };
+    reduceQuery.addEventListener("change", onReduceChange);
+    const onVisibility = () => {
+      if (document.hidden) stop();
+      else start();
+    };
+    document.addEventListener("visibilitychange", onVisibility);
+    const themeObserver = new MutationObserver(() => {
+      colorsDirty = true;
+      if (!running) {
+        readColors(colorTarget);
+        colorCurrent.set(colorTarget);
+        colorsDirty = false;
+        renderOnce();
+      }
+    });
+    themeObserver.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme", "style"]
+    });
+    const resizeObserver = new ResizeObserver(() => {
+      if (!running) {
+        renderOnce();
+      }
+    });
+    resizeObserver.observe(canvas);
+    let restoreTimer = 0;
+    const onContextLost = (e) => {
+      e.preventDefault();
+      stop();
+      setActive(false);
+      window.clearTimeout(restoreTimer);
+      restoreTimer = window.setTimeout(() => {
+        if (disposed || !gl.isContextLost()) return;
+        try {
+          loseExt()?.restoreContext();
+        } catch {
+          setSupported(false);
+        }
+      }, 700);
+    };
+    const onContextRestored = () => {
+      if (initGL()) {
+        bufWidth = 0;
+        bufHeight = 0;
+        uploadedBlobs = null;
+        colorsDirty = true;
+        setActive(true);
+        if (reduceQuery.matches) renderOnce();
+        else start();
+      }
+    };
+    canvas.addEventListener("webglcontextlost", onContextLost);
+    canvas.addEventListener("webglcontextrestored", onContextRestored);
+    if (gl.isContextLost()) {
+      const ext = loseExt();
+      if (!ext) {
+        queueMicrotask(() => setSupported(false));
+      } else {
+        try {
+          ext.restoreContext();
+        } catch {
+          queueMicrotask(() => setSupported(false));
+        }
+      }
+    } else if (initGL()) {
+      draw(COLOR_FADE_MS);
+      setActive(true);
+      start();
+    } else {
+      setSupported(false);
+    }
+    return () => {
+      disposed = true;
+      stop();
+      window.clearTimeout(restoreTimer);
+      redrawRef.current = () => {
+      };
+      window.removeEventListener("pointermove", onPointerMove);
+      reduceQuery.removeEventListener("change", onReduceChange);
+      document.removeEventListener("visibilitychange", onVisibility);
+      themeObserver.disconnect();
+      resizeObserver.disconnect();
+      canvas.removeEventListener("webglcontextlost", onContextLost);
+      canvas.removeEventListener("webglcontextrestored", onContextRestored);
+      if (program) gl.deleteProgram(program);
+      if (vao) gl.deleteVertexArray(vao);
+      try {
+        if (!gl.isContextLost()) loseExt()?.loseContext();
+      } catch {
+      }
+    };
+  }, [canvasRef, enabled]);
+  return { supported, active };
+}
+export {
+  DEFAULT_SHADER_BLOBS,
+  DEFAULT_SHADER_PARAMS,
+  parseColor,
+  srgbToLinear,
+  useShaderField
+};

package/components/registry.json

@@ -516,6 +516,14 @@
       "category": "data-display",
       "client": true
     },
+    {
+      "name": "ShaderField",
+      "label": "Shader field",
+      "slug": "shader-field",
+      "description": "An ambient WebGL2 field of soft light sources that sample colour tokens, with a reported fallback status.",
+      "category": "layout",
+      "client": true
+    },
     {
       "name": "Skeleton",
       "label": "Skeleton",

package/components/registry.json.d.ts

@@ -516,6 +516,14 @@ declare const _default: {
       "category": "data-display",
       "client": true
     },
+    {
+      "name": "ShaderField",
+      "label": "Shader field",
+      "slug": "shader-field",
+      "description": "An ambient WebGL2 field of soft light sources that sample colour tokens, with a reported fallback status.",
+      "category": "layout",
+      "client": true
+    },
     {
       "name": "Skeleton",
       "label": "Skeleton",