"use client";

import { useEffect, useRef } from "react";

/* ------------------------------------------------------------------ */
/*  Vertex shader (shared by all passes)                               */
/* ------------------------------------------------------------------ */

const VERT = /* glsl */ `#version 300 es
precision highp float;
in vec2 aPosition;
out vec2 vTextureCoord;
out vec3 vVertexPosition;
void main() {
  vTextureCoord = aPosition * 0.5 + 0.5;
  vVertexPosition = vec3(aPosition, 0.0);
  gl_Position = vec4(aPosition, 0.0, 1.0);
}`;

/* ------------------------------------------------------------------ */
/*  Fragment shaders — extracted from Unicorn Studio project           */
/* ------------------------------------------------------------------ */

/** Pass 1 — Aurora: flowing wave with iterative turbulence */
const FRAG_AURORA = /* glsl */ `#version 300 es
precision highp float;
precision highp int;
in vec2 vTextureCoord;
uniform sampler2D uTexture;
uniform float uTime;
uniform vec2 uMousePos;
uniform vec2 uResolution;

vec3 blend(int blendMode, vec3 src, vec3 dst) {
  return src + dst;
}
vec4 applyLayerMix(vec4 color, vec4 bg, float amount) {
  color.rgb = mix(bg.rgb, color.rgb, amount);
  color.a = max(bg.a, amount);
  return color;
}
uvec2 pcg2d(uvec2 v) {
  v = v * 1664525u + 1013904223u;
  v.x += v.y * v.y * 1664525u + 1013904223u;
  v.y += v.x * v.x * 1664525u + 1013904223u;
  v ^= v >> 16;
  v.x += v.y * v.y * 1664525u + 1013904223u;
  v.y += v.x * v.x * 1664525u + 1013904223u;
  return v;
}
float randFibo(vec2 p) {
  uvec2 v = floatBitsToUint(p);
  v = pcg2d(v);
  uint r = v.x ^ v.y;
  return float(r) / float(0xffffffffu);
}
float deband() {
  return (randFibo(gl_FragCoord.xy) - 0.5) / 255.0;
}

out vec4 fragColor;

const float PI  = 3.14159265359;
const float TAU = 6.28318530718;

vec3 pal(in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d) {
  return a + b * cos(TAU * (c * t + d));
}
vec3 Tonemap_Reinhard(vec3 x) {
  x *= 4.0;
  return x / (1.0 + x);
}
float sdCircle(vec2 st, float r) {
  return length(st) - r;
}
float getSdf(vec2 st, float md) {
  return sdCircle(st, 0.91);
}
vec2 turb(vec2 pos, float it, float baseFreq, float ampStart, float phaseTime, vec2 mPos) {
  mat2 trot = mat2(0.6, -0.8, 0.8, 0.6);
  float freq = baseFreq;
  float amp  = ampStart;
  float xp   = 1.4;
  for (float i = 0.0; i < 4.0; i++) {
    vec2 s = sin(freq * ((pos - mPos) * trot) + i * phaseTime + it);
    pos += amp * trot[0] * s / freq;
    trot *= mat2(0.6, -0.8, 0.8, 0.6);
    amp  *= mix(1.0, max(s.y, s.x), 0.0);
    freq *= xp;
  }
  return pos;
}

const int ITERATIONS = 36;

void main() {
  vec2 uv = vTextureCoord;
  vec4 bg = texture(uTexture, uv);
  vec3 pp = vec3(0.0);
  vec3 bloom = vec3(0.0);
  float t = uTime * 0.5;
  vec2 aspect = vec2(uResolution.x / uResolution.y, 1.0);
  vec2 mousePos = mix(vec2(0.0), uMousePos - 0.5, 0.54);
  vec2 pos = uv * aspect - vec2(0.4886759581881534, -0.17735191637630687) * aspect;
  float mDist = length(uv * aspect - uMousePos * aspect);
  float md = mix(1.0, smoothstep(1.0, 5.0, 1.0 / mDist), 0.0);
  float rotation = -0.0054 * -2.0 * PI;
  mat2 rotMatrix = mat2(cos(rotation), -sin(rotation), sin(rotation), cos(rotation));
  pos = rotMatrix * pos;
  float bm = 0.05;
  int activeIterations = clamp(int(floor(float(19))), 1, ITERATIONS);
  float activeIterationsF = float(activeIterations);
  float turbBaseFreq = mix(2.0, 15.0, 0.39);
  float turbAmpStart = 0.5 * md;
  float turbPhaseTime = t * 0.1;
  float colorScaleFactor = mix(0.1, 1.9, 0.22);
  vec2 prevPos = turb(pos, 0.0 - 1.0 / activeIterationsF, turbBaseFreq, turbAmpStart, turbPhaseTime, mousePos);
  float spacing   = mix(1.0, TAU, 0.5);
  float smoothing = 0.5;
  float pdPow     = 2.0 * 1.4426950408889634;

  for (int i = 0; i < ITERATIONS; i++) {
    float fi = float(i + 1);
    if (fi > activeIterationsF) break;
    float iter = fi / activeIterationsF;
    vec2 st = turb(pos, iter * spacing, turbBaseFreq, turbAmpStart, turbPhaseTime, mousePos);
    float d  = abs(getSdf(st, md));
    float pd = distance(st, prevPos);
    prevPos  = st;
    float dynamicBlur = exp2(pd * pdPow) - 1.0;
    float ds = smoothstep(0.0, 0.12 * bm + max(dynamicBlur * smoothing, 0.001), d);
    vec3 color = pal(
      iter * colorScaleFactor + 1.0,
      vec3(0.5), vec3(0.5), vec3(1.0),
      vec3(0.5176470588235295)
    );
    float invd = 1.0 / max(d + dynamicBlur, 0.001);
    pp   += (ds - 1.0) * color;
    bloom += clamp(invd, 0.0, 250.0) * color;
  }

  pp *= 1.0 / activeIterationsF;
  bloom = bloom / (bloom + 2e4);
  vec3 color = (-pp + bloom * 3.0 * 0.53);
  color *= 1.2;
  color += deband();
  color = Tonemap_Reinhard(color);
  vec4 auroraColor = vec4(color, 1.0);
  auroraColor.rgb = blend(1, bg.rgb, auroraColor.rgb);
  auroraColor = applyLayerMix(auroraColor, bg, 1.0);
  fragColor = auroraColor;
}`;

