"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                                                    */
/* ------------------------------------------------------------------ */

/** Pass 1 — Stars: animated star field with mouse parallax */
const FRAG_STARS = /* glsl */ `#version 300 es
precision highp float;
in vec2 vTextureCoord;
uniform sampler2D uTexture;
uniform float uTime;
uniform vec2 uMousePos;
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;
}

out vec4 fragColor;

const float PI = 3.14159265359;

float luma(vec4 color) {
  return 0.299 * color.r + 0.587 * color.g + 0.114 * color.b;
}

vec2 hash(vec2 p) {
  p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)));
  return fract(sin(p) * 18.5453);
}

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

vec3 hue(float h, float angle) {
  return vec3(0.5) + 0.5 * cos(h + 2.0 * PI * angle + vec3(0, 2, 4));
}

vec4 getStarLayer(vec2 baseUV, float scaleMult, vec2 offset) {
  vec2 scaleRatio = vec2(1080) * vec2(uResolution.x / uResolution.y, 1);
  vec2 pos = vec2(0.5, 0.5) + mix(vec2(0), (uMousePos - 0.5), 0.3300);
  vec2 uv = (baseUV - pos) * scaleRatio * 0.2700 * scaleMult * 0.01 * rot(0.5400 * PI * 2.) + offset;
  float time = (uTime * 0.0005);
  vec2 i_uv = floor(uv);
  vec2 f_uv = fract(uv);
  vec2 point = vec2(0);
  vec3 d = vec3(1e10);
  vec2 closestPoint;

  for (int y = -1; y <= 1; y++) {
    for (int x = -1; x <= 1; x++) {
      vec2 tile_offset = vec2(float(x), float(y));
      vec2 o = hash(i_uv + tile_offset + vec2(time * 0.05));
      tile_offset += o - f_uv;
      float dist = dot(tile_offset, tile_offset);
      if (dist < d.x) {
        d.y = d.x;
        d.x = dist;
        closestPoint = tile_offset;
        point = o;
      } else if (dist < d.y) {
        d.y = dist;
      }
    }
  }

  d = sqrt(d);
  float r = sqrt(d.x);
  vec2 toCenter = closestPoint;
  vec2 toCenterRot45 = toCenter * rot(-PI / 4.);
  vec2 closestPointOriginal = closestPoint * rot(-abs(0.5400) * PI * 2.) / (0.2700 * scaleMult * 0.01) / scaleRatio + baseUV;
  vec4 closestPointCol = texture(uTexture, closestPointOriginal);
  float closestPointR = luma(closestPointCol);
  float mixThresh = mix(1., closestPointR, 1.0000);
  float stepThresh = step(1.0000, closestPointR);
  closestPointR = mixThresh;
  float crossShape;
  float crossShape2;
  crossShape = min(abs(toCenter.x), abs(toCenter.y));
  crossShape2 = min(abs(toCenterRot45.x), abs(toCenterRot45.y));
  float proximityFactor = sqrt(d.y) - sqrt(d.x);
  float radialGradient = (1.0 - length(toCenter)) * closestPointR * (0.6700 * 1.5);
  float flare = 1.0 - smoothstep(-0.5, 1.0, 0.7200);
  crossShape = 1.0 - smoothstep(-0.04, 0.04 * (proximityFactor - flare) * closestPointR * closestPointR, crossShape);
  crossShape += 1.0 - smoothstep(-0.04, 0.04 * (proximityFactor - flare) * closestPointR * closestPointR, crossShape2);
  vec3 cross = mix(vec3(crossShape), vec3(crossShape) * hue(closestPointR, proximityFactor * 5.), 0.4500);
  vec3 bloom = vec3(smoothstep(0., 4., radialGradient * proximityFactor));
  vec3 rgb = mix(vec3(0.8705882352941177, 1, 0.6705882352941176), mix(vec3(0.8705882352941177, 1, 0.6705882352941176), closestPointCol.rgb, 0.5), 1.0000);
  return vec4(rgb * (cross + bloom) * 10., (cross.r + bloom.r) * 10. * rgb.r);
}

void main() {
  vec4 stars = getStarLayer(vTextureCoord, 1.0, vec2(0.0));
  vec4 bg = texture(uTexture, vTextureCoord);
  vec4 color = applyLayerMix(bg + stars, bg, max(bg.a, stars.a));
  fragColor = color;
}`;

