Lens Stack

"use client";

import { useEffect, useRef } from "react";
import * as THREE from "three";
import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
import { UnrealBloomPass } from "three/addons/postprocessing/UnrealBloomPass.js";
import { ShaderPass } from "three/addons/postprocessing/ShaderPass.js";
import { OutputPass } from "three/addons/postprocessing/OutputPass.js";
import { readColorTokens } from "@/lib/shader-surface";

/**
 * A real three.js scene, built to match one reference photo: a chain of
 * translucent glass discs threaded on a single curved spine, each disc
 * perpendicular to the spine's own tangent at its point — the way coins
 * strung on a bent wire fan open as the wire turns, showing some discs
 * face-on and others in a thin edge-on sliver depending on how the spine
 * bends there. The spine itself sweeps up from a large, near disc at the
 * bottom-left through a twisting climb into a smaller, hazier cluster at
 * the top-right, fog and scale doing the depth work rather than a painted
 * gradient.
 *
 * Every disc is real geometry — a short `THREE.CylinderGeometry` — not a
 * billboard: the torso (its material index 0) carries a metallic rim with
 * a fresnel-driven chromatic fringe and a travelling glint, while the two
 * caps (index 1/2) carry the glass face itself, an amber-ramp colour read
 * live off `--color-accent-*` (this field's palette IS the site's own
 * accent ramp, not a departure from it, the way `SilkField`'s is), mixed
 * with a soft rim brighten, a slow diagonal reflection streak, and — on
 * roughly a third of the discs — a scatter of tiny painted "0"/"1" glyphs
 * sampled from one shared canvas texture, the way the reference photo's own
 * few discs carry a faint data pattern under the glass. Each disc keeps its
 * own slow spin around its own spine-tangent axis, so the rim glints and
 * reflection streaks are never still even before a visitor arrives.
 *
 * The pointer turns the camera a few degrees either way, eased — the same
 * "lean to see around it" read `FiberDriftField`'s tunnel uses — and
 * independently brightens whichever disc currently sits nearest the cursor
 * on screen, projected per-object rather than per-pixel since there are
 * only a few dozen discs to test.
 *
 * One of the reusable background fields (`FiberDriftField`, `NovaField`,
 * …). Drop it into any `position: relative`/`isolate` parent — it fills the
 * box. Degradation follows the same contract as every other field: no
 * WebGL, a blocked or lost context, a hidden tab, or `prefers-reduced-
 * motion` all leave the CSS `.iris-lensstackfield__floor` underneath
 * visible — a still frame in the same palette, never a blank box. Off-
 * screen the scene is never even constructed (`IntersectionObserver` gates
 * it, same reasoning as `lib/shader-surface.ts`'s lazy WebGL context).
 *
 * Reading guard: when `guardSelector` resolves to an element, a final
 * composite pass measures that block every frame and clamps luminance
 * under a ceiling inside it (hue and saturation untouched) — the same
 * `holdUnder` rule the flat-shader fields apply per-pixel, run here as a
 * post-process since the scene has no single fragment shader to inject it
 * into. `null` (the default) turns the guard off.
 */

const DISC_COUNT = 24;
const RADIAL_SEGMENTS = 72;

/* The shared spine, in world units: a large near disc at the bottom-left
   climbs and twists up into a smaller, hazier cluster at the top-right,
   pushed back in z as it goes so perspective and fog do the depth work. */
const SPINE: [number, number, number][] = [
  [-5.4, -3.1, 2.6],
  [-3.4, -1.7, 1.5],
  [-1.1, -0.3, 0.3],
  [1.1, 1.1, -1.0],
  [3.2, 2.2, -2.3],
  [5.4, 3.0, -3.6],
  [7.2, 3.5, -4.6],
];

/* Fixed dispersion colours for the rim's chromatic fringe — a physical-
   light effect, not a brand colour, so unlike the disc faces these stay a
   hand-picked constant rather than a read token. */
const DISPERSION = {
  metal: [0.58, 0.53, 0.47] as const,
  fringeA: [0.98, 0.55, 0.32] as const, // warm outer fringe
  fringeB: [0.55, 0.85, 0.9] as const, // cool inner fringe
  glint: [1.0, 0.95, 0.86] as const,
};