/** Pass 2 — Mondrian: animated pixelation grid with sway */
const FRAG_MONDRIAN = /* glsl */ `#version 300 es
precision highp float;
in vec2 vTextureCoord;
uniform sampler2D uTexture;
uniform float uTime;
uniform vec2 uMousePos;
uniform vec2 uResolution;

float ease(int easingFunc, float t) { return t; }

vec3 blend(int blendMode, vec3 src, vec3 dst) {
  return 1.0 - (1.0 - src) * (1.0 - dst);
}

float getExponentialWeight(int index) {
  switch(index) {
    case 0:  return 1.0;
    case 1:  return 0.7165313106;
    case 2:  return 0.5134171190;
    case 3:  return 0.3678794412;
    case 4:  return 0.2636050919;
    case 5:  return 0.1888756057;
    case 6:  return 0.1353352832;
    case 7:  return 0.0969670595;
    case 8:  return 0.0694877157;
    case 9:  return 0.0497870684;
    case 10: return 0.0356739933;
    case 11: return 0.0255615332;
    case 12: return 0.0183156389;
    case 13: return 0.0131237287;
    case 14: return 0.0094035626;
    case 15: return 0.0067379470;
    default: return 0.0;
  }
}

out vec4 fragColor;

const int   ITERATIONS = 16;
const float TAU = 6.28318530718;
const float REFERENCE_SHORT_SIDE = 1000.0;

mat2 rot(float a) {
  float s = sin(a), c = cos(a);
  return mat2(c, -s, s, c);
}
vec2 perp(vec2 v) { return vec2(-v.y, v.x); }

vec2 rotateAround(vec2 point, vec2 center, mat2 rotation, float aspectRatio) {
  vec2 translated = point - center;
  translated.x *= aspectRatio;
  translated = rotation * translated;
  translated.x /= aspectRatio;
  return translated + center;
}

vec2 getGridOffset(int index) {
  switch (index) {
    case 0:  return vec2(-0.22, -0.18);
    case 1:  return vec2( 0.18, -0.24);
    case 2:  return vec2(-0.14,  0.20);
    case 3:  return vec2( 0.24,  0.12);
    case 4:  return vec2(-0.30,  0.02);
    case 5:  return vec2( 0.08, -0.32);
    case 6:  return vec2( 0.30, -0.06);
    case 7:  return vec2(-0.06,  0.30);
    case 8:  return vec2( 0.12,  0.26);
    case 9:  return vec2(-0.26, -0.08);
    case 10: return vec2( 0.28,  0.22);
    case 11: return vec2(-0.18,  0.28);
    case 12: return vec2( 0.04, -0.20);
    case 13: return vec2(-0.32,  0.14);
    case 14: return vec2( 0.22, -0.14);
    default: return vec2(0.0);
  }
}

vec2 pixelateUV(vec2 uv, vec2 anchorPos, float pixelSizePx, vec2 gridOffset) {
  float shortSide = max(min(uResolution.x, uResolution.y), 0.0001);
  vec2 scale = uResolution / shortSide;
  float pixelSize = pixelSizePx / REFERENCE_SHORT_SIDE;
  vec2 scaledAnchorPos = anchorPos * scale;
  vec2 pixelCoord = floor(((uv * scale - scaledAnchorPos) / pixelSize) + gridOffset) * pixelSize;
  vec2 sampleCoord = pixelCoord + (vec2(0.5) - gridOffset) * pixelSize + scaledAnchorPos;
  return sampleCoord / scale;
}

vec2 distortUV(vec2 uv) {
  if (0.58 > 0.0001) {
    float aspectRatio = uResolution.x / uResolution.y;
    vec2 anchorPos = vec2(0.5, 0.5) + mix(vec2(0.0), uMousePos - 0.5, 0.0);
    vec2 mixPos    = vec2(0.5, 0.5) + mix(vec2(0.0), uMousePos - 0.5, 0.55);
    vec2  accumulatedUv     = vec2(0.0);
    float accumulatedWeight = 0.0;
    float maxPixelSize = 1.0 + 0.58 * 50.0;
    float curvePower   = mix(0.0, -0.5, 1.0);
    mat2  distortionRotation = rot(0.2511 * TAU);
    vec2  rotatedUv = rotateAround(uv, anchorPos, rot(0.2511 * TAU * -1.0), aspectRatio);

    for (int i = 0; i < ITERATIONS; i++) {
      float weight = getExponentialWeight(i);
      float curve  = pow(getExponentialWeight((ITERATIONS - 1) - i), curvePower);
      float pixelSizePx    = mix(maxPixelSize, 1.0, curve);
      float offsetStrength = mix(0.35, 0.0, curve);
      vec2  baseOffset     = getGridOffset(i) * offsetStrength;
      vec2  swayDir        = normalize(perp(baseOffset) + vec2(0.00001, 0.0));
      float swayAmount     = 1.0;
      if (uTime > 0.0) {
        swayAmount = sin(uTime * 0.035 + float(i) * 1.6180339) * abs(offsetStrength) * 0.18;
      }
      vec2 gridOffset = baseOffset + swayDir * swayAmount;
      vec2 pixelUv    = pixelateUV(rotatedUv, anchorPos, pixelSizePx, gridOffset);
      accumulatedUv     += pixelUv * weight;
      accumulatedWeight += weight;
    }

    vec2 blurredUv = rotateAround(
      accumulatedUv / max(accumulatedWeight, 0.0001),
      anchorPos, distortionRotation, aspectRatio
    );
    float blendRadius = ease(
      0,
      max(0.0, 1.0 - distance(blurredUv * vec2(aspectRatio, 1.0), mixPos * vec2(aspectRatio, 1.0)) * 4.0 * (1.0 - 1.0))
    );
    return mix(uv, blurredUv, 1.0 * blendRadius);
  }
  return uv;
}

void main() {
  vec2 baseUv = vTextureCoord;
  vec2 uv     = distortUV(baseUv);
  vec4 color  = texture(uTexture, uv);
  vec4 bg     = texture(uTexture, baseUv);
  color.rgb   = blend(4, color.rgb, bg.rgb);
  color.a     = max(color.a, bg.a);
  color       = mix(bg, color, 0.71);
  fragColor   = color;
}`;