/** Pass 2 — Image composite: load external image and blend over background */
const FRAG_IMAGE_COMPOSITE = /* glsl */ `#version 300 es
precision highp float;
in vec2 vTextureCoord;
in vec3 vVertexPosition;
uniform sampler2D uTexture;
uniform sampler2D uSourceImage;
uniform vec2 uArtboardResolution;

out vec4 fragColor;

vec4 sampleImage(vec2 canvasUV) {
  vec2 canvasPos = vec2(canvasUV.x * uArtboardResolution.x, (1.0 - canvasUV.y) * uArtboardResolution.y);
  float imageAspect = 720.0 / 449.0;
  float canvasAspect = uArtboardResolution.x / uArtboardResolution.y;
  vec2 fitSize = vec2(
    (canvasAspect < imageAspect) ? uArtboardResolution.y * imageAspect : uArtboardResolution.x,
    (canvasAspect < imageAspect) ? uArtboardResolution.y : uArtboardResolution.x / imageAspect
  );
  vec2 offset = (uArtboardResolution - fitSize) * 0.5;
  vec2 imageUV = (canvasPos - offset) / fitSize;
  vec2 flippedUV = vec2(imageUV.x, 1.0 - imageUV.y);
  vec4 color = textureLod(uSourceImage, flippedUV, 0.0);
  if (imageUV.x >= 0.0 && imageUV.x <= 1.0 && imageUV.y >= 0.0 && imageUV.y <= 1.0) {
    return color;
  } else {
    return vec4(0.0);
  }
}

void main() {
  vec4 imageColor = sampleImage(vTextureCoord);
  imageColor.rgb = clamp(imageColor.rgb, 0.0, 1.0);
  imageColor.rgb *= imageColor.a;
  vec4 background = texture(uTexture, vTextureCoord);
  fragColor = imageColor + background * (1.0 - imageColor.a);
}`;