function srgb(c: readonly [number, number, number]): THREE.Color {
  return new THREE.Color().setRGB(c[0], c[1], c[2], THREE.SRGBColorSpace);
}

const VERTEX = `
varying vec2 vUv;
varying vec3 vNormalW;
varying vec3 vViewDir;
void main() {
  vUv = uv;
  vec4 worldPos = modelMatrix * vec4(position, 1.0);
  vNormalW = normalize(mat3(modelMatrix) * normal);
  vViewDir = cameraPosition - worldPos.xyz;
  gl_Position = projectionMatrix * viewMatrix * worldPos;
}
`;

const FACE_FRAGMENT = `
precision highp float;
varying vec2 vUv;
varying vec3 vNormalW;
varying vec3 vViewDir;
uniform vec3 uColor;
uniform vec3 uEdgeTint;
uniform float uBrightness;
uniform float uStreakPhase;
uniform float uHasPattern;
uniform sampler2D uPatternTex;
uniform float uSpot;

void main() {
  vec2 c = vUv - 0.5;
  float radial = clamp(length(c) * 2.0, 0.0, 1.0);
  float fres = pow(1.0 - abs(dot(normalize(vNormalW), normalize(vViewDir))), 2.2);
  float rim = max(smoothstep(0.66, 0.97, radial), fres * 0.55);
  float edgeGlow = exp(-pow((radial - 0.96) / 0.05, 2.0));

  vec3 col = mix(uColor, uEdgeTint, rim * 0.65) * uBrightness;

  float diag = c.x * 0.7 + c.y * 0.7;
  float streak = pow(max(0.0, sin(diag * 6.0 + uStreakPhase)), 28.0);
  col += vec3(1.0, 0.96, 0.88) * streak * 0.3;
  col += uEdgeTint * edgeGlow * 0.4;

  if (uHasPattern > 0.5) {
    vec4 tex = texture2D(uPatternTex, vUv);
    col += vec3(1.0, 0.96, 0.86) * tex.a * 0.7 * (0.4 + radial * 0.6);
  }

  col += vec3(1.0, 0.82, 0.58) * uSpot * 0.28;

  float alpha = clamp(mix(0.6, 0.94, rim) * uBrightness, 0.0, 1.0);
  gl_FragColor = vec4(max(col, 0.0), alpha);
}
`;

const EDGE_FRAGMENT = `
precision highp float;
varying vec2 vUv;
varying vec3 vNormalW;
varying vec3 vViewDir;
uniform float uNotches;
uniform float uGlintAngle;
uniform float uSpot;
uniform vec3 uMetal;
uniform vec3 uFringeA;
uniform vec3 uFringeB;
uniform vec3 uGlint;

void main() {
  float fres = pow(1.0 - abs(dot(normalize(vNormalW), normalize(vViewDir))), 1.35);
  float band = step(0.5, fract(vUv.x * uNotches));
  float metalShade = mix(0.4, 0.9, band);

  float ang = vUv.x * 6.28318530718;
  float d = ang - uGlintAngle;
  d = atan(sin(d), cos(d));
  float glint = exp(-d * d / 0.045);

  vec3 base = uMetal * metalShade * (0.3 + fres * 0.85);
  vec3 disp = mix(uFringeB, uFringeA, fres) * pow(fres, 1.6);
  vec3 col = base + disp * 0.85;
  col += uGlint * glint * 1.3;
  col += vec3(1.0, 0.8, 0.6) * uSpot * 0.35;

  gl_FragColor = vec4(max(col, 0.0), 1.0);
}
`;