/** Pass 3 — Outline: Sobel edge detection with additive blend */
const FRAG_OUTLINE = /* glsl */ `#version 300 es
precision highp float;
in vec2 vTextureCoord;
uniform sampler2D uTexture;
uniform sampler2D uBgTexture;
uniform vec2 uResolution;

vec3 blend(int blendMode, vec3 src, vec3 dst) {
  return src + dst;
}
vec4 applyLayerMix(vec4 color, vec4 bg, float amount) {
  color.rgb = mix(bg.rgb, color.rgb, amount);
  color.a   = max(bg.a, amount);
  return color;
}

out vec4 fragColor;

float luma(vec3 c) {
  return dot(c, vec3(0.299, 0.587, 0.114));
}
float interleavedGradientNoise(vec2 st) {
  return fract(52.9829189 * fract(dot(st, vec2(0.06711056, 0.00583715))));
}

void main() {
  vec2 uv = vTextureCoord;
  float thickness = 0.2;
  vec2 pixel = (1.0 / uResolution) * max(thickness * 4.0, 0.001);
  float noise = interleavedGradientNoise(gl_FragCoord.xy);
  pixel *= mix(1.0, noise, 0.1);

  float tl = luma(texture(uTexture, uv + pixel * vec2(-1, -1)).rgb);
  float t  = luma(texture(uTexture, uv + pixel * vec2( 0, -1)).rgb);
  float tr = luma(texture(uTexture, uv + pixel * vec2( 1, -1)).rgb);
  float l  = luma(texture(uTexture, uv + pixel * vec2(-1,  0)).rgb);
  float r  = luma(texture(uTexture, uv + pixel * vec2( 1,  0)).rgb);
  float bl = luma(texture(uTexture, uv + pixel * vec2(-1,  1)).rgb);
  float b  = luma(texture(uTexture, uv + pixel * vec2( 0,  1)).rgb);
  float br = luma(texture(uTexture, uv + pixel * vec2( 1,  1)).rgb);

  float gx = -tl - 2.0 * l - bl + tr + 2.0 * r + br;
  float gy = -tl - 2.0 * t - tr + bl + 2.0 * b + br;
  float edge = length(vec2(gx, gy));

  float soft = max(1.0 * 0.5, 0.001);
  edge = smoothstep(0.24 - soft, 0.24 + soft, edge);
  edge *= 0.29 * 2.0;

  vec4 scene   = texture(uBgTexture, uv);
  vec3 outline = vec3(1.0) * edge;
  vec3 blended = blend(1, outline, scene.rgb);
  vec4 col     = applyLayerMix(vec4(blended, 1.0), scene, 1.0);
  fragColor    = col;
}`;