/** Pass 3 — SDF Shape: 3D ring with dispersion refraction */
const FRAG_SDF = /* glsl */ `#version 300 es
precision highp float;
precision highp int;
in vec2 vTextureCoord;
uniform sampler2D uTexture;
uniform vec3 uAxis;
uniform float uScale;
uniform float uShapeControl;
uniform float uExtrude;
uniform float uTime;
uniform vec2 uMousePos;
uniform vec2 uResolution;

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);
}

const float PI = 3.14159265359;
const float TAU = 6.28318530718;
const int DISP_STEPS = 10;
const vec3 viewDir = vec3(0, 0, -4.25);

const mat3 ROT_Y_90 = mat3(
  0.0, 0.0, 1.0,
  0.0, 1.0, 0.0,
  -1.0, 0.0, 0.0
);

const mat3 ROT_X_90 = mat3(
  1.0, 0.0, 0.0,
  0.0, 0.0, -1.0,
  0.0, 1.0, 0.0
);

mat3 rotY(float ang) {
  float c = cos(ang), s = sin(ang);
  return mat3(c, 0.0, s, 0.0, 1.0, 0.0, -s, 0.0, c);
}

mat3 rotX(float ang) {
  float c = cos(ang), s = sin(ang);
  return mat3(1.0, 0.0, 0.0, 0.0, c, -s, 0.0, s, c);
}

mat3 rotZ(float ang) {
  float c = cos(ang), s = sin(ang);
  return mat3(c, -s, 0.0, s, c, 0.0, 0.0, 0.0, 1.0);
}

float opExtrusion(vec3 p, float d, float h) {
  vec2 w = vec2(d, abs(p.z) - h);
  return min(max(w.x, w.y), 0.0) + length(max(w, 0.0));
}

float sdRoundedBox(vec2 p, vec2 b, vec4 r) {
  r.xy = (p.x > 0.0) ? r.xy : r.zw;
  r.x = (p.y > 0.0) ? r.x : r.y;
  vec2 q = abs(p) - b + r.x;
  return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r.x;
}

float squircle(vec3 p) {
  p *= ROT_Y_90;
  p *= ROT_X_90;
  float d = sdRoundedBox(p.xy, vec2(0.75 + uShapeControl, 0.75 + (1. - uShapeControl)), vec4(0.33));
  return opExtrusion(p, d, uExtrude);
}

vec3 radialRepeat(vec3 p, float spacing) {
  float numRepetitions = max(2.0, floor(16.0 * (spacing) + 2.0)) * 0.5;
  float angle = atan(p.y, p.x);
  float angleStep = TAU / numRepetitions * 2.;
  float segmentIndex = floor((angle + PI) / angleStep);
  float segmentAngle = (segmentIndex + 0.5) * angleStep - PI;
  float cosA = cos(-segmentAngle);
  float sinA = sin(-segmentAngle);
  vec2 rotatedXY = vec2(
    p.x * cosA - p.y * sinA,
    p.x * sinA + p.y * cosA
  );
  float radius = 1.0 + spacing * 1.0;
  rotatedXY.x -= radius;
  return vec3(rotatedXY, p.z);
}

vec3 getAdjustedP(vec3 p) {
  float scale = max(uScale, 0.000000001);
  float scaleFactor = 1.0 / scale;
  vec3 adjustedP = p * scaleFactor;
  adjustedP.xy *= vec2(uResolution.x / uResolution.y, 1);
  adjustedP *= (1. + 0.01);
  vec2 mousePos = mix(vec2(0), uMousePos - 0.5, 0.0700);
  vec2 axis = vec2(-1. * uAxis.y - 1. + mousePos.y / PI, uAxis.x + mousePos.x / PI) * 2.;
  float spacing = (0.4600 + 0.0000 * 0.38) * 8.;
  float baseTime = uTime * 0.02;
  float timeZ = 0.5 * baseTime;
  mat3 rotYMat = rotY(axis.y * PI);
  mat3 rotXMat = rotX(axis.x * PI);
  mat3 rotZMat = rotZ(uAxis.z * 2.0 * PI);
  mat3 combinedRotation = rotZMat * rotYMat * rotXMat;
  mat3 combinedAnimation = rotZ(timeZ);
  adjustedP = combinedRotation * adjustedP;
  adjustedP = combinedAnimation * adjustedP;
  adjustedP = radialRepeat(adjustedP, spacing);
  return adjustedP;
}

float getMergedSDF(vec3 p) {
  p = getAdjustedP(p);
  p *= rotX(radians(90.0));
  return squircle(p);
}

vec3 frostOrDispersion(vec3 rd, vec3 normal) {
  vec3 refractionColor = vec3(0);
  float iorBase = 1. + 1.0000 * 0.25;
  vec3 dispCoefficients = vec3(0.03, 0.06, 0.1) * 1.0000 * 1.2;
  for (int i = 0; i < DISP_STEPS; ++i) {
    float step = float(i) / float(DISP_STEPS);
    vec3 disp = step * dispCoefficients;
    vec3 ior = 1.0 / (iorBase + disp);
    vec3 refractedRayR = refract(rd, normal, ior.r);
    vec3 refractedRayG = refract(rd, normal, ior.g);
    vec3 refractedRayB = refract(rd, normal, ior.b);
    refractionColor.r += texture(uTexture, vTextureCoord - refractedRayR.xy).r;
    refractionColor.g += texture(uTexture, vTextureCoord - refractedRayG.xy).g;
    refractionColor.b += texture(uTexture, vTextureCoord - refractedRayB.xy).b;
  }
  return clamp(refractionColor / float(DISP_STEPS), 0.0, 1.0);
}

vec3 calculateNormal(vec3 p, float eps) {
  vec2 e = vec2(1.0, -1.0) * eps * 0.5;
  return normalize(
    e.xyy * getMergedSDF(p + e.xyy) +
    e.yyx * getMergedSDF(p + e.yyx) +
    e.yxy * getMergedSDF(p + e.yxy) +
    e.xxx * getMergedSDF(p + e.xxx)
  );
}

float scene(vec3 p) {
  return max(0.0000000001, getMergedSDF(p) - 0.005) * max(uScale, 0.000000001);
}

const int STEPS = 128;
const float MAX_DISTANCE = 100.0;

out vec4 fragColor;

vec4 rayMarch(vec3 ro, vec3 rd) {
  float pixelSize = 0.0025;
  float traveled = 0.;
  vec3 entryPoint = vec3(0.0);
  vec3 entryNormal = vec3(0.0);
  float partialAlpha = 0.0;
  float smoothing = mix(1., 4., 0.6200);

  for (int i = 0; i < STEPS; ++i) {
    vec3 currentPos = ro + rd * traveled;
    float distance = scene(currentPos);
    float progress = float(i) / float(STEPS);
    float step = distance * mix(1., 1.5, progress);
    if (distance > MAX_DISTANCE) break;
    if (distance < pixelSize) {
      partialAlpha = 1.;
      entryPoint = currentPos;
      entryNormal = calculateNormal(entryPoint, pixelSize * smoothing);
      break;
    }
    traveled += max(step, pixelSize);
    if (traveled > MAX_DISTANCE) break;
  }

  if (partialAlpha == 0.0) {
    return vec4(0);
  }

  vec3 refractionColor = frostOrDispersion(rd, entryNormal);
  vec3 lightDir = vec3(((vec2(0.25, 1. - 0.25) - 0.333) * 3.) - vec2(0.5, 0.5), -3.0);
  vec3 normLightDir = normalize(lightDir);
  float lightAndShadow = dot(entryNormal, normLightDir);
  vec3 finalColor = mix(refractionColor, vec3(1, 1, 1) * lightAndShadow, 0.0000);
  return vec4(finalColor, 1.);
}

void main() {
  vec4 col = vec4(0);
  vec2 uv = vTextureCoord;
  vec4 bg = texture(uTexture, uv);

  if (uScale <= 0.0001 || 1.0000 <= 0.0001) {
    fragColor = vec4(0);
    return;
  }

  vec2 pos = vec2(0.5, 0.5) + mix(vec2(0), (uMousePos - 0.5), 0.0000);
  uv = uv - pos;
  float fovFactor = tan(radians(20.) * 0.5);
  vec3 rd = vec3(uv * fovFactor, 0.5);
  col = rayMarch(viewDir, rd);
  float dither = (randFibo(vTextureCoord.xy) - 0.5) / 255.0;
  col += dither;
  col = mix(vec4(0), col, 1.0000);
  fragColor = col;
}`;