const GUARD_SHADER = {
  uniforms: {
    tDiffuse: { value: null as THREE.Texture | null },
    uReadA: { value: new THREE.Vector4(0.5, 0.5, 0.44, 0.32) },
    uGuard: { value: 0 },
  },
  vertexShader: `
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    precision highp float;
    uniform sampler2D tDiffuse;
    uniform vec4 uReadA;
    uniform float uGuard;
    varying vec2 vUv;

    vec3 holdUnder(vec3 col, float ymax) {
      float y = dot(pow(max(col, 0.0), vec3(2.2)), vec3(0.2126, 0.7152, 0.0722));
      return y > ymax ? col * pow(ymax / max(y, 1e-5), 1.0 / 2.2) : col;
    }

    void main() {
      vec4 c = texture2D(tDiffuse, vUv);
      vec2 rd = abs(vUv - uReadA.xy) / max(uReadA.zw, vec2(0.02));
      float md = mix(max(rd.x, rd.y), length(rd), 0.4);
      float band = 1.0 - smoothstep(0.72, 2.1, md);
      gl_FragColor = vec4(mix(c.rgb, holdUnder(c.rgb, 0.1), band * uGuard), c.a);
    }
  `,
};

function buildPatternTexture(): THREE.CanvasTexture {
  const size = 512;
  const canvas = document.createElement("canvas");
  canvas.width = canvas.height = size;
  const ctx = canvas.getContext("2d")!;
  ctx.clearRect(0, 0, size, size);
  ctx.font = "12px monospace";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  const cell = 26;
  for (let y = cell / 2; y < size; y += cell) {
    for (let x = cell / 2; x < size; x += cell) {
      if (Math.random() > 0.4) continue;
      const dx = x - size / 2;
      const dy = y - size / 2;
      if (Math.sqrt(dx * dx + dy * dy) > size * 0.47) continue;
      const alpha = 0.12 + Math.random() * 0.4;
      ctx.fillStyle = `rgba(255,255,255,${alpha})`;
      ctx.fillText(Math.random() > 0.5 ? "1" : "0", x, y);
    }
  }
  const tex = new THREE.CanvasTexture(canvas);
  tex.colorSpace = THREE.SRGBColorSpace;
  return tex;
}

function buildBackgroundTexture(): THREE.CanvasTexture {
  const w = 1024;
  const h = 576;
  const canvas = document.createElement("canvas");
  canvas.width = w;
  canvas.height = h;
  const ctx = canvas.getContext("2d")!;

  ctx.fillStyle = "#050301";
  ctx.fillRect(0, 0, w, h);

  const glow = ctx.createRadialGradient(
    w * 0.28,
    h * 0.72,
    0,
    w * 0.28,
    h * 0.72,
    w * 0.55
  );
  glow.addColorStop(0, "rgba(60, 32, 10, 0.5)");
  glow.addColorStop(0.4, "rgba(30, 16, 6, 0.22)");
  glow.addColorStop(1, "rgba(5, 3, 1, 0)");
  ctx.fillStyle = glow;
  ctx.fillRect(0, 0, w, h);

  const vig = ctx.createRadialGradient(
    w * 0.5,
    h * 0.5,
    h * 0.3,
    w * 0.5,
    h * 0.5,
    h * 1.0
  );
  vig.addColorStop(0, "rgba(0,0,0,0)");
  vig.addColorStop(1, "rgba(2, 1, 0, 0.75)");
  ctx.fillStyle = vig;
  ctx.fillRect(0, 0, w, h);

  const tex = new THREE.CanvasTexture(canvas);
  tex.colorSpace = THREE.SRGBColorSpace;
  return tex;
}

interface DiscSpec {
  mesh: THREE.Mesh;
  edgeMat: THREE.ShaderMaterial;
  faceMatA: THREE.ShaderMaterial;
  faceMatB: THREE.ShaderMaterial;
  spinSpeed: number;
  glintPhase: number;
  glintSpeed: number;
  worldPos: THREE.Vector3;
}

function seededRandom(seed: number): () => number {
  let s = seed;
  return () => {
    s = (s * 9301 + 49297) % 233280;
    return s / 233280;
  };
}

interface MountOptions {
  guardSelector?: string | null;
  onPainted?: () => void;
  onIdle?: () => void;
}