/** Pass 4 — Coloration: HSL hue-shift + contrast boost */
const FRAG_COLORATION = /* glsl */ `#version 300 es
precision highp float;
in vec3 vVertexPosition;
in vec2 vTextureCoord;
uniform sampler2D uTexture;

vec3 getFilteredColor(vec3 color) { return color; }

float hueToRgb(float p, float q, float t) {
  if (t < 0.0) t += 1.0;
  if (t > 1.0) t -= 1.0;
  if (t < 1.0 / 6.0) return p + (q - p) * 6.0 * t;
  if (t < 1.0 / 2.0) return q;
  if (t < 2.0 / 3.0) return p + (q - p) * (2.0 / 3.0 - t) * 6.0;
  return p;
}
vec3 hslToRgb(vec3 hsl) {
  float h = hsl.x, s = hsl.y, l = hsl.z;
  vec3 rgb = vec3(l);
  if (s != 0.0) {
    float q = l < 0.5 ? l * (1.0 + s) : l + s - l * s;
    float p = 2.0 * l - q;
    rgb.r = hueToRgb(p, q, h + 1.0 / 3.0);
    rgb.g = hueToRgb(p, q, h);
    rgb.b = hueToRgb(p, q, h - 1.0 / 3.0);
  }
  return rgb;
}
vec3 rgbToHsl(vec3 rgb) {
  float mx = max(max(rgb.r, rgb.g), rgb.b);
  float mn = min(min(rgb.r, rgb.g), rgb.b);
  float h, s, l = (mx + mn) / 2.0;
  if (mx == mn) {
    h = s = 0.0;
  } else {
    float d = mx - mn;
    s = l > 0.5 ? d / (2.0 - mx - mn) : d / (mx + mn);
    if      (mx == rgb.r) h = (rgb.g - rgb.b) / d + (rgb.g < rgb.b ? 6.0 : 0.0);
    else if (mx == rgb.g) h = (rgb.b - rgb.r) / d + 2.0;
    else                  h = (rgb.r - rgb.g) / d + 4.0;
    h /= 6.0;
  }
  return vec3(h, s, l);
}

out vec4 fragColor;

void main() {
  vec2 uv = vTextureCoord;
  vec4 color = texture(uTexture, uv);
  if (color.a <= 0.001) { fragColor = vec4(0); return; }
  color.rgb = rgbToHsl(color.rgb);
  color.x   = fract(color.x + 1.0);
  color.y   = clamp(color.y * 1.0, 0.0, 1.0);
  color.z   = clamp(color.z + 0.0, 0.0, 1.0);
  color.rgb = hslToRgb(color.rgb);
  color.rgb = getFilteredColor(color.rgb);
  color.rgb = 1.25 * (color.rgb - 0.5) + 0.5;
  color     = vec4(clamp(color.rgb, 0.0, 1.0), color.a);
  fragColor = color;
}`;