/** Pass 4 — FXAA: anti-aliasing post-process */
const FRAG_FXAA = /* glsl */ `#version 300 es
precision highp float;
in vec3 vVertexPosition;
in vec2 vTextureCoord;
uniform sampler2D uTexture;
uniform vec2 uResolution;

const float FXAA_REDUCE_MIN = 0.0078125;
const float FXAA_REDUCE_MUL = 0.125;
const float FXAA_SPAN_MAX = 12.0;
const float FXAA_EDGE_THRESHOLD = 0.166;
const float FXAA_EDGE_THRESHOLD_MIN = 0.0833;
const float FXAA_SUBPIX_QUALITY = 0.75;

out vec4 fragColor;

void main() {
  vec2 res = 1.0 / uResolution;
  vec3 rgbNW = texture(uTexture, vTextureCoord.xy + vec2(-1.0, -1.0) * res).xyz;
  vec3 rgbNE = texture(uTexture, vTextureCoord.xy + vec2( 1.0, -1.0) * res).xyz;
  vec3 rgbSW = texture(uTexture, vTextureCoord.xy + vec2(-1.0,  1.0) * res).xyz;
  vec3 rgbSE = texture(uTexture, vTextureCoord.xy + vec2( 1.0,  1.0) * res).xyz;
  vec4 rgbaM = texture(uTexture, vTextureCoord.xy);
  vec3 rgbM = rgbaM.xyz;
  vec3 luma = vec3(0.299, 0.587, 0.114);
  float lumaNW = dot(rgbNW, luma);
  float lumaNE = dot(rgbNE, luma);
  float lumaSW = dot(rgbSW, luma);
  float lumaSE = dot(rgbSE, luma);
  float lumaM = dot(rgbM, luma);
  float lumaMin = min(lumaM, min(min(lumaNW, lumaNE), min(lumaSW, lumaSE)));
  float lumaMax = max(lumaM, max(max(lumaNW, lumaNE), max(lumaSW, lumaSE)));
  float lumaRange = lumaMax - lumaMin;
  if (lumaRange < max(FXAA_EDGE_THRESHOLD_MIN, lumaMax * FXAA_EDGE_THRESHOLD)) {
    fragColor = rgbaM;
    return;
  }
  float lumaAvg = (lumaNW + lumaNE + lumaSW + lumaSE) * 0.25;
  float subpixBlend = clamp(abs(lumaAvg - lumaM) / lumaRange, 0.0, 1.0);
  subpixBlend = smoothstep(0.0, 1.0, subpixBlend);
  subpixBlend = subpixBlend * subpixBlend * FXAA_SUBPIX_QUALITY;
  vec2 dir;
  dir.x = -((lumaNW + lumaNE) - (lumaSW + lumaSE));
  dir.y = ((lumaNW + lumaSW) - (lumaNE + lumaSE));
  float dirReduce = max((lumaNW + lumaNE + lumaSW + lumaSE) * (0.25 * FXAA_REDUCE_MUL), FXAA_REDUCE_MIN);
  float rcpDirMin = 1.0 / (min(abs(dir.x), abs(dir.y)) + dirReduce);
  dir = min(vec2(FXAA_SPAN_MAX), max(vec2(-FXAA_SPAN_MAX), dir * rcpDirMin)) * res;
  vec4 rgbA = 0.5 * (
    texture(uTexture, vTextureCoord.xy + dir * (1.0 / 3.0 - 0.5)) +
    texture(uTexture, vTextureCoord.xy + dir * (2.0 / 3.0 - 0.5)));
  vec4 rgbB = rgbA * 0.5 + 0.25 * (
    texture(uTexture, vTextureCoord.xy + dir * -0.5) +
    texture(uTexture, vTextureCoord.xy + dir * 0.5));
  float lumaB = dot(rgbB.xyz, luma);
  vec4 edgeResult;
  if (lumaB < lumaMin || lumaB > lumaMax) {
    edgeResult = rgbA;
  } else {
    edgeResult = rgbB;
  }
  fragColor = mix(edgeResult, rgbaM, -subpixBlend);
}`;

