lensfx 0.1.2 → 0.1.3

package/dist/vanilla.js

@@ -0,0 +1,1694 @@
+'use strict';
+
+// src/engine/math.ts
+function erf(x) {
+  return Math.tanh(1.7724538509 * x);
+}
+function integrateDome(R, t) {
+  let sum = 0;
+  for (let n = 0; n <= 200; n++) {
+    const a = n / 200 * t;
+    const slope = a / Math.sqrt(R * R - a * a);
+    sum += n === 0 || n === 200 ? 0.5 * slope : slope;
+  }
+  return sum / 200;
+}
+function computeDomeConstants(domeDepth, halfW, halfH) {
+  const a = Math.max(0.01, Math.min(domeDepth, Math.min(halfW, halfH) - 1));
+  const Rx = (halfW * halfW + a * a) / (2 * a);
+  const Ry = (halfH * halfH + a * a) / (2 * a);
+  const intX = integrateDome(Rx, halfW);
+  const intY = integrateDome(Ry, halfH);
+  return {
+    Rx,
+    Ry,
+    scaleX: intX > 0 ? 0.5 / intX : 1,
+    scaleY: intY > 0 ? 0.5 / intY : 1
+  };
+}
+function domeGradient(pos, R, scale) {
+  const p = Math.min(pos, 0.999 * R);
+  return p / Math.sqrt(R * R - p * p) * scale;
+}
+function colorMatrixValues(ratioX, ratioY) {
+  return `${ratioX} 0 0 0 ${0.5 * (1 - ratioX)}  0 ${ratioY} 0 0 ${0.5 * (1 - ratioY)}  0 0 1 0 0  0 0 0 1 0`;
+}
+var maskCache = /* @__PURE__ */ new Map();
+function getSvgMaskDataUri(width, height, radius) {
+  const n = Math.max(1, Math.round(width));
+  const l = Math.max(1, Math.round(height));
+  const i = Math.max(0, Math.min(Math.round(radius), Math.min(n, l) / 2));
+  const key = `${n}|${l}|${i}`;
+  const cached = maskCache.get(key);
+  if (cached) return { uri: cached, key };
+  const w = Math.max(0, n - 1);
+  const h = Math.max(0, l - 1);
+  const r = Math.max(0, i - 0.5);
+  const svg = `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 ${n} ${l}' preserveAspectRatio='none'><rect x='0.5' y='0.5' width='${w}' height='${h}' rx='${r}' ry='${r}' fill='black'/></svg>`;
+  const uri = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+  maskCache.set(key, uri);
+  return { uri, key };
+}
+function createDisplacementMapGeneratorSync(mapSize) {
+  let canvas = null;
+  let ctx = null;
+  let imgData = null;
+  let domeConstants = null;
+  let cachedDomeDepth = -Infinity;
+  let cachedHalfW = -Infinity;
+  let cachedHalfH = -Infinity;
+  let xLookup = null;
+  let cachedF = 0;
+  let dirtyDome = true;
+  return {
+    /**
+     * Generate a new displacement map and return a PNG data URL.
+     * Reuses internal canvas memory; safe to call every animation frame.
+     */
+    generate(input) {
+      if (!canvas) {
+        canvas = document.createElement("canvas");
+        canvas.width = mapSize;
+        canvas.height = mapSize;
+        ctx = canvas.getContext("2d");
+        imgData = ctx.createImageData(mapSize, mapSize);
+      }
+      const {
+        lensHalfWidth: x,
+        lensHalfHeight: y,
+        borderRadius: b,
+        depth: M,
+        sdfBoundary: R,
+        edgeFalloff: S,
+        specularRotation: w = 45,
+        glowStrength: A = 0,
+        glowSpread: v = 1,
+        glowExponent: E = 1.5,
+        edgeStrength: $ = 0,
+        edgeWidth: C = 3,
+        edgeExponent: k = 1.5,
+        domeDepth: j = 0,
+        splayAmount: I = 1
+      } = input;
+      const T = imgData.data;
+      const F = mapSize >> 1;
+      const D = Math.min(b, Math.min(x, y));
+      const L = Math.max(0, x - M);
+      const B = Math.max(0, y - M);
+      const H = Math.max(0, Math.min(b, Math.min(L, B)));
+      const O = M > 0 ? 1 / (M * Math.SQRT2) : 1e6;
+      const hasSpecular = A > 0 || $ > 0;
+      const W = w * Math.PI / 180;
+      const U = Math.cos(W);
+      const G = Math.sin(W);
+      const N = (1 - v) * Math.SQRT2;
+      const q = v * Math.SQRT2;
+      const z = q > 1e-3 ? 1 / q : 0;
+      const Y = C > 0 ? 1 / C : 0;
+      const X = 2 * x / mapSize;
+      const P = 2 * y / mapSize;
+      const V = 1 / x;
+      const K = 1 / y;
+      const hasDome = j > 0;
+      const hasSplay = I < 1;
+      if (hasDome) {
+        if (!domeConstants || Math.abs(j - cachedDomeDepth) > 0.5 || Math.abs(x - cachedHalfW) > 1 || Math.abs(y - cachedHalfH) > 1) {
+          domeConstants = computeDomeConstants(j, x, y);
+          cachedDomeDepth = j;
+          cachedHalfW = x;
+          cachedHalfH = y;
+          dirtyDome = true;
+        }
+        if (cachedF !== F) {
+          xLookup = new Float32Array(F);
+          cachedF = F;
+          dirtyDome = true;
+        }
+        if (dirtyDome && xLookup && domeConstants) {
+          const r2 = domeConstants.Rx * domeConstants.Rx;
+          const clampVal = 0.999 * domeConstants.Rx;
+          for (let col = 0; col < F; col++) {
+            const ox = -((col + 0.5) * X - x);
+            const clamped = ox < clampVal ? ox : clampVal;
+            xLookup[col] = clamped / Math.sqrt(r2 - clamped * clamped) * domeConstants.scaleX;
+          }
+          dirtyDome = false;
+        }
+      }
+      const domeX = hasDome ? xLookup : null;
+      const minHalf = 0.5 * Math.min(x, y);
+      const invMinHalf = minHalf > 0 ? 1 / minHalf : 0;
+      const startTime = performance.now();
+      for (let t = 0; t < F; t++) {
+        const rowOpposite = mapSize - 1 - t;
+        const oy = -((t + 0.5) * P - y);
+        const iy = oy - y + D;
+        const oSdfY = S ? oy - B + H : 0;
+        const gy = hasDome && domeConstants ? domeGradient(oy, domeConstants.Ry, domeConstants.scaleY) : oy * K > 1 ? 1 : oy * K;
+        const rawGy = oy * K > 1 ? 1 : oy * K;
+        const splayY = hasSplay ? Math.max(0, 1 - (y - oy) * invMinHalf) : 0;
+        for (let n = 0; n < F; n++) {
+          const colOpposite = mapSize - 1 - n;
+          const ox = -((n + 0.5) * X - x);
+          const ix = ox - x + D;
+          const gxMax = ix > 0 ? ix : 0;
+          const gyMax = iy > 0 ? iy : 0;
+          const dist2 = gxMax * gxMax + gyMax * gyMax;
+          const sdf = (dist2 > 0 ? Math.sqrt(dist2) : 0) + (ix > iy ? ix > 0 ? 0 : ix : iy > 0 ? 0 : iy) - D;
+          const idxTL = (t * mapSize + n) * 4;
+          const idxTR = (t * mapSize + colOpposite) * 4;
+          const idxBL = (rowOpposite * mapSize + n) * 4;
+          const idxBR = (rowOpposite * mapSize + colOpposite) * 4;
+          if (!R || sdf < 0) {
+            let specTL = 128, specTR = 128, specBL = 128, specBR = 128;
+            let curGx = domeX ? domeX[n] : ox * V > 1 ? 1 : ox * V;
+            let curGy = gy;
+            if (hasSplay) {
+              const splayFac = 1 - I;
+              const effY = splayY * splayFac;
+              const effX = Math.max(0, 1 - (x - ox) * invMinHalf) * splayFac;
+              if (effY > 1e-3 || effX > 1e-3) {
+                const prevGx = curGx;
+                const prevGy = curGy;
+                curGx = prevGx * (1 - effY);
+                curGy = prevGy * (1 - effX);
+                const prevMag = Math.sqrt(prevGx * prevGx + prevGy * prevGy);
+                const newMag = Math.sqrt(curGx * curGx + curGy * curGy);
+                if (newMag > 1e-3) {
+                  const norm = prevMag / newMag;
+                  curGx *= norm;
+                  curGy *= norm;
+                }
+              }
+            }
+            let falloff = 1;
+            if (S) {
+              const fx = ox - L + H;
+              const fy = oSdfY;
+              const mx = fx > 0 ? fx : 0;
+              const my = fy > 0 ? fy : 0;
+              const falloffSdf = Math.sqrt(mx * mx + my * my) + (fx > fy ? fx > 0 ? 0 : fx : fy > 0 ? 0 : fy) - H;
+              falloff = 0.5 * (1 + erf(falloffSdf * O));
+            }
+            const hx = 0.5 * curGx * falloff;
+            const hy = 0.5 * curGy * falloff;
+            const rTL = (0.5 + hx) * 255 + 0.5 | 0;
+            const rTR = (0.5 - hx) * 255 + 0.5 | 0;
+            const gTL = (0.5 + hy) * 255 + 0.5 | 0;
+            const gBL = (0.5 - hy) * 255 + 0.5 | 0;
+            if (hasSpecular) {
+              const rawGx = (ox * V > 1 ? 1 : ox * V) * U;
+              const rawGyProj = rawGy * G;
+              const dot1 = rawGx + rawGyProj;
+              const dot2 = rawGx - rawGyProj;
+              const absDot1 = dot1 < 0 ? -dot1 : dot1;
+              const absDot2 = dot2 < 0 ? -dot2 : dot2;
+              let edgeAtten = 0;
+              if ($ > 0) {
+                edgeAtten = sdf < 0 ? 1 + sdf * Y : 0;
+                if (edgeAtten < 0) edgeAtten = 0;
+              }
+              let glow1 = 0, glow2 = 0;
+              if (A > 0) {
+                const s1 = (absDot1 - N) * z;
+                glow1 += A * Math.pow(s1 < 0 ? 0 : s1 > 1 ? 1 : s1, E) * falloff;
+                const s2 = (absDot2 - N) * z;
+                glow2 += A * Math.pow(s2 < 0 ? 0 : s2 > 1 ? 1 : s2, E) * falloff;
+              }
+              if ($ > 0) {
+                glow1 += $ * edgeAtten * Math.pow(absDot1, k);
+                glow2 += $ * edgeAtten * Math.pow(absDot2, k);
+              }
+              if (glow1 > 1) glow1 = 1;
+              if (glow2 > 1) glow2 = 1;
+              specTL = 127 * glow1 + 128 + 0.5 | 0;
+              specBR = 127 * glow1 + 128 + 0.5 | 0;
+              specTR = 127 * glow2 + 128 + 0.5 | 0;
+              specBL = 127 * glow2 + 128 + 0.5 | 0;
+            }
+            T[idxTL] = rTL;
+            T[idxTL + 1] = gTL;
+            T[idxTL + 2] = specTL;
+            T[idxTL + 3] = 255;
+            T[idxTR] = rTR;
+            T[idxTR + 1] = gTL;
+            T[idxTR + 2] = specTR;
+            T[idxTR + 3] = 255;
+            T[idxBL] = rTL;
+            T[idxBL + 1] = gBL;
+            T[idxBL + 2] = specBL;
+            T[idxBL + 3] = 255;
+            T[idxBR] = rTR;
+            T[idxBR + 1] = gBL;
+            T[idxBR + 2] = specBR;
+            T[idxBR + 3] = 255;
+          } else {
+            for (const idx of [idxTL, idxTR, idxBL, idxBR]) {
+              T[idx] = 128;
+              T[idx + 1] = 128;
+              T[idx + 2] = 128;
+              T[idx + 3] = 255;
+            }
+          }
+        }
+      }
+      const loopMs = performance.now() - startTime;
+      ctx.putImageData(imgData, 0, 0);
+      const encodeStart = performance.now();
+      const dataUrl = canvas.toDataURL();
+      const encodeMs = performance.now() - encodeStart;
+      return { dataUrl, loopMs, encodeMs };
+    },
+    /** Release canvas memory. Call in React cleanup (useEffect return). */
+    dispose() {
+      if (canvas) {
+        canvas.width = 0;
+        canvas.height = 0;
+        canvas = null;
+      }
+      ctx = null;
+      imgData = null;
+      domeConstants = null;
+      cachedDomeDepth = -Infinity;
+      cachedHalfW = -Infinity;
+      cachedHalfH = -Infinity;
+      dirtyDome = true;
+    }
+  };
+}
+async function generateDisplacementMapAsync(canvas, params) {
+  const {
+    canvasSize: r,
+    lensHalfWidth: n,
+    lensHalfHeight: l,
+    borderRadius: i,
+    depth: o,
+    sdfBoundary: u,
+    edgeFalloff: c,
+    specularRotation: f = 45,
+    glowStrength: d = 0,
+    glowSpread: g = 1,
+    glowExponent: h = 1.5,
+    edgeStrength: p = 0,
+    edgeWidth: m = 3,
+    edgeExponent: xx = 1.5,
+    domeDepth: y = 0,
+    splayAmount: bv = 1
+  } = params;
+  canvas.width = r;
+  canvas.height = r;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return null;
+  const imgD = ctx.createImageData(r, r);
+  const S = Math.min(i, Math.min(n, l));
+  const w = Math.max(0, n - o);
+  const A = Math.max(0, l - o);
+  const v = Math.max(0, Math.min(i, Math.min(w, A)));
+  const E = o > 0 ? 1 / (o * Math.SQRT2) : 1e6;
+  const hasSpecular = d > 0 || p > 0;
+  const C = f * Math.PI / 180;
+  const k = Math.cos(C);
+  const j = Math.sin(C);
+  const II = (1 - g) * Math.SQRT2;
+  const TT = g * Math.SQRT2;
+  const F = y > 0 ? computeDomeConstants(y, n, l) : null;
+  const D = bv < 1;
+  const Lv = 0.5 * Math.min(n, l);
+  const Bv = Lv > 0 ? 1 / Lv : 0;
+  for (let rowBatch = 0; rowBatch < r; rowBatch += 64) {
+    const endRow = Math.min(rowBatch + 64, r);
+    for (let row = rowBatch; row < endRow; row++) {
+      for (let col = 0; col < r; col++) {
+        const idx = (row * r + col) * 4;
+        const ox = (col + 0.5) / r * (2 * n) - n;
+        const oy = (row + 0.5) / r * (2 * l) - l;
+        const absX = Math.abs(ox);
+        const absY = Math.abs(oy);
+        const Mv = absX - n + S;
+        const Cy = absY - l + S;
+        const clampX = Math.max(Mv, 0);
+        const clampY = Math.max(Cy, 0);
+        const dist2 = clampX * clampX + clampY * clampY;
+        const sdf = (dist2 > 0 ? Math.sqrt(dist2) : 0) + Math.min(Math.max(Mv, Cy), 0) - S;
+        if (!u || sdf < 0) {
+          let gx;
+          let gy;
+          if (F) {
+            gx = Math.sign(ox) * domeGradient(absX, F.Rx, F.scaleX);
+            gy = Math.sign(oy) * domeGradient(absY, F.Ry, F.scaleY);
+          } else {
+            gx = Math.max(-1, Math.min(1, ox / n));
+            gy = Math.max(-1, Math.min(1, oy / l));
+          }
+          let effGx = gx;
+          let effGy = gy;
+          if (D) {
+            const attenY = Math.max(0, 1 - (l - absY) * Bv) * (1 - bv);
+            const attenX = Math.max(0, 1 - (n - absX) * Bv) * (1 - bv);
+            if (attenY > 1e-3 || attenX > 1e-3) {
+              const oldGx = effGx;
+              const oldGy = effGy;
+              effGx = oldGx * (1 - attenY);
+              effGy = oldGy * (1 - attenX);
+              const oldMag = Math.sqrt(oldGx * oldGx + oldGy * oldGy);
+              const newMag = Math.sqrt(effGx * effGx + effGy * effGy);
+              if (newMag > 1e-3) {
+                const norm = oldMag / newMag;
+                effGx *= norm;
+                effGy *= norm;
+              }
+            }
+          }
+          let falloff = 1;
+          if (c) {
+            const innerX = absX - w + v;
+            const innerY = absY - A + v;
+            const innerSdf = Math.sqrt(Math.max(innerX, 0) ** 2 + Math.max(innerY, 0) ** 2) + Math.min(Math.max(innerX, innerY), 0) - v;
+            falloff = 0.5 * (1 + erf(innerSdf * E));
+          }
+          imgD.data[idx] = Math.round((0.5 - 0.5 * effGx * falloff) * 255);
+          imgD.data[idx + 1] = Math.round((0.5 - 0.5 * effGy * falloff) * 255);
+          if (hasSpecular) {
+            const dot = Math.abs(
+              Math.max(-1, Math.min(1, ox / n)) * k + Math.max(-1, Math.min(1, oy / l)) * j
+            );
+            let glow = 0;
+            if (d > 0) {
+              const spread = TT > 1e-3 ? Math.min(1, Math.max(0, dot - II) / TT) : 0;
+              glow += d * Math.pow(spread, h) * falloff;
+            }
+            if (p > 0) {
+              const edgeVal = sdf < 0 ? Math.max(0, 1 + sdf / m) : 0;
+              glow += p * edgeVal * Math.pow(dot, xx);
+            }
+            glow = Math.min(1, glow);
+            imgD.data[idx + 2] = Math.round(127 * glow + 128);
+          } else {
+            imgD.data[idx + 2] = 128;
+          }
+        } else {
+          imgD.data[idx] = 128;
+          imgD.data[idx + 1] = 128;
+          imgD.data[idx + 2] = 128;
+        }
+        imgD.data[idx + 3] = 255;
+      }
+    }
+    if (rowBatch + 64 < r) {
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    }
+  }
+  ctx.putImageData(imgD, 0, 0);
+  const blob = await new Promise(
+    (resolve) => canvas.toBlob(resolve, "image/png")
+  );
+  return blob ? URL.createObjectURL(blob) : null;
+}
+
+// src/createLens.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+var nextId = 0;
+function createLens(target, options = {}) {
+  if (typeof document === "undefined") {
+    throw new Error("[lensfx] createLens can only be called in a browser environment.");
+  }
+  const resolved = typeof target === "string" ? document.querySelector(target) : target;
+  if (!resolved) {
+    throw new Error(`[lensfx] Target element "${target}" was not found.`);
+  }
+  const container = resolved;
+  let currentOptions = { ...options };
+  let targetEl = container;
+  if (currentOptions.refractionTarget) {
+    const customTarget = typeof currentOptions.refractionTarget === "string" ? container.querySelector(currentOptions.refractionTarget) || document.querySelector(currentOptions.refractionTarget) : currentOptions.refractionTarget;
+    if (customTarget) {
+      targetEl = customTarget;
+    }
+  }
+  const computedStyle = window.getComputedStyle(container);
+  const originalPosition = container.style.position;
+  if (computedStyle.position === "static") {
+    container.style.position = "relative";
+  }
+  const lensId = `lensfx-${++nextId}-${Math.random().toString(36).substring(2, 7)}`;
+  const filterId = `${lensId}-filter`;
+  const svgEl = document.createElementNS(SVG_NS, "svg");
+  svgEl.setAttribute("class", "lensfx-svg-root");
+  svgEl.setAttribute("aria-hidden", "true");
+  svgEl.style.cssText = "position:absolute;width:0;height:0;overflow:hidden;pointer-events:none;left:0;top:0;";
+  const defsEl = document.createElementNS(SVG_NS, "defs");
+  const filterEl = document.createElementNS(SVG_NS, "filter");
+  filterEl.id = filterId;
+  filterEl.setAttribute("filterUnits", "objectBoundingBox");
+  filterEl.setAttribute("primitiveUnits", "objectBoundingBox");
+  filterEl.setAttribute("color-interpolation-filters", "sRGB");
+  filterEl.setAttribute("x", "0");
+  filterEl.setAttribute("y", "0");
+  filterEl.setAttribute("width", "1");
+  filterEl.setAttribute("height", "1");
+  defsEl.appendChild(filterEl);
+  svgEl.appendChild(defsEl);
+  container.appendChild(svgEl);
+  const overlayEl = document.createElement("div");
+  overlayEl.className = "lensfx-lens-overlay";
+  overlayEl.style.cssText = "position:absolute;top:0;left:0;pointer-events:none;box-sizing:border-box;will-change:transform;";
+  container.appendChild(overlayEl);
+  let mapDataUrl = currentOptions.displacementMapUrl || "";
+  let currentMapSize = currentOptions.mapSize || 256;
+  let generator = createDisplacementMapGeneratorSync(currentMapSize);
+  let feImageEl = null;
+  let currentMaskKey = null;
+  let isDestroyed = false;
+  let curX = currentOptions.x ?? 0.5;
+  let curY = currentOptions.y ?? 0.5;
+  function getDimensions() {
+    const width = currentOptions.width ?? currentOptions.lensW ?? 160;
+    const height = currentOptions.height ?? currentOptions.lensH ?? 100;
+    const radius = currentOptions.radius ?? currentOptions.borderRadius ?? Math.min(width, height) / 4;
+    return { width, height, radius };
+  }
+  function renderMap() {
+    if (isDestroyed) return;
+    if (currentOptions.displacementMapUrl) {
+      mapDataUrl = currentOptions.displacementMapUrl;
+      if (feImageEl) feImageEl.setAttribute("href", mapDataUrl);
+      currentOptions.onMapChange?.(mapDataUrl);
+      return;
+    }
+    const { width, height, radius } = getDimensions();
+    const mapSize = currentOptions.mapSize || 256;
+    if (mapSize !== currentMapSize) {
+      generator.dispose();
+      currentMapSize = mapSize;
+      generator = createDisplacementMapGeneratorSync(currentMapSize);
+    }
+    const depth = currentOptions.depth ?? 2;
+    const result = generator.generate({
+      lensHalfWidth: width / 2,
+      lensHalfHeight: height / 2,
+      borderRadius: radius,
+      depth,
+      sdfBoundary: currentOptions.sdfBoundary ?? true,
+      edgeFalloff: currentOptions.edgeFalloff ?? true,
+      specularRotation: currentOptions.specularRotation ?? 45,
+      glowStrength: currentOptions.glowStrength ?? 0.3,
+      glowSpread: currentOptions.glowSpread ?? 1,
+      glowExponent: currentOptions.glowExponent ?? 1.5,
+      edgeStrength: currentOptions.edgeStrength ?? 0.4,
+      edgeWidth: currentOptions.edgeWidth ?? 3,
+      edgeExponent: 1.5,
+      domeDepth: currentOptions.domeDepth ?? 6,
+      splayAmount: currentOptions.splayAmount ?? 0.8
+    });
+    mapDataUrl = result.dataUrl;
+    if (feImageEl) feImageEl.setAttribute("href", mapDataUrl);
+    currentOptions.onMapChange?.(mapDataUrl);
+  }
+  function buildFilterPipeline() {
+    while (filterEl.firstChild) {
+      filterEl.removeChild(filterEl.firstChild);
+    }
+    currentOptions.depth ?? 2;
+    const chroma = currentOptions.chroma ?? currentOptions.chromaAmount ?? 0.6;
+    const scaleX = currentOptions.scaleX ?? 0.25;
+    const scaleY = currentOptions.scaleY ?? 0.25;
+    const maxScale = Math.max(scaleX, scaleY);
+    const scaleRatioX = maxScale > 0 ? scaleX / maxScale : 0;
+    const scaleRatioY = maxScale > 0 ? scaleY / maxScale : 0;
+    const needsMatrix = scaleRatioX !== 1 || scaleRatioY !== 1;
+    const matrixString = colorMatrixValues(scaleRatioX, scaleRatioY);
+    const feFlood = document.createElementNS(SVG_NS, "feFlood");
+    feFlood.setAttribute("flood-color", "rgb(128,128,128)");
+    feFlood.setAttribute("flood-opacity", "1");
+    feFlood.setAttribute("result", "mapBg");
+    filterEl.appendChild(feFlood);
+    feImageEl = document.createElementNS(SVG_NS, "feImage");
+    feImageEl.setAttribute("href", mapDataUrl);
+    feImageEl.setAttribute("preserveAspectRatio", "none");
+    feImageEl.setAttribute("result", "rawMap");
+    filterEl.appendChild(feImageEl);
+    const feComp = document.createElementNS(SVG_NS, "feComposite");
+    feComp.setAttribute("in", "rawMap");
+    feComp.setAttribute("in2", "mapBg");
+    feComp.setAttribute("operator", "over");
+    feComp.setAttribute("result", "map");
+    filterEl.appendChild(feComp);
+    if (needsMatrix) {
+      const feMat = document.createElementNS(SVG_NS, "feColorMatrix");
+      feMat.setAttribute("in", "map");
+      feMat.setAttribute("type", "matrix");
+      feMat.setAttribute("values", matrixString);
+      feMat.setAttribute("result", "scaledMap");
+      filterEl.appendChild(feMat);
+    }
+    const mapSource = needsMatrix ? "scaledMap" : "map";
+    let sourceGraphic = "SourceGraphic";
+    if (currentOptions.blur && currentOptions.blur > 0) {
+      const feBlur = document.createElementNS(SVG_NS, "feGaussianBlur");
+      feBlur.setAttribute("in", "SourceGraphic");
+      const cRect = container.getBoundingClientRect();
+      const bw = cRect.width > 0 ? currentOptions.blur / cRect.width : 0.01;
+      const bh = cRect.height > 0 ? currentOptions.blur / cRect.height : 0.01;
+      feBlur.setAttribute("stdDeviation", `${bw} ${bh}`);
+      feBlur.setAttribute("result", "blurred");
+      filterEl.appendChild(feBlur);
+      sourceGraphic = "blurred";
+    }
+    if (chroma > 0) {
+      const dispR = document.createElementNS(SVG_NS, "feDisplacementMap");
+      dispR.setAttribute("in", sourceGraphic);
+      dispR.setAttribute("in2", mapSource);
+      dispR.setAttribute("scale", String(maxScale * (1 + 0.2 * chroma)));
+      dispR.setAttribute("xChannelSelector", "R");
+      dispR.setAttribute("yChannelSelector", "G");
+      filterEl.appendChild(dispR);
+      const matR = document.createElementNS(SVG_NS, "feColorMatrix");
+      matR.setAttribute("type", "matrix");
+      matR.setAttribute("values", "1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0");
+      matR.setAttribute("result", "dispR");
+      filterEl.appendChild(matR);
+      const dispG = document.createElementNS(SVG_NS, "feDisplacementMap");
+      dispG.setAttribute("in", sourceGraphic);
+      dispG.setAttribute("in2", mapSource);
+      dispG.setAttribute("scale", String(maxScale * (1 + 0.1 * chroma)));
+      dispG.setAttribute("xChannelSelector", "R");
+      dispG.setAttribute("yChannelSelector", "G");
+      filterEl.appendChild(dispG);
+      const matG = document.createElementNS(SVG_NS, "feColorMatrix");
+      matG.setAttribute("type", "matrix");
+      matG.setAttribute("values", "0 0 0 0 0  0 1 0 0 0  0 0 0 0 0  0 0 0 1 0");
+      matG.setAttribute("result", "dispG");
+      filterEl.appendChild(matG);
+      const dispB = document.createElementNS(SVG_NS, "feDisplacementMap");
+      dispB.setAttribute("in", sourceGraphic);
+      dispB.setAttribute("in2", mapSource);
+      dispB.setAttribute("scale", String(maxScale));
+      dispB.setAttribute("xChannelSelector", "R");
+      dispB.setAttribute("yChannelSelector", "G");
+      filterEl.appendChild(dispB);
+      const matB = document.createElementNS(SVG_NS, "feColorMatrix");
+      matB.setAttribute("type", "matrix");
+      matB.setAttribute("values", "0 0 0 0 0  0 0 0 0 0  0 0 1 0 0  0 0 0 1 0");
+      matB.setAttribute("result", "dispB");
+      filterEl.appendChild(matB);
+      const compRG = document.createElementNS(SVG_NS, "feComposite");
+      compRG.setAttribute("in", "dispR");
+      compRG.setAttribute("in2", "dispG");
+      compRG.setAttribute("operator", "arithmetic");
+      compRG.setAttribute("k1", "0");
+      compRG.setAttribute("k2", "1");
+      compRG.setAttribute("k3", "1");
+      compRG.setAttribute("k4", "0");
+      filterEl.appendChild(compRG);
+      const compRGB = document.createElementNS(SVG_NS, "feComposite");
+      compRGB.setAttribute("in2", "dispB");
+      compRGB.setAttribute("operator", "arithmetic");
+      compRGB.setAttribute("k1", "0");
+      compRGB.setAttribute("k2", "1");
+      compRGB.setAttribute("k3", "1");
+      compRGB.setAttribute("k4", "0");
+      compRGB.setAttribute("result", "lensResult");
+      filterEl.appendChild(compRGB);
+    } else {
+      const dispSingle = document.createElementNS(SVG_NS, "feDisplacementMap");
+      dispSingle.setAttribute("in", sourceGraphic);
+      dispSingle.setAttribute("in2", mapSource);
+      dispSingle.setAttribute("scale", String(maxScale));
+      dispSingle.setAttribute("xChannelSelector", "R");
+      dispSingle.setAttribute("yChannelSelector", "G");
+      dispSingle.setAttribute("result", "lensResult");
+      filterEl.appendChild(dispSingle);
+    }
+    const specStrength = currentOptions.specularStrength ?? 1;
+    if (specStrength > 0) {
+      const specMat = document.createElementNS(SVG_NS, "feColorMatrix");
+      specMat.setAttribute("in", "map");
+      specMat.setAttribute("type", "matrix");
+      specMat.setAttribute("values", "0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 1 0 -0.50196");
+      specMat.setAttribute("result", "specMask");
+      filterEl.appendChild(specMat);
+      const specComp = document.createElementNS(SVG_NS, "feComposite");
+      specComp.setAttribute("in", "specMask");
+      specComp.setAttribute("in2", "lensResult");
+      specComp.setAttribute("operator", "arithmetic");
+      specComp.setAttribute("k1", "0");
+      specComp.setAttribute("k2", String(specStrength));
+      specComp.setAttribute("k3", "1");
+      specComp.setAttribute("k4", "0");
+      specComp.setAttribute("result", "lensResult");
+      filterEl.appendChild(specComp);
+    }
+    const lensMask = document.createElementNS(SVG_NS, "feFlood");
+    lensMask.setAttribute("flood-color", "black");
+    lensMask.setAttribute("flood-opacity", "1");
+    lensMask.setAttribute("result", "lensMask");
+    filterEl.appendChild(lensMask);
+    const holeComp = document.createElementNS(SVG_NS, "feComposite");
+    holeComp.setAttribute("in", "SourceGraphic");
+    holeComp.setAttribute("in2", "lensMask");
+    holeComp.setAttribute("operator", "out");
+    holeComp.setAttribute("result", "holedSG");
+    filterEl.appendChild(holeComp);
+    const finalComp = document.createElementNS(SVG_NS, "feComposite");
+    finalComp.setAttribute("in", "lensResult");
+    finalComp.setAttribute("in2", "holedSG");
+    finalComp.setAttribute("operator", "over");
+    filterEl.appendChild(finalComp);
+  }
+  function updateLayout() {
+    if (isDestroyed) return;
+    const rect = container.getBoundingClientRect();
+    const cw = rect.width || container.clientWidth || 300;
+    const ch = rect.height || container.clientHeight || 200;
+    const { width, height, radius } = getDimensions();
+    const px = curX <= 1 && curX >= 0 ? curX * cw : curX;
+    const py = curY <= 1 && curY >= 0 ? curY * ch : pyCoordinate(curY, ch);
+    function pyCoordinate(val, containerH) {
+      return val <= 1 && val >= 0 ? val * containerH : val;
+    }
+    const lensLeft = px - width / 2;
+    const lensTop = py - height / 2;
+    if (feImageEl && cw > 0 && ch > 0) {
+      feImageEl.setAttribute("x", String(lensLeft / cw));
+      feImageEl.setAttribute("y", String(lensTop / ch));
+      feImageEl.setAttribute("width", String(width / cw));
+      feImageEl.setAttribute("height", String(height / ch));
+    }
+    overlayEl.style.width = `${width}px`;
+    overlayEl.style.height = `${height}px`;
+    overlayEl.style.borderRadius = `${radius}px`;
+    overlayEl.style.transform = `translate3d(${lensLeft}px, ${lensTop}px, 0)`;
+    if (currentOptions.shadow === false) {
+      overlayEl.style.boxShadow = "none";
+    } else if (typeof currentOptions.shadow === "string") {
+      overlayEl.style.boxShadow = currentOptions.shadow;
+    } else {
+      overlayEl.style.boxShadow = "0 8px 32px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.35), inset 0 -1px 1px rgba(0, 0, 0, 0.15)";
+    }
+    if (currentOptions.border === false) {
+      overlayEl.style.border = "none";
+    } else if (typeof currentOptions.border === "string") {
+      overlayEl.style.border = currentOptions.border;
+    } else {
+      overlayEl.style.border = "1px solid rgba(255, 255, 255, 0.2)";
+    }
+    const tintColor = currentOptions.tintColor ?? "rgba(255, 255, 255, 0.05)";
+    overlayEl.style.background = tintColor;
+    const tintBlur = currentOptions.tintBlur ?? 0;
+    if (tintBlur > 0) {
+      const blurCss = `blur(${tintBlur}px)`;
+      overlayEl.style.backdropFilter = blurCss;
+      overlayEl.style.setProperty("-webkit-backdrop-filter", blurCss);
+    } else {
+      overlayEl.style.backdropFilter = "none";
+      overlayEl.style.setProperty("-webkit-backdrop-filter", "none");
+    }
+    const { uri, key } = getSvgMaskDataUri(width, height, radius);
+    if (currentMaskKey !== key) {
+      const maskCss = `url("${uri}")`;
+      overlayEl.style.maskImage = maskCss;
+      overlayEl.style.setProperty("-webkit-mask-image", maskCss);
+      overlayEl.style.maskSize = "100% 100%";
+      overlayEl.style.setProperty("-webkit-mask-size", "100% 100%");
+      currentMaskKey = key;
+    }
+    const filterStyle = `url("#${filterId}")`;
+    if (targetEl.style.filter !== filterStyle) {
+      targetEl.style.filter = filterStyle;
+    }
+  }
+  let isPointerActive = false;
+  const onPointerMove = (e) => {
+    if (!currentOptions.interactive || isDestroyed) return;
+    const rect = container.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    setPosition(x, y);
+  };
+  function setInteractive(interactive) {
+    currentOptions.interactive = interactive;
+    if (interactive && !isPointerActive) {
+      container.addEventListener("pointermove", onPointerMove);
+      isPointerActive = true;
+    } else if (!interactive && isPointerActive) {
+      container.removeEventListener("pointermove", onPointerMove);
+      isPointerActive = false;
+    }
+  }
+  function setPosition(x, y) {
+    curX = x;
+    curY = y;
+    currentOptions.onPositionChange?.(x, y);
+    updateLayout();
+  }
+  function update(newOptions) {
+    if (isDestroyed) return;
+    ({ ...currentOptions });
+    currentOptions = { ...currentOptions, ...newOptions };
+    if (newOptions.x !== void 0) curX = newOptions.x;
+    if (newOptions.y !== void 0) curY = newOptions.y;
+    if (newOptions.interactive !== void 0) {
+      setInteractive(newOptions.interactive);
+    }
+    const needsRegen = newOptions.width !== void 0 || newOptions.lensW !== void 0 || newOptions.height !== void 0 || newOptions.lensH !== void 0 || newOptions.radius !== void 0 || newOptions.borderRadius !== void 0 || newOptions.depth !== void 0 || newOptions.domeDepth !== void 0 || newOptions.specularRotation !== void 0 || newOptions.glowStrength !== void 0 || newOptions.glowSpread !== void 0 || newOptions.edgeStrength !== void 0 || newOptions.edgeWidth !== void 0 || newOptions.splayAmount !== void 0 || newOptions.displacementMapUrl !== void 0 || newOptions.mapSize !== void 0;
+    if (needsRegen) {
+      renderMap();
+    }
+    const needsPipelineRebuild = newOptions.chroma !== void 0 || newOptions.chromaAmount !== void 0 || newOptions.scaleX !== void 0 || newOptions.scaleY !== void 0 || newOptions.specularStrength !== void 0 || newOptions.blur !== void 0;
+    if (needsPipelineRebuild || needsRegen) {
+      buildFilterPipeline();
+    }
+    updateLayout();
+  }
+  let resizeObserver = null;
+  if (typeof ResizeObserver !== "undefined") {
+    resizeObserver = new ResizeObserver(() => {
+      updateLayout();
+    });
+    resizeObserver.observe(container);
+  }
+  renderMap();
+  buildFilterPipeline();
+  updateLayout();
+  if (currentOptions.interactive) {
+    setInteractive(true);
+  }
+  function destroy() {
+    if (isDestroyed) return;
+    isDestroyed = true;
+    if (isPointerActive) {
+      container.removeEventListener("pointermove", onPointerMove);
+      isPointerActive = false;
+    }
+    if (resizeObserver) {
+      resizeObserver.disconnect();
+      resizeObserver = null;
+    }
+    if (targetEl.style.filter.includes(filterId)) {
+      targetEl.style.filter = "";
+    }
+    if (container.style.position === "relative" && originalPosition === "") {
+      container.style.position = "";
+    }
+    if (svgEl.parentNode) {
+      svgEl.parentNode.removeChild(svgEl);
+    }
+    if (overlayEl.parentNode) {
+      overlayEl.parentNode.removeChild(overlayEl);
+    }
+    generator.dispose();
+  }
+  return {
+    el: container,
+    targetEl,
+    svgEl,
+    filterEl,
+    overlayEl,
+    get options() {
+      return currentOptions;
+    },
+    get mapDataUrl() {
+      return mapDataUrl;
+    },
+    setPosition,
+    update,
+    setInteractive,
+    destroy
+  };
+}
+
+// src/engine/types.ts
+var DEFAULT_LENS_PARAMS = {
+  lensW: 90,
+  lensH: 60,
+  depth: 0,
+  chromaAmount: 0,
+  scaleX: 0,
+  scaleY: 0,
+  mapSize: 256,
+  borderRadius: 0,
+  blurAmount: 0,
+  sdfBoundary: false,
+  edgeFalloff: false,
+  brightness: 0,
+  specularStrength: 0,
+  specularRotation: 0,
+  glowStrength: 0,
+  glowSpread: 1,
+  glowExponent: 1.5,
+  tint: 0,
+  edgeStrength: 0,
+  edgeWidth: 3,
+  edgeExponent: 1.5,
+  specularDark: false,
+  domeDepth: 0,
+  splayAmount: 0
+};
+var SWITCH_GLASS_DEFAULTS = {
+  lensW: 90,
+  lensH: 60,
+  borderRadius: 30,
+  mapSize: 256,
+  depth: 2,
+  chromaAmount: 1,
+  scaleX: 0.25,
+  scaleY: 0.25,
+  sdfBoundary: true,
+  edgeFalloff: true,
+  domeDepth: 6,
+  splayAmount: 0.4,
+  blurAmount: 0,
+  brightness: 0.06,
+  specularStrength: 1,
+  specularRotation: 45,
+  specularDark: false,
+  tint: 0,
+  glowStrength: 0,
+  glowSpread: 0.5,
+  glowExponent: 1.5,
+  edgeStrength: 0,
+  edgeWidth: 2,
+  edgeExponent: 1.5,
+  edgeShadow: "0 2px 6px rgba(0, 0, 0, 0.16)",
+  edgeInsetShadow: "0 -4px 10px rgba(0, 0, 0, 0.12)"
+};
+var SWITCH_DARK_OVERRIDES = {
+  brightness: 0.12,
+  glowStrength: 0.4,
+  edgeStrength: 0.5
+};
+var SWITCH_LIGHT_OVERRIDES = {
+  brightness: -0.02,
+  specularRotation: 30,
+  specularStrength: 1.5,
+  glowStrength: 0.4,
+  glowSpread: 0.5,
+  glowExponent: 2,
+  edgeStrength: 1,
+  edgeWidth: 1.5,
+  edgeExponent: 1
+};
+var SLIDER_GLASS_DEFAULTS = {
+  lensW: 90,
+  lensH: 60,
+  borderRadius: 30,
+  mapSize: 256,
+  depth: 2,
+  chromaAmount: 0.65,
+  scaleX: 0.06,
+  scaleY: 0.06,
+  sdfBoundary: true,
+  edgeFalloff: true,
+  domeDepth: 5,
+  splayAmount: 0.5,
+  blurAmount: 0,
+  brightness: 0.06,
+  specularStrength: 1.5,
+  specularRotation: 45,
+  specularDark: false,
+  tint: 0,
+  glowStrength: 0.4,
+  glowSpread: 0.5,
+  glowExponent: 1.5,
+  edgeStrength: 0,
+  edgeWidth: 3,
+  edgeExponent: 1.5,
+  edgeShadow: "0 2px 6px rgba(0, 0, 0, 0.16)",
+  edgeInsetShadow: "0 -4px 10px rgba(0, 0, 0, 0.12)",
+  restEdgeShadow: "0 1.333px 5.333px var(--lensfx-shadow-strong, rgba(0,0,0,0.3))"
+};
+var SLIDER_DARK_OVERRIDES = {
+  scaleX: 0.133,
+  scaleY: 0.135,
+  brightness: 0.12,
+  specularRotation: 45,
+  glowExponent: 1.5,
+  edgeStrength: 0.5,
+  edgeWidth: 1,
+  edgeExponent: 1.5
+};
+var SLIDER_LIGHT_OVERRIDES = {
+  scaleX: 0.1,
+  scaleY: 0.1,
+  brightness: -0.02,
+  specularRotation: 30,
+  glowExponent: 2,
+  edgeStrength: 1,
+  edgeWidth: 1,
+  edgeExponent: 1
+};
+var SLIDER_SAFARI_OVERRIDES = {
+  scaleY: 0.25
+};
+
+// src/webgl/VideoRefractionRenderer.ts
+var VERTEX_SHADER = `
+attribute vec2 a_pos;
+varying vec2 v_uv;
+void main() {
+  // Flip Y so UV (0,0) = top-left, matching HTML/CSS coordinates.
+  v_uv = vec2(a_pos.x * 0.5 + 0.5, 0.5 - a_pos.y * 0.5);
+  gl_Position = vec4(a_pos, 0.0, 1.0);
+}
+`;
+var BLUR_FRAGMENT_SHADER = `
+precision highp float;
+uniform sampler2D u_source;
+uniform vec2 u_dir;
+varying vec2 v_uv;
+
+void main() {
+  vec4 c = texture2D(u_source, v_uv) * 0.2042;
+  c += (texture2D(u_source, v_uv + 1.0 * u_dir) + texture2D(u_source, v_uv - 1.0 * u_dir)) * 0.1801;
+  c += (texture2D(u_source, v_uv + 2.0 * u_dir) + texture2D(u_source, v_uv - 2.0 * u_dir)) * 0.1240;
+  c += (texture2D(u_source, v_uv + 3.0 * u_dir) + texture2D(u_source, v_uv - 3.0 * u_dir)) * 0.0663;
+  c += (texture2D(u_source, v_uv + 4.0 * u_dir) + texture2D(u_source, v_uv - 4.0 * u_dir)) * 0.0276;
+  gl_FragColor = c;
+}
+`;
+var REFRACTION_FRAGMENT_SHADER = `
+#extension GL_OES_standard_derivatives : enable
+precision highp float;
+
+uniform sampler2D u_video;
+uniform sampler2D u_map;
+uniform sampler2D u_blurred;
+uniform float u_baseScale[3];
+uniform float u_ratioX[3];
+uniform float u_ratioY[3];
+uniform float u_chromaAmount;
+uniform float u_specStrength;
+uniform float u_adaptStrength;
+uniform float u_specLumaLow;
+uniform float u_specLumaHigh;
+uniform float u_hasBlur;
+uniform vec4 u_bbox;       // (x, y, w, h) normalised, y=0 at top
+uniform vec3 u_circles[3]; // (cx, cy, radius) in bbox pixel space
+uniform float u_scale[3];  // per-circle geometric press scale (1 = unscaled)
+uniform vec4 u_bar;        // (cx, cy, w, h) in bbox pixel space; w<=0 means inactive
+uniform float u_barRadius; // corner radius for the rounded-rect bar lens
+uniform float u_barBaseScale;
+uniform float u_barRatioX;
+uniform float u_barRatioY;
+uniform vec2 u_bboxSize;   // bbox (width, height) in pixels
+
+varying vec2 v_uv;
+
+void main() {
+  vec2 uv = v_uv;
+  vec2 bMin = u_bbox.xy;
+  vec2 bSize = u_bbox.zw;
+  vec2 bMax = bMin + bSize;
+
+  // Outside bounding box -> pass-through video
+  if (uv.x < bMin.x || uv.x > bMax.x || uv.y < bMin.y || uv.y > bMax.y) {
+    gl_FragColor = texture2D(u_video, uv);
+    return;
+  }
+
+  // Map fragment UV -> displacement texture UV
+  vec2 mUV = (uv - bMin) / bSize;
+
+  // Analytical SDF mask (pixel-perfect at any resolution). Tracks the
+  // dominant region so per-region scale/ratio can be picked up via the
+  // loop-constant index (safe in WebGL 1). After the circle loop we test the
+  // rounded-rect "bar" region (when active) and take whichever has the
+  // larger mask value. domCenter/domScale track the dominant lens so the
+  // displacement map is sampled in its (press-)scaled space below.
+  vec2 pxPos = mUV * u_bboxSize;
+  float mask = 0.0;
+  float baseScale = 0.0;
+  float ratioX = 0.0;
+  float ratioY = 0.0;
+
+  // Map-sample scale assignment, tracked SEPARATELY from the tight SDF mask: a
+  // pixel adopts a circle's press scale across the union of its original and
+  // scaled radius (R * max(1, s)). That way the annulus a shrunk lens vacates
+  // samples empty space instead of leaving the original rim stuck behind.
+  // domScale = 1 (bar + background) -> identity sample.
+  vec2 domCenter = pxPos;
+  float domScale = 1.0;
+  float domDist = 1.0; // nearest normalised assignment distance (<1 = inside)
+
+  for (int i = 0; i < 3; i++) {
+    if (u_circles[i].z < 0.1) continue; // skip inactive circles
+    float s = max(u_scale[i], 0.001);
+    float R = u_circles[i].z;
+    float rho = length(pxPos - u_circles[i].xy);
+
+    // Visible lens SDF at the scaled radius -> blur / specular gating.
+    float dist = rho - R * s;
+    float aa = fwidth(dist);
+    float m = 1.0 - smoothstep(-aa, aa, dist);
+    if (m > mask) {
+      mask = m;
+      baseScale = u_baseScale[i];
+      ratioX = u_ratioX[i];
+      ratioY = u_ratioY[i];
+    }
+
+    // Scale assignment over max(original, scaled) radius, PLUS a small FIXED
+    // pixel margin so the region boundary clears the map's hard content edge at
+    // r = R. A *fractional* margin scales with R, so a big lens (play) would
+    // swallow its neighbours' regions and drag their rings in. 4px clears the
+    // edge's AA band without ever reaching the gap to the next control.
+    float nd = rho / (R * max(1.0, s) + 4.0);
+    if (nd < domDist) {
+      domDist = nd;
+      domCenter = u_circles[i].xy;
+      domScale = s;
+    }
+  }
+
+  // Bar (rounded-rect) SDF - only when u_bar.zw > 0. The bar never scales, so
+  // it keeps the identity map sample (domScale stays 1 for bar + background).
+  if (u_bar.z > 0.1 && u_bar.w > 0.1) {
+    vec2 q = abs(pxPos - u_bar.xy) - u_bar.zw * 0.5 + vec2(u_barRadius);
+    float barDist =
+      length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - u_barRadius;
+    float aaBar = fwidth(barDist);
+    float mBar = 1.0 - smoothstep(-aaBar, aaBar, barDist);
+    if (mBar > mask) {
+      mask = mBar;
+      baseScale = u_barBaseScale;
+      ratioX = u_barRatioX;
+      ratioY = u_barRatioY;
+    }
+  }
+
+  // Sample the displacement map at the dominant lens's scaled coordinate, so a
+  // per-lens press scale shrinks the baked pattern around its center in
+  // lockstep with the SDF radius above. domScale = 1 -> identity (unscaled).
+  vec2 scaledPx = domCenter + (pxPos - domCenter) / domScale;
+  vec4 d = texture2D(u_map, scaledPx / u_bboxSize);
+
+  // mapMatrix (feColorMatrix equivalent)
+  float sr = d.r * ratioX + 0.5 * (1.0 - ratioX);
+  float sg = d.g * ratioY + 0.5 * (1.0 - ratioY);
+
+  // Displacement offset in full-video UV space
+  vec2 off = vec2(sr - 0.5, sg - 0.5) * baseScale;
+
+  // Choose source: blurred or raw video
+  // Inside lens -> blurred (if blur active), outside lens -> raw
+  // Blend by mask so the transition at edges is clean
+  vec4 color;
+  if (u_chromaAmount > 0.001) {
+    float sR = 1.0 + u_chromaAmount * 0.2;
+    float sG = 1.0 + u_chromaAmount * 0.1;
+    if (u_hasBlur > 0.5) {
+      color.r = mix(
+        texture2D(u_video, clamp(uv + off * sR, 0.0, 1.0)).r,
+        texture2D(u_blurred, clamp(uv + off * sR, 0.0, 1.0)).r,
+        mask
+      );
+      color.g = mix(
+        texture2D(u_video, clamp(uv + off * sG, 0.0, 1.0)).g,
+        texture2D(u_blurred, clamp(uv + off * sG, 0.0, 1.0)).g,
+        mask
+      );
+      color.b = mix(
+        texture2D(u_video, clamp(uv + off, 0.0, 1.0)).b,
+        texture2D(u_blurred, clamp(uv + off, 0.0, 1.0)).b,
+        mask
+      );
+    } else {
+      color.r = texture2D(u_video, clamp(uv + off * sR, 0.0, 1.0)).r;
+      color.g = texture2D(u_video, clamp(uv + off * sG, 0.0, 1.0)).g;
+      color.b = texture2D(u_video, clamp(uv + off,       0.0, 1.0)).b;
+    }
+    color.a = 1.0;
+  } else {
+    vec2 duv = clamp(uv + off, 0.0, 1.0);
+    if (u_hasBlur > 0.5) {
+      color = mix(texture2D(u_video, duv), texture2D(u_blurred, duv), mask);
+    } else {
+      color = texture2D(u_video, duv);
+    }
+  }
+
+  // Adaptive specular + brightness (Apple-style vibrancy)
+  // Compute perceptual luminance of the displaced video sample
+  float luma = dot(color.rgb, vec3(0.299, 0.587, 0.114));
+
+  // Specular: blend between additive (dark bg) and multiplicative (bright bg)
+  float spec = d.b - 0.502;
+  float lumaLo = min(u_specLumaLow, u_specLumaHigh);
+  float lumaHi = max(u_specLumaLow, u_specLumaHigh);
+  float darkBlend = smoothstep(lumaLo, lumaHi, luma);
+  vec3 specAdd = color.rgb + spec * u_specStrength;
+  vec3 specMul = color.rgb * (1.0 - spec * u_specStrength);
+  color.rgb = mix(specAdd, specMul, darkBlend);
+  color.rgb = max(color.rgb, vec3(0.0));
+
+  // Brightness: pull toward mid-gray - darkens bright areas, brightens dark
+  float correction = (0.5 - luma) * u_adaptStrength * mask;
+  color.rgb += correction;
+
+  gl_FragColor = color;
+}
+`;
+function createShader(gl, type, src) {
+  const shader = gl.createShader(type);
+  if (!shader) return null;
+  gl.shaderSource(shader, src);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    console.error("Shader compile error:", gl.getShaderInfoLog(shader));
+    gl.deleteShader(shader);
+    return null;
+  }
+  return shader;
+}
+function createProgram(gl, vsSrc, fsSrc) {
+  const vs = createShader(gl, gl.VERTEX_SHADER, vsSrc);
+  const fs = createShader(gl, gl.FRAGMENT_SHADER, fsSrc);
+  if (!vs || !fs) return null;
+  const prog = gl.createProgram();
+  if (!prog) return null;
+  gl.attachShader(prog, vs);
+  gl.attachShader(prog, fs);
+  gl.linkProgram(prog);
+  gl.detachShader(prog, vs);
+  gl.detachShader(prog, fs);
+  gl.deleteShader(vs);
+  gl.deleteShader(fs);
+  if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
+    console.error("Program link error:", gl.getProgramInfoLog(prog));
+    gl.deleteProgram(prog);
+    return null;
+  }
+  return prog;
+}
+var VideoRefractionRenderer = class {
+  constructor(canvas) {
+    this.blurFboA = null;
+    this.blurTexA = null;
+    this.blurFboB = null;
+    this.blurTexB = null;
+    this.fboWidth = 0;
+    this.fboHeight = 0;
+    const gl = canvas.getContext("webgl", { alpha: false, antialias: false, premultipliedAlpha: false });
+    if (!gl) throw new Error("WebGL not supported");
+    this.gl = gl;
+    gl.getExtension("OES_standard_derivatives");
+    const quad = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]);
+    this.quadBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.quadBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, quad, gl.STATIC_DRAW);
+    this.blurProgram = createProgram(gl, VERTEX_SHADER, BLUR_FRAGMENT_SHADER);
+    this.refractionProgram = createProgram(gl, VERTEX_SHADER, REFRACTION_FRAGMENT_SHADER);
+    this.videoTexture = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, this.videoTexture);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    this.mapTexture = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, this.mapTexture);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  }
+  setDisplacementMap(image) {
+    const gl = this.gl;
+    gl.bindTexture(gl.TEXTURE_2D, this.mapTexture);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+  }
+  initBlurFBO(width, height) {
+    const gl = this.gl;
+    const halfW = width >> 1;
+    const halfH = height >> 1;
+    if (this.fboWidth === halfW && this.fboHeight === halfH) return;
+    this.fboWidth = halfW;
+    this.fboHeight = halfH;
+    const createFBO = () => {
+      const tex = gl.createTexture();
+      gl.bindTexture(gl.TEXTURE_2D, tex);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, halfW, halfH, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+      const fbo = gl.createFramebuffer();
+      gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+      gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
+      return { fbo, tex };
+    };
+    const resA = createFBO();
+    this.blurFboA = resA.fbo;
+    this.blurTexA = resA.tex;
+    const resB = createFBO();
+    this.blurFboB = resB.fbo;
+    this.blurTexB = resB.tex;
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+  }
+  render(video, config) {
+    const gl = this.gl;
+    const width = gl.canvas.width;
+    const height = gl.canvas.height;
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, this.videoTexture);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, video);
+    if (config.hasBlur) {
+      this.initBlurFBO(width, height);
+      gl.bindFramebuffer(gl.FRAMEBUFFER, this.blurFboA);
+      gl.viewport(0, 0, this.fboWidth, this.fboHeight);
+      gl.useProgram(this.blurProgram);
+      const aPosBlur = gl.getAttribLocation(this.blurProgram, "a_pos");
+      gl.bindBuffer(gl.ARRAY_BUFFER, this.quadBuffer);
+      gl.enableVertexAttribArray(aPosBlur);
+      gl.vertexAttribPointer(aPosBlur, 2, gl.FLOAT, false, 0, 0);
+      gl.uniform1i(gl.getUniformLocation(this.blurProgram, "u_source"), 0);
+      gl.uniform2f(gl.getUniformLocation(this.blurProgram, "u_dir"), 1 / this.fboWidth, 0);
+      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+      gl.bindFramebuffer(gl.FRAMEBUFFER, this.blurFboB);
+      gl.activeTexture(gl.TEXTURE2);
+      gl.bindTexture(gl.TEXTURE_2D, this.blurTexA);
+      gl.uniform1i(gl.getUniformLocation(this.blurProgram, "u_source"), 2);
+      gl.uniform2f(gl.getUniformLocation(this.blurProgram, "u_dir"), 0, 1 / this.fboHeight);
+      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    }
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    gl.viewport(0, 0, width, height);
+    gl.useProgram(this.refractionProgram);
+    const aPos = gl.getAttribLocation(this.refractionProgram, "a_pos");
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.quadBuffer);
+    gl.enableVertexAttribArray(aPos);
+    gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);
+    gl.uniform1i(gl.getUniformLocation(this.refractionProgram, "u_video"), 0);
+    gl.activeTexture(gl.TEXTURE1);
+    gl.bindTexture(gl.TEXTURE_2D, this.mapTexture);
+    gl.uniform1i(gl.getUniformLocation(this.refractionProgram, "u_map"), 1);
+    if (config.hasBlur && this.blurTexB) {
+      gl.activeTexture(gl.TEXTURE2);
+      gl.bindTexture(gl.TEXTURE_2D, this.blurTexB);
+      gl.uniform1i(gl.getUniformLocation(this.refractionProgram, "u_blurred"), 2);
+      gl.uniform1f(gl.getUniformLocation(this.refractionProgram, "u_hasBlur"), 1);
+    } else {
+      gl.uniform1f(gl.getUniformLocation(this.refractionProgram, "u_hasBlur"), 0);
+    }
+    const circlesArr = new Float32Array(9);
+    const scaleArr = new Float32Array(3);
+    const baseScaleArr = new Float32Array(3);
+    const ratioXArr = new Float32Array(3);
+    const ratioYArr = new Float32Array(3);
+    for (let i = 0; i < 3; i++) {
+      if (i < config.circles.length) {
+        const c = config.circles[i];
+        circlesArr[i * 3 + 0] = c.cx;
+        circlesArr[i * 3 + 1] = c.cy;
+        circlesArr[i * 3 + 2] = c.radius;
+        scaleArr[i] = c.scale;
+        baseScaleArr[i] = c.baseScale;
+        ratioXArr[i] = c.ratioX;
+        ratioYArr[i] = c.ratioY;
+      }
+    }
+    gl.uniform3fv(gl.getUniformLocation(this.refractionProgram, "u_circles"), circlesArr);
+    gl.uniform1fv(gl.getUniformLocation(this.refractionProgram, "u_scale"), scaleArr);
+    gl.uniform1fv(gl.getUniformLocation(this.refractionProgram, "u_baseScale"), baseScaleArr);
+    gl.uniform1fv(gl.getUniformLocation(this.refractionProgram, "u_ratioX"), ratioXArr);
+    gl.uniform1fv(gl.getUniformLocation(this.refractionProgram, "u_ratioY"), ratioYArr);
+    if (config.bar) {
+      gl.uniform4f(
+        gl.getUniformLocation(this.refractionProgram, "u_bar"),
+        config.bar.cx,
+        config.bar.cy,
+        config.bar.w,
+        config.bar.h
+      );
+      gl.uniform1f(gl.getUniformLocation(this.refractionProgram, "u_barRadius"), config.bar.radius);
+      gl.uniform1f(gl.getUniformLocation(this.refractionProgram, "u_barBaseScale"), config.bar.baseScale);
+      gl.uniform1f(gl.getUniformLocation(this.refractionProgram, "u_barRatioX"), config.bar.ratioX);
+      gl.uniform1f(gl.getUniformLocation(this.refractionProgram, "u_barRatioY"), config.bar.ratioY);
+    } else {
+      gl.uniform4f(gl.getUniformLocation(this.refractionProgram, "u_bar"), 0, 0, -1, -1);
+    }
+    gl.uniform4f(
+      gl.getUniformLocation(this.refractionProgram, "u_bbox"),
+      config.bbox.x,
+      config.bbox.y,
+      config.bbox.w,
+      config.bbox.h
+    );
+    gl.uniform2f(
+      gl.getUniformLocation(this.refractionProgram, "u_bboxSize"),
+      config.bboxSize.w,
+      config.bboxSize.h
+    );
+    gl.uniform1f(gl.getUniformLocation(this.refractionProgram, "u_chromaAmount"), config.chromaAmount);
+    gl.uniform1f(gl.getUniformLocation(this.refractionProgram, "u_specStrength"), config.specStrength);
+    gl.uniform1f(gl.getUniformLocation(this.refractionProgram, "u_adaptStrength"), config.adaptStrength);
+    gl.uniform1f(gl.getUniformLocation(this.refractionProgram, "u_specLumaLow"), config.specLumaLow);
+    gl.uniform1f(gl.getUniformLocation(this.refractionProgram, "u_specLumaHigh"), config.specLumaHigh);
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+  }
+  dispose() {
+    const gl = this.gl;
+    gl.deleteBuffer(this.quadBuffer);
+    gl.deleteProgram(this.blurProgram);
+    gl.deleteProgram(this.refractionProgram);
+    gl.deleteTexture(this.videoTexture);
+    gl.deleteTexture(this.mapTexture);
+    if (this.blurFboA) gl.deleteFramebuffer(this.blurFboA);
+    if (this.blurTexA) gl.deleteTexture(this.blurTexA);
+    if (this.blurFboB) gl.deleteFramebuffer(this.blurFboB);
+    if (this.blurTexB) gl.deleteTexture(this.blurTexB);
+  }
+};
+
+// src/webgl/QRRefractionRenderer.ts
+var QR_VERTEX_SHADER = `#version 300 es
+in vec2 a_position;
+out vec2 v_uv;
+
+void main() {
+  v_uv = (a_position * 0.5) + 0.5;
+  gl_Position = vec4(a_position, 0.0, 1.0);
+}
+`;
+var QR_FRAGMENT_SHADER = `#version 300 es
+precision highp float;
+precision highp sampler2D;
+
+in vec2 v_uv;
+out vec4 fragColor;
+
+uniform float u_dotRadius;
+uniform vec3 u_backgroundColor;
+uniform sampler2D u_PaintingTexture;
+
+// QR dot grid for the O(1) occupancy lookup (replaces a per-pixel scan over
+// every dot). Occupancy is matrixLength x matrixLength, R8, 0/1 per module.
+uniform sampler2D u_occupancyTexture;
+uniform float u_gridOriginUV; // padding / size, in UV
+uniform float u_cellUV;       // cellSize / size, in UV
+uniform float u_invCellUV;    // 1 / cellUV - avoids a per-pixel divide
+uniform int u_matrixLength;
+
+uniform sampler2D u_displacementMap;
+uniform sampler2D u_paintingColorTexture;
+uniform int u_displacementActive;
+uniform vec2 u_lensOrigin;
+uniform vec2 u_lensSize;
+uniform vec2 u_displacementScale;
+uniform float u_chromaAmount;
+
+// Eye uniforms (3 corner finder groups)
+uniform vec2 u_eyeCenter[3];
+uniform vec3 u_eyeHalf[3];    // x=outer, y=mid, z=inner half-size
+uniform vec3 u_eyeRadius[3];  // x=outer, y=mid, z=inner corner radius
+uniform vec3 u_eyeColor[3];   // fill color per group (animated)
+uniform float u_eyeScale[3];  // hover scale per group
+uniform float u_eyeRefractionScale; // 0-1 multiplier for eye displacement
+
+// QR dots sit on a uniform grid, and the radius (~0.35 of a cell) never
+// spills past a cell boundary, so the nearest dot is always the one in pos's
+// own cell. Map pos -> module (i,j), check occupancy, then test distance to
+// that module's center.
+float testDot(vec2 pos, float r2) {
+  int i = int(floor((pos.x - u_gridOriginUV) * u_invCellUV));
+  int j = int(floor((pos.y - u_gridOriginUV) * u_invCellUV));
+  if (i < 0 || i >= u_matrixLength || j < 0 || j >= u_matrixLength)
+    return 1.0;
+  if (texelFetch(u_occupancyTexture, ivec2(i, j), 0).r < 0.5)
+    return 1.0;
+  vec2 c = vec2(u_gridOriginUV) + (vec2(float(i), float(j)) + 0.5) * u_cellUV;
+  vec2 d = pos - c;
+  return dot(d, d) < r2 ? 0.0 : 1.0;
+}
+
+float roundedRectSDF(vec2 p, float half_, float radius) {
+  vec2 d = abs(p) - vec2(half_) + vec2(radius);
+  return length(max(d, vec2(0.0))) + min(max(d.x, d.y), 0.0) - radius;
+}
+
+// Test all eye groups. Returns vec4(color, 1.0) if inside an eye, vec4(0) if not.
+vec4 testEyes(vec2 pos) {
+  for (int g = 0; g < 3; g++) {
+    vec2 local = (pos - u_eyeCenter[g]) / u_eyeScale[g];
+    if (roundedRectSDF(local, u_eyeHalf[g].z, u_eyeRadius[g].z) < 0.0)
+      return vec4(u_eyeColor[g], 1.0);
+    if (roundedRectSDF(local, u_eyeHalf[g].y, u_eyeRadius[g].y) < 0.0)
+      return vec4(u_backgroundColor, 1.0);
+    if (roundedRectSDF(local, u_eyeHalf[g].x, u_eyeRadius[g].x) < 0.0)
+      return vec4(u_eyeColor[g], 1.0);
+  }
+  return vec4(0.0);
+}
+
+// Test scene (eyes + dots) at a position, returning color for a non-displaced pixel.
+// Returns vec4(color, 1.0) for solid, vec4(0, 0, 0, -1.0) for dot hole (discard).
+vec4 sampleStatic(vec2 pos, float r2) {
+  vec4 eye = testEyes(pos);
+  if (eye.a > 0.5) return eye;
+  float hole = testDot(pos, r2);
+  if (hole < 0.5) return vec4(0.0, 0.0, 0.0, -1.0);
+  return vec4(u_backgroundColor, 1.0);
+}
+
+void main() {
+  vec2 uv = vec2(v_uv.x, 1.0 - v_uv.y);
+  float paint = texture(u_PaintingTexture, uv).r;
+  float r2 = pow(u_dotRadius * (1.0 - paint), 2.0);
+
+  if (u_displacementActive == 0) {
+    vec4 s = sampleStatic(uv, r2);
+    if (s.a < 0.0) discard;
+    fragColor = s;
+    return;
+  }
+
+  vec2 lensUV = (uv - u_lensOrigin) / u_lensSize;
+  bool insideLens = lensUV.x >= 0.0 && lensUV.x <= 1.0 &&
+                    lensUV.y >= 0.0 && lensUV.y <= 1.0;
+
+  if (!insideLens) {
+    vec4 s = sampleStatic(uv, r2);
+    if (s.a < 0.0) discard;
+    fragColor = s;
+    return;
+  }
+
+  vec4 dispSample = texture(u_displacementMap, lensUV);
+  if (dispSample.a < 0.01) {
+    vec4 s = sampleStatic(uv, r2);
+    if (s.a < 0.0) discard;
+    fragColor = s;
+    return;
+  }
+  vec2 disp = (dispSample.rg - 0.5) * u_displacementScale;
+
+  float scaleR = 1.0 + u_chromaAmount * 2.0;
+  float scaleG = 1.0 + u_chromaAmount * 1.0;
+
+  vec2 uvR = uv + disp * scaleR;
+  vec2 uvG = uv + disp * scaleG;
+  vec2 uvB = uv + disp;
+
+  // Attenuated displacement for eyes
+  vec2 eyeDisp = disp * u_eyeRefractionScale;
+  vec2 eyeUvR = uv + eyeDisp * scaleR;
+  vec2 eyeUvG = uv + eyeDisp * scaleG;
+  vec2 eyeUvB = uv + eyeDisp;
+
+  // Per-channel: test eyes at attenuated displacement, dots at full displacement
+  vec4 eyeR = testEyes(eyeUvR);
+  vec4 eyeG = testEyes(eyeUvG);
+  vec4 eyeB = testEyes(eyeUvB);
+
+  float r, g, b;
+
+  if (eyeR.a > 0.5) {
+    r = eyeR.r;
+  } else {
+    float holeR = testDot(uvR, r2);
+    float paintR = texture(u_paintingColorTexture, uvR).r;
+    r = mix(paintR, u_backgroundColor.r, holeR);
+  }
+
+  if (eyeG.a > 0.5) {
+    g = eyeG.g;
+  } else {
+    float holeG = testDot(uvG, r2);
+    float paintG = texture(u_paintingColorTexture, uvG).g;
+    g = mix(paintG, u_backgroundColor.g, holeG);
+  }
+
+  if (eyeB.a > 0.5) {
+    b = eyeB.b;
+  } else {
+    float holeB = testDot(uvB, r2);
+    float paintB = texture(u_paintingColorTexture, uvB).b;
+    b = mix(paintB, u_backgroundColor.b, holeB);
+  }
+
+  fragColor = vec4(r, g, b, 1.0);
+}
+`;
+function createShader300(gl, type, src) {
+  const shader = gl.createShader(type);
+  if (!shader) throw new Error("Failed to create shader");
+  gl.shaderSource(shader, src);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    const info = gl.getShaderInfoLog(shader);
+    gl.deleteShader(shader);
+    throw new Error(`Shader compilation error: ${info ?? ""}`);
+  }
+  return shader;
+}
+var QRRefractionRenderer = class {
+  constructor(init) {
+    const gl = init.canvas.getContext("webgl2", { alpha: true, antialias: false, premultipliedAlpha: false });
+    if (!gl) throw new Error("WebGL 2 not supported");
+    this.gl = gl;
+    this.matrixLength = init.matrixLength;
+    this.gridOriginUV = init.gridOriginUV;
+    this.cellUV = init.cellUV;
+    this.dotRadius = init.dotRadius;
+    this.backgroundColor = init.backgroundColor ?? [1, 1, 1];
+    const vs = createShader300(gl, gl.VERTEX_SHADER, QR_VERTEX_SHADER);
+    const fs = createShader300(gl, gl.FRAGMENT_SHADER, QR_FRAGMENT_SHADER);
+    const prog = gl.createProgram();
+    gl.attachShader(prog, vs);
+    gl.attachShader(prog, fs);
+    gl.linkProgram(prog);
+    if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
+      throw new Error(`QR Program link error: ${gl.getProgramInfoLog(prog) ?? ""}`);
+    }
+    this.program = prog;
+    const quad = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]);
+    this.quadBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.quadBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, quad, gl.STATIC_DRAW);
+    this.occupancyTexture = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, this.occupancyTexture);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+    gl.texImage2D(
+      gl.TEXTURE_2D,
+      0,
+      gl.R8,
+      this.matrixLength,
+      this.matrixLength,
+      0,
+      gl.RED,
+      gl.UNSIGNED_BYTE,
+      init.occupancyMatrix
+    );
+    this.displacementTexture = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, this.displacementTexture);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    const blank1x1 = new Uint8Array([0, 0, 0, 0]);
+    this.paintingTexture = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, this.paintingTexture);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, blank1x1);
+    this.paintingColorTexture = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, this.paintingColorTexture);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, blank1x1);
+  }
+  setDisplacementMap(image) {
+    const gl = this.gl;
+    gl.bindTexture(gl.TEXTURE_2D, this.displacementTexture);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+  }
+  render(params) {
+    const gl = this.gl;
+    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+    gl.useProgram(this.program);
+    const aPos = gl.getAttribLocation(this.program, "a_position");
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.quadBuffer);
+    gl.enableVertexAttribArray(aPos);
+    gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, this.occupancyTexture);
+    gl.uniform1i(gl.getUniformLocation(this.program, "u_occupancyTexture"), 0);
+    gl.activeTexture(gl.TEXTURE1);
+    gl.bindTexture(gl.TEXTURE_2D, this.displacementTexture);
+    gl.uniform1i(gl.getUniformLocation(this.program, "u_displacementMap"), 1);
+    gl.activeTexture(gl.TEXTURE2);
+    gl.bindTexture(gl.TEXTURE_2D, this.paintingTexture);
+    gl.uniform1i(gl.getUniformLocation(this.program, "u_PaintingTexture"), 2);
+    gl.activeTexture(gl.TEXTURE3);
+    gl.bindTexture(gl.TEXTURE_2D, this.paintingColorTexture);
+    gl.uniform1i(gl.getUniformLocation(this.program, "u_paintingColorTexture"), 3);
+    gl.uniform1f(gl.getUniformLocation(this.program, "u_dotRadius"), this.dotRadius);
+    gl.uniform3fv(gl.getUniformLocation(this.program, "u_backgroundColor"), this.backgroundColor);
+    gl.uniform1f(gl.getUniformLocation(this.program, "u_gridOriginUV"), this.gridOriginUV);
+    gl.uniform1f(gl.getUniformLocation(this.program, "u_cellUV"), this.cellUV);
+    gl.uniform1f(gl.getUniformLocation(this.program, "u_invCellUV"), 1 / this.cellUV);
+    gl.uniform1i(gl.getUniformLocation(this.program, "u_matrixLength"), this.matrixLength);
+    gl.uniform1i(gl.getUniformLocation(this.program, "u_displacementActive"), params.displacementActive ? 1 : 0);
+    gl.uniform2f(gl.getUniformLocation(this.program, "u_lensOrigin"), params.lensOrigin[0], params.lensOrigin[1]);
+    gl.uniform2f(gl.getUniformLocation(this.program, "u_lensSize"), params.lensSize[0], params.lensSize[1]);
+    gl.uniform2f(gl.getUniformLocation(this.program, "u_displacementScale"), params.displacementScale[0], params.displacementScale[1]);
+    gl.uniform1f(gl.getUniformLocation(this.program, "u_chromaAmount"), params.chromaAmount);
+    gl.uniform1f(gl.getUniformLocation(this.program, "u_eyeRefractionScale"), params.eyeRefractionScale ?? 0.2);
+    const centers = new Float32Array(6);
+    const halfs = new Float32Array(9);
+    const radii = new Float32Array(9);
+    const colors = new Float32Array(9);
+    const scales = new Float32Array(3);
+    for (let i = 0; i < 3; i++) {
+      if (i < params.eyes.length) {
+        const e = params.eyes[i];
+        centers[i * 2 + 0] = e.center[0];
+        centers[i * 2 + 1] = e.center[1];
+        halfs[i * 3 + 0] = e.half[0];
+        halfs[i * 3 + 1] = e.half[1];
+        halfs[i * 3 + 2] = e.half[2];
+        radii[i * 3 + 0] = e.radius[0];
+        radii[i * 3 + 1] = e.radius[1];
+        radii[i * 3 + 2] = e.radius[2];
+        colors[i * 3 + 0] = e.color[0];
+        colors[i * 3 + 1] = e.color[1];
+        colors[i * 3 + 2] = e.color[2];
+        scales[i] = e.scale;
+      }
+    }
+    gl.uniform2fv(gl.getUniformLocation(this.program, "u_eyeCenter"), centers);
+    gl.uniform3fv(gl.getUniformLocation(this.program, "u_eyeHalf"), halfs);
+    gl.uniform3fv(gl.getUniformLocation(this.program, "u_eyeRadius"), radii);
+    gl.uniform3fv(gl.getUniformLocation(this.program, "u_eyeColor"), colors);
+    gl.uniform1fv(gl.getUniformLocation(this.program, "u_eyeScale"), scales);
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+  }
+  dispose() {
+    const gl = this.gl;
+    gl.deleteBuffer(this.quadBuffer);
+    gl.deleteProgram(this.program);
+    gl.deleteTexture(this.occupancyTexture);
+    gl.deleteTexture(this.displacementTexture);
+    gl.deleteTexture(this.paintingTexture);
+    gl.deleteTexture(this.paintingColorTexture);
+  }
+};
+
+exports.DEFAULT_LENS_PARAMS = DEFAULT_LENS_PARAMS;
+exports.QRRefractionRenderer = QRRefractionRenderer;
+exports.SLIDER_DARK_OVERRIDES = SLIDER_DARK_OVERRIDES;
+exports.SLIDER_GLASS_DEFAULTS = SLIDER_GLASS_DEFAULTS;
+exports.SLIDER_LIGHT_OVERRIDES = SLIDER_LIGHT_OVERRIDES;
+exports.SLIDER_SAFARI_OVERRIDES = SLIDER_SAFARI_OVERRIDES;
+exports.SWITCH_DARK_OVERRIDES = SWITCH_DARK_OVERRIDES;
+exports.SWITCH_GLASS_DEFAULTS = SWITCH_GLASS_DEFAULTS;
+exports.SWITCH_LIGHT_OVERRIDES = SWITCH_LIGHT_OVERRIDES;
+exports.VideoRefractionRenderer = VideoRefractionRenderer;
+exports.colorMatrixValues = colorMatrixValues;
+exports.computeDomeConstants = computeDomeConstants;
+exports.createDisplacementMapGeneratorSync = createDisplacementMapGeneratorSync;
+exports.createLens = createLens;
+exports.domeGradient = domeGradient;
+exports.erf = erf;
+exports.generateDisplacementMapAsync = generateDisplacementMapAsync;
+exports.getSvgMaskDataUri = getSvgMaskDataUri;
+//# sourceMappingURL=vanilla.js.map
+//# sourceMappingURL=vanilla.js.map