/** Pass 5 — Vignette: radial darkening */
const FRAG_VIGNETTE = /* glsl */ `#version 300 es
precision highp float;
in vec3 vVertexPosition;
in vec2 vTextureCoord;
uniform sampler2D uTexture;
uniform vec2 uResolution;

vec4 applyLayerMix(vec4 color, vec4 bg, float amount) {
  color.rgb = mix(bg.rgb, color.rgb, amount);
  color.a   = max(bg.a, amount);
  return color;
}

const float TAU = 6.28318530718;
out vec4 fragColor;

mat2 rot(float a) { return mat2(cos(a), -sin(a), sin(a), cos(a)); }

void main() {
  vec2 uv    = vTextureCoord;
  vec4 color = texture(uTexture, uv);
  vec2 aspectRatio = vec2(uResolution.x / uResolution.y, 1.0);
  vec2 skew        = vec2(0.5, 1.0 - 0.5);
  float halfRadius = 0.5 * 0.5;
  float innerEdge  = halfRadius - 1.0 * halfRadius * 0.5;
  float outerEdge  = halfRadius + 1.0 * halfRadius * 0.5;
  vec2  pos        = vec2(0.5, 0.7327526132404181);
  vec2  scaledUV   = uv  * aspectRatio * rot(0.0) * skew;
  vec2  scaledPos  = pos * aspectRatio * rot(0.0) * skew;
  float radius     = distance(scaledUV, scaledPos);
  float falloff    = smoothstep(innerEdge, outerEdge, radius);
  vec4  vignetteColor = applyLayerMix(vec4(vec3(0.0), 1.0), color, falloff * 1.0);
  vec4  col = mix(color * (1.0 - falloff), vec4(vignetteColor.rgb, vignetteColor.a), 1.0);
  fragColor = col;
}`;

/* ------------------------------------------------------------------ */
/*  WebGL helpers                                                      */
/* ------------------------------------------------------------------ */

function compile(gl: WebGL2RenderingContext, type: number, src: string) {
  const s = gl.createShader(type)!;
  gl.shaderSource(s, src);
  gl.compileShader(s);
  if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {
    console.error("Shader error:", gl.getShaderInfoLog(s));
    gl.deleteShader(s);
    return null;
  }
  return s;
}