/* ------------------------------------------------------------------ */
/*  Easing functions for appear animations                             */
/* ------------------------------------------------------------------ */

function easeInOutCirc(t: number): number {
  return t < 0.5
    ? (1 - Math.sqrt(1 - Math.pow(2 * t, 2))) / 2
    : (Math.sqrt(1 - Math.pow(-2 * t + 2, 2)) + 1) / 2;
}

function easeInOutExpo(t: number): number {
  if (t === 0) return 0;
  if (t === 1) return 1;
  return t < 0.5
    ? Math.pow(2, 20 * t - 10) / 2
    : (2 - Math.pow(2, -20 * t + 10)) / 2;
}

function animateValue(
  elapsed: number,
  startVal: number,
  endVal: number,
  delay: number,
  duration: number,
  easeFn: (t: number) => number,
): number {
  if (elapsed < delay) return startVal;
  const t = Math.min((elapsed - delay) / duration, 1);
  return startVal + (endVal - startVal) * easeFn(t);
}

/* ------------------------------------------------------------------ */
/*  Image URL                                                          */
/* ------------------------------------------------------------------ */

const IMAGE_URL =
  "https://assets.unicorn.studio/images/jJpRdn5u4uXnmfUbdzJjMvkPD192/remix_Untitled%20design%20-%202025-05-29T110415.902.webp";