function mountLensStack(canvas: HTMLCanvasElement, opts: MountOptions): () => void {
  const { guardSelector, onPainted, onIdle } = opts;

  const motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
  const root = document.documentElement;
  const isStill = () =>
    motionQuery.matches || root.dataset.forceReducedMotion === "on";

  let guardEl: Element | null | undefined;
  const guardOn = guardSelector != null;
  const readGuardEl = () => {
    if (guardEl === undefined) {
      guardEl = guardOn ? document.querySelector(guardSelector as string) : null;
    }
    return guardEl;
  };

  let renderer: THREE.WebGLRenderer | null = null;
  let composer: EffectComposer | null = null;
  let bloomPass: UnrealBloomPass | null = null;
  let guardPass: ShaderPass | null = null;
  let scene: THREE.Scene | null = null;
  let camera: THREE.PerspectiveCamera | null = null;
  let rig: THREE.Group | null = null;
  let discs: DiscSpec[] = [];
  let bgTexture: THREE.CanvasTexture | null = null;
  let patternTexture: THREE.CanvasTexture | null = null;
  const disposables: { dispose: () => void }[] = [];

  let started = false;
  let dead = false;
  let visible = false;
  let painted = false;
  let raf = 0;
  let start = 0;
  let last = 0;
  const stillTime = 6;

  let width = 0;
  let height = 0;

  let pointerRawX = 0;
  let pointerRawY = 0;
  let pointerRawLive = false;
  const onPointerMove = (e: PointerEvent) => {
    pointerRawX = e.clientX;
    pointerRawY = e.clientY;
    pointerRawLive = true;
  };
  const onPointerGone = () => {
    pointerRawLive = false;
  };
  window.addEventListener("pointermove", onPointerMove, { passive: true });
  window.addEventListener("pointerdown", onPointerMove, { passive: true });
  window.addEventListener("pointerup", onPointerGone, { passive: true });
  window.addEventListener("pointercancel", onPointerGone, { passive: true });
  document.addEventListener("pointerleave", onPointerGone);
  window.addEventListener("blur", onPointerGone);

  let ndcX = 2;
  let ndcY = 2;
  let presence = 0;
  let camYawTarget = 0;
  let camPitchTarget = 0;
  let camYaw = 0;
  let camPitch = 0;
  let idleT = Math.random() * 100;

  const trackPointer = (rect: DOMRect, frozen: boolean) => {
    if (frozen) {
      presence = 0;
      return;
    }
    let target = 0;
    if (pointerRawLive && rect.width > 0 && rect.height > 0) {
      const x = (pointerRawX - rect.left) / rect.width;
      const y = (pointerRawY - rect.top) / rect.height;
      const near = x > -0.25 && x < 1.25 && y > -0.25 && y < 1.25;
      if (near) {
        target = 1;
        ndcX += (x * 2 - 1 - ndcX) * 0.14;
        ndcY += (-(y * 2 - 1) - ndcY) * 0.14;
        camYawTarget = -ndcX * 0.14;
        camPitchTarget = ndcY * 0.08;
      }
    }
    presence += (target - presence) * 0.08;
    if (target === 0) {
      camYawTarget *= 0.96;
      camPitchTarget *= 0.96;
    }
    camYaw += (camYawTarget - camYaw) * 0.06;
    camPitch += (camPitchTarget - camPitch) * 0.06;
  };

  const setup = (): boolean => {
    if (started) return renderer != null;
    started = true;

    try {
      renderer = new THREE.WebGLRenderer({
        canvas,
        antialias: false,
        alpha: false,
        powerPreference: "low-power",
      });
    } catch {
      renderer = null;
    }
    if (!renderer) return false;

    renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 1.5));
    renderer.outputColorSpace = THREE.SRGBColorSpace;
    renderer.toneMapping = THREE.ACESFilmicToneMapping;
    renderer.toneMappingExposure = 1.05;

    scene = new THREE.Scene();
    bgTexture = buildBackgroundTexture();
    scene.background = bgTexture;
    scene.fog = new THREE.FogExp2(new THREE.Color(0x050301), 0.055);

    camera = new THREE.PerspectiveCamera(46, 16 / 9, 0.1, 60);
    camera.position.set(0, 0, 8.5);

    rig = new THREE.Group();
    scene.add(rig);

    patternTexture = buildPatternTexture();

    const [deep, umber, amber, gold, pale, paper, canvasTok] = readColorTokens([
      "--color-accent-950",
      "--color-accent-900",
      "--color-accent-800",
      "--color-accent-600",
      "--color-accent-400",
      "--color-accent-300",
      "--color-canvas",
    ]);
    const faceColors = [amber, gold, umber, amber, pale, amber, gold, canvasTok, amber, umber, paper, deep];

    const metal = srgb(DISPERSION.metal);
    const fringeA = srgb(DISPERSION.fringeA);
    const fringeB = srgb(DISPERSION.fringeB);
    const glintColor = srgb(DISPERSION.glint);

    const curve = new THREE.CatmullRomCurve3(
      SPINE.map(([x, y, z]) => new THREE.Vector3(x, y, z)),
      false,
      "catmullrom",
      0.4
    );

    const rand = seededRandom(1337);

    for (let i = 0; i < DISC_COUNT; i++) {
      const t = (i + 0.5) / DISC_COUNT;
      const ease = Math.pow(t, 0.85);
      const point = curve.getPointAt(t);
      const tangent = curve.getTangentAt(t).normalize();

      const radius = THREE.MathUtils.lerp(1.35, 0.4, ease) * (0.9 + rand() * 0.2);
      const thickness = radius * THREE.MathUtils.lerp(0.05, 0.032, ease);

      const geo = new THREE.CylinderGeometry(
        radius,
        radius,
        thickness,
        RADIAL_SEGMENTS,
        1,
        false
      );
      disposables.push(geo);

      const baseColor = srgb(faceColors[i % faceColors.length]);

      const faceMatA = new THREE.ShaderMaterial({
        uniforms: {
          uColor: { value: baseColor.clone() },
          uEdgeTint: { value: fringeA.clone() },
          uBrightness: { value: 1.08 },
          uStreakPhase: { value: rand() * Math.PI * 2 },
          uHasPattern: { value: rand() < 0.35 ? 1 : 0 },
          uPatternTex: { value: patternTexture },
          uSpot: { value: 0 },
        },
        vertexShader: VERTEX,
        fragmentShader: FACE_FRAGMENT,
        transparent: true,
        depthWrite: false,
        side: THREE.DoubleSide,
      });
      const faceMatB = faceMatA.clone();
      faceMatB.uniforms.uBrightness.value = 0.82;
      faceMatB.uniforms.uStreakPhase.value = rand() * Math.PI * 2;
      disposables.push(faceMatA, faceMatB);

      const edgeMat = new THREE.ShaderMaterial({
        uniforms: {
          uNotches: { value: Math.round(THREE.MathUtils.lerp(28, 54, ease)) },
          uGlintAngle: { value: rand() * Math.PI * 2 },
          uSpot: { value: 0 },
          uMetal: { value: metal.clone() },
          uFringeA: { value: fringeA.clone() },
          uFringeB: { value: fringeB.clone() },
          uGlint: { value: glintColor.clone() },
        },
        vertexShader: VERTEX,
        fragmentShader: EDGE_FRAGMENT,
        transparent: false,
        side: THREE.DoubleSide,
      });
      disposables.push(edgeMat);

      const mesh = new THREE.Mesh(geo, [edgeMat, faceMatA, faceMatB]);
      mesh.position.copy(point);
      mesh.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), tangent);
      mesh.rotateY(i * 0.47 + rand() * 0.6);
      rig.add(mesh);

      discs.push({
        mesh,
        edgeMat,
        faceMatA,
        faceMatB,
        spinSpeed: (i % 2 === 0 ? 1 : -1) * (0.12 + rand() * 0.16),
        glintPhase: rand() * Math.PI * 2,
        glintSpeed: 0.15 + rand() * 0.12,
        worldPos: new THREE.Vector3(),
      });
    }

    composer = new EffectComposer(renderer);
    composer.addPass(new RenderPass(scene, camera));
    bloomPass = new UnrealBloomPass(new THREE.Vector2(1, 1), 0.5, 0.4, 0.82);
    composer.addPass(bloomPass);
    guardPass = new ShaderPass(GUARD_SHADER);
    guardPass.material.uniforms.uGuard.value = guardOn ? 1 : 0;
    composer.addPass(guardPass);
    composer.addPass(new OutputPass());

    return true;
  };

  const projected = new THREE.Vector3();
  const updateDiscs = (time: number, dt: number, frozen: boolean) => {
    if (!camera) return;
    for (const d of discs) {
      if (!frozen) {
        d.mesh.rotateY(d.spinSpeed * dt);
      }
      d.mesh.getWorldPosition(d.worldPos);
      projected.copy(d.worldPos).project(camera);
      const dx = projected.x - ndcX;
      const dy = projected.y - ndcY;
      const spot = frozen
        ? 0
        : Math.exp(-(dx * dx + dy * dy) * 70.0) * presence;
      d.edgeMat.uniforms.uSpot.value = spot;
      d.faceMatA.uniforms.uSpot.value = spot;
      d.faceMatB.uniforms.uSpot.value = spot;
      d.edgeMat.uniforms.uGlintAngle.value =
        d.glintPhase + (frozen ? 0 : time * d.glintSpeed);
    }
  };

  const measure = (): boolean => {
    if (!renderer || !camera || !composer) return false;
    const rect = canvas.getBoundingClientRect();
    if (rect.width === 0 || rect.height === 0) return false;
    const w = Math.round(rect.width);
    const h = Math.round(rect.height);
    if (w !== width || h !== height) {
      width = w;
      height = h;
      renderer.setSize(w, h, false);
      composer.setSize(w, h);
      bloomPass?.setSize(Math.round(w / 2), Math.round(h / 2));
      camera.aspect = w / h;
      camera.updateProjectionMatrix();
    }
    return true;
  };

  const render = (time: number, frozen: boolean) => {
    if (!renderer || !camera || !composer || !rig) return;
    const rect = canvas.getBoundingClientRect();
    trackPointer(rect, frozen);

    if (!frozen) {
      idleT += 0.006;
      rig.rotation.y = camYaw * -1 + Math.sin(idleT) * 0.01;
      rig.rotation.x = camPitch * -1 + Math.sin(idleT * 0.7) * 0.005;
      camera.rotation.y = camYaw;
      camera.rotation.x = camPitch;
    }

    updateDiscs(frozen ? stillTime : time, 0.033, frozen);

    if (guardPass && guardOn) {
      const el = readGuardEl();
      let cx = 0.5, cy = 0.5, hw = 0.44, hh = 0.32;
      if (el && rect.width > 0 && rect.height > 0) {
        const r = el.getBoundingClientRect();
        const padX = rect.width * 0.09;
        const padY = rect.height * 0.11;
        cx = (r.left + r.width / 2 - rect.left) / rect.width;
        cy = 1 - (r.top + r.height / 2 - rect.top) / rect.height;
        hw = (r.width / 2 + padX) / rect.width;
        hh = (r.height / 2 + padY) / rect.height;
      }
      guardPass.material.uniforms.uReadA.value.set(cx, cy, hw, hh);
    }

    composer.render();
    if (!painted) {
      painted = true;
      onPainted?.();
    }
  };

  const drawStill = () => {
    if (!measure()) return;
    render(stillTime, true);
  };

  const frame = (now: number) => {
    raf = requestAnimationFrame(frame);
    if (now - last < 1000 / 30) return;
    last = now;
    if (!measure()) return;
    render((now - start) / 1000, false);
  };

  const stop = () => {
    if (raf) cancelAnimationFrame(raf);
    raf = 0;
    if (painted) {
      painted = false;
      onIdle?.();
    }
  };

  const play = () => {
    if (dead || !visible || document.hidden) return;
    if (!started) {
      if (!setup()) return;
    }
    if (isStill()) {
      stop();
      drawStill();
      return;
    }
    if (raf) return;
    start = performance.now() - stillTime * 1000;
    last = 0;
    if (measure()) {
      render((performance.now() - start) / 1000, false);
      last = performance.now();
    }
    raf = requestAnimationFrame(frame);
  };

  const io = new IntersectionObserver(
    ([entry]) => {
      visible = entry.isIntersecting;
      if (visible) play();
      else stop();
    },
    { rootMargin: "160px" }
  );
  io.observe(canvas);

  const onVisibility = () => (document.hidden ? stop() : play());
  document.addEventListener("visibilitychange", onVisibility);

  const ro = new ResizeObserver(() => {
    if (isStill()) drawStill();
  });
  ro.observe(canvas);

  const restart = () => {
    stop();
    play();
  };
  const mo = new MutationObserver(restart);
  mo.observe(root, {
    attributes: true,
    attributeFilter: ["data-force-reduced-motion"],
  });
  motionQuery.addEventListener("change", restart);

  const onContextLost = (e: Event) => {
    e.preventDefault();
    dead = true;
    stop();
    painted = false;
    onIdle?.();
  };
  const onContextRestored = () => {
    dead = false;
    play();
  };
  canvas.addEventListener("webglcontextlost", onContextLost);
  canvas.addEventListener("webglcontextrestored", onContextRestored);

  return () => {
    stop();
    io.disconnect();
    ro.disconnect();
    mo.disconnect();
    motionQuery.removeEventListener("change", restart);
    document.removeEventListener("visibilitychange", onVisibility);
    canvas.removeEventListener("webglcontextlost", onContextLost);
    canvas.removeEventListener("webglcontextrestored", onContextRestored);
    window.removeEventListener("pointermove", onPointerMove);
    window.removeEventListener("pointerdown", onPointerMove);
    window.removeEventListener("pointerup", onPointerGone);
    window.removeEventListener("pointercancel", onPointerGone);
    document.removeEventListener("pointerleave", onPointerGone);
    window.removeEventListener("blur", onPointerGone);
    for (const d of disposables) d.dispose();
    bgTexture?.dispose();
    patternTexture?.dispose();
    discs = [];
    composer = null;
    if (renderer) {
      renderer.dispose();
      renderer.forceContextLoss();
    }
  };
}