function link(gl: WebGL2RenderingContext, vert: string, frag: string) {
  const p = gl.createProgram()!;
  const vs = compile(gl, gl.VERTEX_SHADER, vert);
  const fs = compile(gl, gl.FRAGMENT_SHADER, frag);
  if (!vs || !fs) return null;
  gl.attachShader(p, vs);
  gl.attachShader(p, fs);
  gl.bindAttribLocation(p, 0, "aPosition");
  gl.linkProgram(p);
  if (!gl.getProgramParameter(p, gl.LINK_STATUS)) {
    console.error("Link error:", gl.getProgramInfoLog(p));
    return null;
  }
  gl.deleteShader(vs);
  gl.deleteShader(fs);
  return p;
}

interface FBO {
  fb: WebGLFramebuffer;
  tex: WebGLTexture;
}

function makeFBO(gl: WebGL2RenderingContext, w: number, h: number): FBO {
  const tex = gl.createTexture()!;
  gl.bindTexture(gl.TEXTURE_2D, tex);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA16F, w, h, 0, gl.RGBA, gl.HALF_FLOAT, null);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  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);
  const fb = gl.createFramebuffer()!;
  gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
  return { fb, tex };
}

function destroyFBO(gl: WebGL2RenderingContext, fbo: FBO) {
  gl.deleteFramebuffer(fbo.fb);
  gl.deleteTexture(fbo.tex);
}

/* ------------------------------------------------------------------ */
/*  Component                                                          */
/* ------------------------------------------------------------------ */