/* ------------------------------------------------------------------ */
/*  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 FlipI() {
  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 pStars = link(gl, VERT, FRAG_STARS);
    const pImage = link(gl, VERT, FRAG_IMAGE_COMPOSITE);
    const pSdf = link(gl, VERT, FRAG_SDF);
    const pFxaa = link(gl, VERT, FRAG_FXAA);
    if (!pStars || !pImage || !pSdf || !pFxaa) return;

    /* --- Load image texture --------------------------------------- */
    let imageTex: WebGLTexture | null = null;
    const img = new Image();
    img.crossOrigin = "anonymous";
    img.onload = () => {
      const tex = gl.createTexture()!;
      gl.bindTexture(gl.TEXTURE_2D, tex);
      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
      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);
      imageTex = tex;
    };
    img.src = IMAGE_URL;

    /* --- 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();
      const nw = Math.floor(rect.width * dpr);
      const nh = Math.floor(rect.height * dpr);
      if (canvas.width !== nw || canvas.height !== nh) {
        w = nw;
        h = nh;
        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 = 0.5,
      smMY = 0.5;
    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 helpers -------------------------------------- */
    function pass(
      prog: WebGLProgram,
      inputTex: WebGLTexture,
      target: WebGLFramebuffer | null,
      time: number,
      mx: number,
      my: number,
    ) {
      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);
      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 starsTime = 0;
    let sdfTime = 0;
    let prev = performance.now();
    const mountTime = prev;
    let raf = 0;

    const frame = (now: number) => {
      const dt = Math.min((now - prev) / 1000, 0.1);
      prev = now;
      const elapsedMs = now - mountTime;

      // Accumulate per-layer time
      starsTime += dt * 1.0 * 60;
      sdfTime += dt * 0.26 * 60;

      // Smooth mouse (shared momentum, capped from 1.0 to 0.92)
      const lerp = 1 - Math.pow(0.92, dt * 60);
      smMX += (rawMX - smMX) * lerp;
      smMY += (rawMY - smMY) * lerp;

      // Appear animations for SDF layer
      const aScale = animateValue(elapsedMs, 0.55, 0.092, 0, 1200, easeInOutCirc);
      const aAxisY = animateValue(
        elapsedMs,
        0.5,
        0.33611111111111114,
        0,
        1200,
        easeInOutExpo,
      );
      const aExtrude = animateValue(
        elapsedMs,
        1.0,
        0.27,
        700,
        1000,
        easeInOutCirc,
      );
      const aShapeControl = animateValue(
        elapsedMs,
        1.0,
        0.0,
        1250,
        1000,
        easeInOutCirc,
      );

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

      // 0. Clear FBO_A to gradient gray
      gl!.bindFramebuffer(gl!.FRAMEBUFFER, fboA.fb);
      gl!.clearColor(0.8157, 0.8157, 0.8157, 1);
      gl!.clear(gl!.COLOR_BUFFER_BIT);

      // 1. Stars: FBO_A -> FBO_B
      pass(pStars!, fboA.tex, fboB.fb, starsTime, smMX, smMY);

      // 2. Image composite: FBO_B + sourceImage -> FBO_A
      if (imageTex) {
        gl!.bindFramebuffer(gl!.FRAMEBUFFER, fboA.fb);
        gl!.useProgram(pImage!);
        gl!.activeTexture(gl!.TEXTURE0);
        gl!.bindTexture(gl!.TEXTURE_2D, fboB.tex);
        gl!.uniform1i(gl!.getUniformLocation(pImage!, "uTexture"), 0);
        gl!.activeTexture(gl!.TEXTURE1);
        gl!.bindTexture(gl!.TEXTURE_2D, imageTex);
        gl!.uniform1i(gl!.getUniformLocation(pImage!, "uSourceImage"), 1);
        const uAR = gl!.getUniformLocation(pImage!, "uArtboardResolution");
        if (uAR) gl!.uniform2f(uAR, 1080, 1080);
        gl!.drawArrays(gl!.TRIANGLE_STRIP, 0, 4);
      } else {
        // Image not loaded yet — copy FBO_B to FBO_A
        gl!.bindFramebuffer(gl!.FRAMEBUFFER, fboA.fb);
        gl!.clearColor(0, 0, 0, 0);
        gl!.clear(gl!.COLOR_BUFFER_BIT);
        pass(pFxaa!, fboB.tex, fboA.fb, 0, 0.5, 0.5);
      }

      // 3. SDF shape: FBO_A -> FBO_B
      gl!.bindFramebuffer(gl!.FRAMEBUFFER, fboB.fb);
      gl!.useProgram(pSdf!);
      gl!.activeTexture(gl!.TEXTURE0);
      gl!.bindTexture(gl!.TEXTURE_2D, fboA.tex);
      gl!.uniform1i(gl!.getUniformLocation(pSdf!, "uTexture"), 0);
      gl!.uniform1f(gl!.getUniformLocation(pSdf!, "uTime"), sdfTime);
      gl!.uniform2f(gl!.getUniformLocation(pSdf!, "uMousePos"), smMX, smMY);
      gl!.uniform2f(gl!.getUniformLocation(pSdf!, "uResolution"), w, h);
      gl!.uniform3f(
        gl!.getUniformLocation(pSdf!, "uAxis"),
        0.5,
        aAxisY,
        0.475,
      );
      gl!.uniform1f(gl!.getUniformLocation(pSdf!, "uScale"), aScale);
      gl!.uniform1f(
        gl!.getUniformLocation(pSdf!, "uShapeControl"),
        aShapeControl,
      );
      gl!.uniform1f(gl!.getUniformLocation(pSdf!, "uExtrude"), aExtrude);
      gl!.drawArrays(gl!.TRIANGLE_STRIP, 0, 4);

      // 4. FXAA: FBO_B -> screen
      pass(pFxaa!, fboB.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);
      if (imageTex) gl.deleteTexture(imageTex);
      gl.deleteProgram(pStars);
      gl.deleteProgram(pImage);
      gl.deleteProgram(pSdf);
      gl.deleteProgram(pFxaa);
    };
  }, []);

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