export interface LensStackFieldProps {
  className?: string;
  /**
   * CSS selector for the block the reading guard should keep readable,
   * resolved against `document`. `null` (the default) turns the guard off.
   */
  guardSelector?: string | null;
}

export function LensStackField({
  className,
  guardSelector = null,
}: LensStackFieldProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    return mountLensStack(canvas, {
      guardSelector,
      onPainted: () => canvas.setAttribute("data-shader", "on"),
      onIdle: () => canvas.removeAttribute("data-shader"),
    });
  }, [guardSelector]);

  return (
    <div
      className={`absolute inset-0 overflow-hidden${className ? ` ${className}` : ""}`}
      aria-hidden="true"
    >
      <div className="absolute inset-0 [background:radial-gradient(_16%_26%_at_22%_78%,oklch(0.86_0.07_85_/_0.9)_0%,oklch(0.62_0.16_45_/_0.5)_60%,transparent_78%_),radial-gradient(_13%_22%_at_34%_63%,oklch(0.7_0.16_50_/_0.85)_0%,transparent_76%_),radial-gradient(_11%_18%_at_45%_50%,oklch(0.5_0.14_45_/_0.8)_0%,transparent_78%_),radial-gradient(_9%_15%_at_55%_38%,oklch(0.3_0.09_40_/_0.75)_0%,transparent_80%_),radial-gradient(_7%_12%_at_65%_27%,oklch(0.66_0.15_60_/_0.65)_0%,transparent_82%_),radial-gradient(_5%_9%_at_74%_18%,oklch(0.4_0.1_45_/_0.55)_0%,transparent_85%_),radial-gradient(_140%_120%_at_22%_82%,oklch(0.2_0.06_45_/_0.4)_0%,transparent_60%_),oklch(0.05_0.01_40)]" />
      <canvas ref={canvasRef} className="absolute inset-0 w-full h-full opacity-0 transition-opacity duration-[--duration-slow] ease-[--ease-standard] data-[shader=on]:opacity-100" />
    </div>
  );
}