export default function WaveI() {
  const canvasRef = useRef<HTMLCanvasElement>(null);

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

    const gl = canvas.getContext("webgl2", {
      alpha: false,
      premultipliedAlpha: false,
      antialias: false,
    });
    if (!gl) return;

    gl.getExtension("EXT_color_buffer_float");

    /* --- Fullscreen quad ------------------------------------------ */
    const vao = gl.createVertexArray()!;
    gl.bindVertexArray(vao);
    const vbo = gl.createBuffer()!;
    gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);
    gl.enableVertexAttribArray(0);
    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);

    /* --- Compile programs ----------------------------------------- */
    const pAurora     = link(gl, VERT, FRAG_AURORA);
    const pMondrian   = link(gl, VERT, FRAG_MONDRIAN);
    const pOutline    = link(gl, VERT, FRAG_OUTLINE);
    const pColoration = link(gl, VERT, FRAG_COLORATION);
    const pVignette   = link(gl, VERT, FRAG_VIGNETTE);
    if (!pAurora || !pMondrian || !pOutline || !pColoration || !pVignette) return;

    /* --- FBOs ----------------------------------------------------- */
    let w = 2, h = 2;
    let fboA = makeFBO(gl, w, h);
    let fboB = makeFBO(gl, w, h);

    const resize = () => {
      const dpr = Math.min(window.devicePixelRatio, 1.5);
      const rect = canvas.getBoundingClientRect();
      w = Math.floor(rect.width * dpr);
      h = Math.floor(rect.height * dpr);
      if (canvas.width !== w || canvas.height !== h) {
        canvas.width = w;
        canvas.height = h;
        gl.viewport(0, 0, w, h);
        destroyFBO(gl, fboA);
        destroyFBO(gl, fboB);
        fboA = makeFBO(gl, w, h);
        fboB = makeFBO(gl, w, h);
      }
    };
    resize();
    window.addEventListener("resize", resize);

    /* --- Mouse ---------------------------------------------------- */
    let rawMX = 0.5, rawMY = 0.5;
    let smMX_a = 0.5, smMY_a = 0.5; // aurora  (momentum 0.88)
    let smMX_m = 0.5, smMY_m = 0.5; // mondrian (momentum 0.48)
    const onMove = (e: MouseEvent) => {
      const r = canvas.getBoundingClientRect();
      rawMX = (e.clientX - r.left) / r.width;
      rawMY = (e.clientY - r.top) / r.height;
    };
    canvas.addEventListener("mousemove", onMove);

    /* --- Render pass helper --------------------------------------- */
    function pass(
      prog: WebGLProgram,
      inputTex: WebGLTexture,
      target: WebGLFramebuffer | null,
      time: number,
      mx: number,
      my: number,
      bgTex?: WebGLTexture,
    ) {
      gl!.bindFramebuffer(gl!.FRAMEBUFFER, target);
      gl!.useProgram(prog);
      gl!.activeTexture(gl!.TEXTURE0);
      gl!.bindTexture(gl!.TEXTURE_2D, inputTex);
      gl!.uniform1i(gl!.getUniformLocation(prog, "uTexture"), 0);
      if (bgTex) {
        gl!.activeTexture(gl!.TEXTURE1);
        gl!.bindTexture(gl!.TEXTURE_2D, bgTex);
        gl!.uniform1i(gl!.getUniformLocation(prog, "uBgTexture"), 1);
      }
      const uT = gl!.getUniformLocation(prog, "uTime");
      if (uT) gl!.uniform1f(uT, time);
      const uM = gl!.getUniformLocation(prog, "uMousePos");
      if (uM) gl!.uniform2f(uM, mx, my);
      const uR = gl!.getUniformLocation(prog, "uResolution");
      if (uR) gl!.uniform2f(uR, w, h);
      gl!.drawArrays(gl!.TRIANGLE_STRIP, 0, 4);
    }

    /* --- Animation loop ------------------------------------------- */
    let auroraTime   = 0;
    let mondrianTime = 0;
    let prev         = performance.now();
    let raf          = 0;

    const frame = (now: number) => {
      const dt = Math.min((now - prev) / 1000, 0.1); // cap at 100ms
      prev = now;

      // Accumulate per-layer time (speed * 60 normalizes to frame-based time)
      auroraTime   += dt * 0.25 * 60;
      mondrianTime += dt * 0.09 * 60;

      // Smooth mouse per-layer
      const aLerp = 1 - Math.pow(0.88, dt * 60);
      smMX_a += (rawMX - smMX_a) * aLerp;
      smMY_a += (rawMY - smMY_a) * aLerp;
      const mLerp = 1 - Math.pow(0.48, dt * 60);
      smMX_m += (rawMX - smMX_m) * mLerp;
      smMY_m += (rawMY - smMY_m) * mLerp;

      resize();
      gl!.bindVertexArray(vao);

      // 0. Clear FBO A → black (gradient layer)
      gl!.bindFramebuffer(gl!.FRAMEBUFFER, fboA.fb);
      gl!.clearColor(0, 0, 0, 1);
      gl!.clear(gl!.COLOR_BUFFER_BIT);

      // 1. Aurora: FBO A → FBO B
      pass(pAurora!, fboA.tex, fboB.fb, auroraTime, smMX_a, smMY_a);

      // 2. Mondrian: FBO B → FBO A
      pass(pMondrian!, fboB.tex, fboA.fb, mondrianTime, smMX_m, smMY_m);

      // 3. Outline: FBO A → FBO B (same tex as uBgTexture)
      pass(pOutline!, fboA.tex, fboB.fb, 0, 0.5, 0.5, fboA.tex);

      // 4. Coloration: FBO B → FBO A
      pass(pColoration!, fboB.tex, fboA.fb, 0, 0.5, 0.5);

      // 5. Vignette: FBO A → screen
      pass(pVignette!, fboA.tex, null, 0, 0.5, 0.5);

      raf = requestAnimationFrame(frame);
    };
    raf = requestAnimationFrame(frame);

    /* --- Cleanup -------------------------------------------------- */
    return () => {
      cancelAnimationFrame(raf);
      canvas.removeEventListener("mousemove", onMove);
      window.removeEventListener("resize", resize);
      gl.deleteBuffer(vbo);
      gl.deleteVertexArray(vao);
      destroyFBO(gl, fboA);
      destroyFBO(gl, fboB);
      gl.deleteProgram(pAurora);
      gl.deleteProgram(pMondrian);
      gl.deleteProgram(pOutline);
      gl.deleteProgram(pColoration);
      gl.deleteProgram(pVignette);
    };
  }, []);

  return (
    <canvas
      ref={canvasRef}
      style={{
        width: "100%",
        height: "100%",
        display: "block",
        background: "#000",
      }}
    />
  );
}
Wave I
