Lego reveal

Build this: a stylized portrait that CYCLES through several art styles of the SAME photo (LEGO, Minecraft, Roblox) and melts back to the REAL photo along a soft cursor trail. You supply the real photo plus one AI-restyled version per style, all framing the same pose. The card auto-cycles the styles (each held ~2.8s then a quick ~0.4s crossfade), the background + a cursor-following glow take each style's colour and crossfade with it, the tile does a gentle 3D tilt + parallax toward the cursor, and when idle an autonomous virtual cursor wanders the face so it keeps revealing on its own. Two WebGL passes per frame. (1) A persistent cursor-trail buffer on a small ping-pong half-float render target: each frame the cursor paints a soft noise-warped spot into the red channel (distance-to-pointer through smoothstep, perturbed by Perlin noise); the buffer decays and neighbour taps erode it so a trail lingers and fades. (2) The display pass: crossfade the current + next style textures (cover-fit, center-crop), read the trail buffer, and where it is hot the reveal snaps to a grid of MERGED rounded-corner blocks (a union of rounded-box SDFs per revealed cell, blocks bounce in on the front) that mix to the crisp real photo. Framework-free WebGL1 (two programs, a full-screen triangle, a half-float ping-pong pair) + a rAF loop; the tile tilt, glow and background colour are reported to the host each frame and applied with CSS. Reduced-motion renders one static frame.

First make the images. Take a clear photo of yourself, then ask an AI image model (e.g. ChatGPT / an image model) to restyle that SAME photo into each style, keeping the pose and framing. The exact prompts used here were literally:
  - "make me a lego"
  - "make me a minecraft"
  - "make me a roblox"
You end up with your real photo + one restyled image per style, all the same square crop. Those are the textures the effect below cycles and reveals.

The complete, self-contained implementation follows, one file per block. It is framework-agnostic core logic — wire it into your own component and mount it on an element.

### lego/shaders.ts
```ts
const CNOISE3 = `
vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}
vec3 fade(vec3 t) {return t*t*t*(t*(t*6.0-15.0)+10.0);}
float cnoise(vec3 P){
  vec3 Pi0 = floor(P); vec3 Pi1 = Pi0 + vec3(1.0);
  Pi0 = mod(Pi0, 289.0); Pi1 = mod(Pi1, 289.0);
  vec3 Pf0 = fract(P); vec3 Pf1 = Pf0 - vec3(1.0);
  vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
  vec4 iy = vec4(Pi0.yy, Pi1.yy);
  vec4 iz0 = Pi0.zzzz; vec4 iz1 = Pi1.zzzz;
  vec4 ixy = permute(permute(ix) + iy);
  vec4 ixy0 = permute(ixy + iz0); vec4 ixy1 = permute(ixy + iz1);
  vec4 gx0 = ixy0 / 7.0; vec4 gy0 = fract(floor(gx0) / 7.0) - 0.5;
  gx0 = fract(gx0); vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
  vec4 sz0 = step(gz0, vec4(0.0));
  gx0 -= sz0 * (step(0.0, gx0) - 0.5); gy0 -= sz0 * (step(0.0, gy0) - 0.5);
  vec4 gx1 = ixy1 / 7.0; vec4 gy1 = fract(floor(gx1) / 7.0) - 0.5;
  gx1 = fract(gx1); vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
  vec4 sz1 = step(gz1, vec4(0.0));
  gx1 -= sz1 * (step(0.0, gx1) - 0.5); gy1 -= sz1 * (step(0.0, gy1) - 0.5);
  vec3 g000 = vec3(gx0.x,gy0.x,gz0.x); vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
  vec3 g010 = vec3(gx0.z,gy0.z,gz0.z); vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
  vec3 g001 = vec3(gx1.x,gy1.x,gz1.x); vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
  vec3 g011 = vec3(gx1.z,gy1.z,gz1.z); vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);
  vec4 norm0 = taylorInvSqrt(vec4(dot(g000,g000), dot(g010,g010), dot(g100,g100), dot(g110,g110)));
  g000 *= norm0.x; g010 *= norm0.y; g100 *= norm0.z; g110 *= norm0.w;
  vec4 norm1 = taylorInvSqrt(vec4(dot(g001,g001), dot(g011,g011), dot(g101,g101), dot(g111,g111)));
  g001 *= norm1.x; g011 *= norm1.y; g101 *= norm1.z; g111 *= norm1.w;
  float n000 = dot(g000, Pf0);
  float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
  float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
  float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
  float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
  float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
  float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
  float n111 = dot(g111, Pf1);
  vec3 fade_xyz = fade(Pf0);
  vec4 n_z = mix(vec4(n000,n100,n010,n110), vec4(n001,n101,n011,n111), fade_xyz.z);
  vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
  return 2.2 * mix(n_yz.x, n_yz.y, fade_xyz.x);
}
`;

export const FULL_VERT = `
attribute vec2 aPosition;
varying vec2 vUv;
void main() {
  vUv = aPosition * 0.5 + 0.5;
  gl_Position = vec4(aPosition, 0.0, 1.0);
}
`;

export const TRAIL_FRAG = `
precision highp float;
${CNOISE3}
varying vec2 vUv;
uniform vec2 uResolution;
uniform sampler2D uMap;
uniform vec2  uPointer;
uniform float uActive;
uniform float uDt;
uniform float uTime;
uniform float uSize;

void main() {
  vec2 uv = vUv;
  vec2 texel = vec2(1.0) / uResolution;

  vec2 t = texel * (uDt * 16.0);
  float c1 = texture2D(uMap, uv + t).r;
  float c2 = texture2D(uMap, uv - t).r;
  float c3 = texture2D(uMap, uv + t * vec2(-1.0, 1.0)).r;
  float c4 = texture2D(uMap, uv + t * vec2(1.0, -1.0)).r;
  float faded = min(min(c1, c2), min(c3, c4)) * (1.0 - uDt * 0.35);

  float d = distance(uv, uPointer);
  d += cnoise(vec3(uv * 2.0, uTime * 0.6)) * 0.45 * uSize;
  float paint = smoothstep(uSize, uSize * 0.2, d) * uActive;

  float v = max(faded, paint);
  gl_FragColor = vec4(v, 0.0, 0.0, 1.0);
}
`;

export const LEGO_FRAG = `
precision highp float;
varying vec2 vUv;
uniform sampler2D uStyleA;
uniform sampler2D uStyleB;
uniform float uStyleMix;
uniform float uZoomA;
uniform float uZoomB;
uniform sampler2D uReal;
uniform sampler2D uTrail;
uniform vec2  uCover;
uniform vec2  uRealShift;
uniform float uRealZoom;
uniform vec2  uParallax;

vec2 cover(vec2 uv) { return (uv - 0.5) * uCover / 1.12 + 0.5 + uParallax; }

const float REVEAL_GRID = 24.0;

float sdRoundBox(vec2 p, vec2 b, float r) {
  vec2 q = abs(p) - b + r;
  return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r;
}

float cellVal(vec2 gc) {
  vec2 uv = (gc + 0.5) / REVEAL_GRID;
  return texture2D(uTrail, uv).r;
}

float cellOn(float v) { return step(0.5, v); }

float cellPop(float v) {

  return smoothstep(0.5, 0.62, v) * (1.0 - smoothstep(0.62, 0.82, v));
}

float smin(float a, float b, float k) {
  float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0);
  return mix(b, a, h) - k * h * (1.0 - h);
}

void main() {

  float push = uStyleMix * (1.0 - uStyleMix) * 4.0;
  float pz = 1.0 + 0.025 * push;
  vec2 uvA = cover((vUv - 0.5) / (uZoomA * pz) + 0.5);
  vec2 uvB = cover((vUv - 0.5) / (uZoomB * pz) + 0.5);

  vec3 style = mix(texture2D(uStyleA, uvA).rgb, texture2D(uStyleB, uvB).rgb, uStyleMix);

  vec2 realUV = cover((vUv - 0.5) / uRealZoom + 0.5) + uRealShift;
  vec3 realCrisp = texture2D(uReal, realUV).rgb;

  vec2 g = vUv * REVEAL_GRID;
  vec2 base = floor(g);
  float sd = 1e9;
  for (int j = -2; j <= 2; j++) {
    for (int i = -2; i <= 2; i++) {
      vec2 gc = base + vec2(float(i), float(j));
      float v = cellVal(gc);
      if (cellOn(v) > 0.5) {
        vec2 c = gc + 0.5;

        float hs = 0.62 + 0.14 * cellPop(v);
        float d = sdRoundBox(g - c, vec2(hs), 0.3);
        sd = smin(sd, d, 0.16);
      }
    }
  }

  float m = 1.0 - smoothstep(-0.06, 0.06, sd);

  vec3 outc = mix(style, realCrisp, m);

  float e = 0.03;
  float sdx = 1e9, sdy = 1e9;
  for (int j = -2; j <= 2; j++) {
    for (int i = -2; i <= 2; i++) {
      vec2 gc = base + vec2(float(i), float(j));
      float v = cellVal(gc);
      if (cellOn(v) > 0.5) {
        vec2 c = gc + 0.5;
        float hs = 0.62 + 0.14 * cellPop(v);
        sdx = smin(sdx, sdRoundBox(g + vec2(e, 0.0) - c, vec2(hs), 0.3), 0.16);
        sdy = smin(sdy, sdRoundBox(g + vec2(0.0, e) - c, vec2(hs), 0.3), 0.16);
      }
    }
  }
  vec2 nrm = normalize(vec2(sdx - sd, sdy - sd) + 1e-6);
  float lightBias = dot(nrm, normalize(vec2(-1.0, 1.0)));

  float band = smoothstep(0.0, -0.05, sd) * smoothstep(-0.16, -0.05, sd);
  outc *= 1.0 - band * 0.26 * clamp(-lightBias, 0.0, 1.0);
  outc += band * 0.13 * clamp(lightBias, 0.0, 1.0) * m;

  gl_FragColor = vec4(outc, 1.0);
}
`;

```

### lego/engine.ts
```ts
import { FULL_VERT, TRAIL_FRAG, LEGO_FRAG } from "./shaders";
import { mediaUrl } from "../../lib/video-sources";

const REAL_URL = mediaUrl("/lego/real.webp");

type Style = {
  url: string;
  bg: [number, number, number];
  glow: [number, number, number];
  zoom?: number;
};
const STYLES: Style[] = [

  { url: mediaUrl("/lego/lego.webp"), bg: [253, 246, 216], glow: [255, 222, 80], zoom: 1.12 },

  { url: mediaUrl("/lego/minecraft.webp"), bg: [231, 244, 224], glow: [126, 211, 90] },

  { url: mediaUrl("/lego/roblox.webp"), bg: [240, 238, 240], glow: [226, 78, 78] },
];
const STYLE_HOLD = 2.8;
const STYLE_FADE = 0.28;

export type LegoFrameState = {
  tiltX: number;
  tiltY: number;
  glowX: number;
  glowY: number;
  glowI: number;
  bg: string;
  glowColor: string;
};

const TRAIL_RES = 220;
const TRAIL_SIZE = 0.13;
const TRAIL_SIZE_AUTO = 0.2;

const REAL_ZOOM = 1.12;

const REAL_SHIFT: [number, number] = [-0.01, 0.05];

export class LegoReveal {
  private host: HTMLElement;
  private canvas: HTMLCanvasElement;
  private gl: WebGLRenderingContext | null = null;
  private display: WebGLProgram | null = null;
  private trail: WebGLProgram | null = null;
  private dLoc: Record<string, WebGLUniformLocation | null> = {};
  private tLoc: Record<string, WebGLUniformLocation | null> = {};
  private quad: WebGLBuffer | null = null;

  private styleTex: (WebGLTexture | null)[] = STYLES.map(() => null);
  private realTex: WebGLTexture | null = null;
  private blackTex: WebGLTexture | null = null;
  private styleAR = 1;

  private styleIdx = 0;
  private styleClock = 0;
  private styleMix = 0;

  private rtA: { fb: WebGLFramebuffer; tex: WebGLTexture } | null = null;
  private rtB: { fb: WebGLFramebuffer; tex: WebGLTexture } | null = null;
  private hasTrail = false;

  private raf = 0;
  private running = false;
  private visible = false;
  private painted = false;
  private destroyed = false;
  private last = 0;
  private time = 0;
  private idle = 3;

  private w = 0;
  private h = 0;
  private dpr = 1;

  private px = 0.5;
  private py = 0.5;
  private tpx = 0.5;
  private tpy = 0.5;
  private active = 0;

  private autoActive = 0;
  private revealSize = TRAIL_SIZE;

  private parx = 0;
  private pary = 0;

  private tiltX = 0;
  private tiltY = 0;
  private glowX = 0.5;
  private glowY = 0.5;
  private glowI = 0;
  private onFrame?: (s: LegoFrameState) => void;

  onReady?: () => void;

  ok = false;

  constructor(host: HTMLElement, onFrame?: (s: LegoFrameState) => void) {
    this.host = host;
    this.onFrame = onFrame;
    this.canvas = document.createElement("canvas");
    Object.assign(this.canvas.style, {
      position: "absolute",
      inset: "0",
      width: "100%",
      height: "100%",
      display: "block",
      opacity: "0",
    });
    host.appendChild(this.canvas);

    const gl = this.canvas.getContext("webgl", {
      alpha: false,
      antialias: false,
      premultipliedAlpha: false,
    });
    if (!gl) return;
    this.gl = gl;
    gl.clearColor(0.06, 0.06, 0.07, 1);

    try {
      this.display = this.build(FULL_VERT, LEGO_FRAG);
      this.trail = this.build(FULL_VERT, TRAIL_FRAG);
    } catch {
      this.gl = null;
      return;
    }

    for (const u of ["uStyleA", "uStyleB", "uStyleMix", "uZoomA", "uZoomB", "uReal", "uTrail", "uCover", "uRealShift", "uRealZoom", "uParallax"]) {
      this.dLoc[u] = gl.getUniformLocation(this.display, u);
    }
    for (const u of ["uResolution", "uMap", "uPointer", "uActive", "uDt", "uTime", "uSize"]) {
      this.tLoc[u] = gl.getUniformLocation(this.trail, u);
    }

    const aPosD = gl.getAttribLocation(this.display, "aPosition");
    this.quad = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, this.quad);

    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
    gl.enableVertexAttribArray(aPosD);
    gl.vertexAttribPointer(aPosD, 2, gl.FLOAT, false, 0, 0);

    this.setupTrail();

    const ph = this.placeholder([40, 40, 45, 255]);
    this.styleTex = STYLES.map(() => ph);
    this.realTex = ph;
    this.blackTex = this.placeholder([0, 0, 0, 255]);

    this.loadTexture(STYLES[0].url, (t, ar) => {
      this.styleTex[0] = t;
      this.styleAR = ar;
      this.onReady?.();
      this.onReady = undefined;
      if (!this.running) this.renderOnce();
    });
    for (let i = 1; i < STYLES.length; i++) {
      const idx = i;
      this.loadTexture(STYLES[idx].url, (t) => {
        this.styleTex[idx] = t;
      });
    }
    this.loadTexture(REAL_URL, (t) => {
      this.realTex = t;
      if (!this.running) this.renderOnce();
    });

    this.canvas.addEventListener("pointermove", this.onMove);
    this.canvas.addEventListener("pointerenter", this.onEnter);
    this.canvas.addEventListener("pointerleave", this.onLeave);

    this.resize();
    this.ok = true;
  }

  private build(vs: string, fs: string): WebGLProgram {
    const gl = this.gl!;
    const c = (type: number, src: string) => {
      const sh = gl.createShader(type)!;
      gl.shaderSource(sh, src);
      gl.compileShader(sh);
      if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) {
        throw new Error(gl.getShaderInfoLog(sh) || "compile failed");
      }
      return sh;
    };
    const prog = gl.createProgram()!;
    gl.attachShader(prog, c(gl.VERTEX_SHADER, vs));
    gl.attachShader(prog, c(gl.FRAGMENT_SHADER, fs));
    gl.linkProgram(prog);
    if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
      throw new Error(gl.getProgramInfoLog(prog) || "link failed");
    }
    return prog;
  }

  private placeholder(rgba: number[]): WebGLTexture | null {
    const gl = this.gl;
    if (!gl) return null;
    const t = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, t);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array(rgba));
    return t;
  }

  private setupTrail() {
    const gl = this.gl!;
    const ext = gl.getExtension("OES_texture_half_float");
    gl.getExtension("OES_texture_half_float_linear");
    const type = ext ? ext.HALF_FLOAT_OES : gl.UNSIGNED_BYTE;
    const make = () => {
      const tex = gl.createTexture()!;
      gl.bindTexture(gl.TEXTURE_2D, tex);
      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, TRAIL_RES, TRAIL_RES, 0, gl.RGBA, type, 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);
      const ok = gl.checkFramebufferStatus(gl.FRAMEBUFFER) === gl.FRAMEBUFFER_COMPLETE;
      gl.bindFramebuffer(gl.FRAMEBUFFER, null);
      return ok ? { fb, tex } : null;
    };
    const a = make();
    const b = make();
    if (a && b) {
      this.rtA = a;
      this.rtB = b;
      this.hasTrail = true;

      for (const rt of [a, b]) {
        gl.bindFramebuffer(gl.FRAMEBUFFER, rt.fb);
        gl.viewport(0, 0, TRAIL_RES, TRAIL_RES);
        gl.clearColor(0, 0, 0, 1);
        gl.clear(gl.COLOR_BUFFER_BIT);
      }
      gl.bindFramebuffer(gl.FRAMEBUFFER, null);
      gl.clearColor(0.06, 0.06, 0.07, 1);
    }
  }

  private loadTexture(url: string, done: (t: WebGLTexture, ar: number) => void) {
    const img = new Image();
    img.crossOrigin = "anonymous";
    img.onload = () => {
      const gl = this.gl;
      if (!gl || this.destroyed) return;
      const tex = gl.createTexture()!;
      gl.bindTexture(gl.TEXTURE_2D, tex);
      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
      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.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
      done(tex, (img.naturalWidth || 1) / (img.naturalHeight || 1));
    };
    img.src = url;
  }

  private onMove = (e: PointerEvent) => {
    const r = this.canvas.getBoundingClientRect();
    this.tpx = (e.clientX - r.left) / r.width;
    this.tpy = 1 - (e.clientY - r.top) / r.height;
    this.active = 1;
    this.wake();
  };
  private onEnter = () => {
    this.active = 1;
    this.wake();
  };
  private onLeave = () => {
    this.active = 0;
  };

  private wake() {
    if (this.visible && !this.running) this.startLoop();
  }

  resize() {
    const r = this.host.getBoundingClientRect();
    this.dpr = Math.min(2, window.devicePixelRatio || 1);
    this.w = r.width;
    this.h = r.height;
    const cw = Math.max(1, Math.round(this.w * this.dpr));
    const ch = Math.max(1, Math.round(this.h * this.dpr));
    if (this.canvas.width !== cw || this.canvas.height !== ch) {
      this.canvas.width = cw;
      this.canvas.height = ch;
      this.gl?.viewport(0, 0, cw, ch);
      if (!this.running) this.renderOnce();
    }
  }

  private coverScale(imgAR: number): [number, number] {
    const cardAR = this.w / Math.max(1, this.h);
    if (cardAR > imgAR) return [1, imgAR / cardAR];
    return [cardAR / imgAR, 1];
  }

  setVisible(v: boolean) {
    if (!this.ok) return;
    this.visible = v;
    if (v) {
      this.resize();
      this.startLoop();
    } else {
      this.pause();
    }
  }

  private startLoop() {
    if (!this.ok || this.running) return;
    this.running = true;
    this.resize();
    this.last = 0;
    const loop = (now: number) => {
      if (!this.running) return;
      this.frame(now);
      this.raf = requestAnimationFrame(loop);
    };
    this.raf = requestAnimationFrame(loop);
  }

  private pause() {
    this.running = false;
    if (this.raf) cancelAnimationFrame(this.raf);
    this.raf = 0;
  }

  renderStill() {
    this.resize();
    this.renderDisplay();
  }

  private renderOnce() {
    if (this.running) return;
    requestAnimationFrame(() => this.renderDisplay());
  }

  private frame(now: number) {
    const dt = this.last ? Math.min(0.05, (now - this.last) / 1000) : 0.016;
    this.last = now;
    this.time += dt;
    this.idle = this.active ? 0 : this.idle + dt;

    this.styleClock += dt;
    if (this.styleClock < STYLE_HOLD) {
      this.styleMix = 0;
    } else if (this.styleClock < STYLE_HOLD + STYLE_FADE) {

      const t = (this.styleClock - STYLE_HOLD) / STYLE_FADE;
      this.styleMix = t * t * t * (t * (t * 6 - 15) + 10);
    } else {

      this.styleIdx = (this.styleIdx + 1) % STYLES.length;
      this.styleClock = 0;
      this.styleMix = 0;
    }

    const auto = Math.min(1, Math.max(0, this.idle - 0.4) / 0.9);
    const T = this.time;

    const FX = 0.5;
    const FY = 0.66;
    const ax =
      FX +
      0.16 * Math.sin(T * 1.15) +
      0.09 * Math.sin(T * 2.6 + 1.0) +
      0.05 * Math.cos(T * 4.1 + 0.4);
    const ay =
      FY +
      0.13 * Math.cos(T * 0.95 + 2.1) +
      0.07 * Math.sin(T * 2.2 + 0.5) +
      0.04 * Math.cos(T * 3.7 + 1.7);

    const cx = this.active ? this.tpx : this.tpx * (1 - auto) + ax * auto;
    const cy = this.active ? this.tpy : this.tpy * (1 - auto) + ay * auto;

    const rev = Math.max(this.active, auto);

    this.revealSize = TRAIL_SIZE + (TRAIL_SIZE_AUTO - TRAIL_SIZE) * (auto * (1 - this.active));

    this.px += (cx - this.px) * 0.4;
    this.py += (cy - this.py) * 0.4;
    this.autoActive = rev;

    const P = 0.02 + (0.07 - 0.02) * (auto * (1 - this.active));
    const targX = -(this.px - 0.5) * 2.0 * P * Math.max(rev, this.active);
    const targY = (this.py - 0.5) * 2.0 * P * Math.max(rev, this.active);
    this.parx += (targX - this.parx) * 0.045;
    this.pary += (targY - this.pary) * 0.045;

    const MAXDEG = 7.0 + 5.0 * (auto * (1 - this.active));
    const targRY = (this.px - 0.5) * 2.0 * MAXDEG;
    const targRX = (this.py - 0.5) * 2.0 * MAXDEG;
    this.tiltY += (targRY - this.tiltY) * 0.06;
    this.tiltX += (targRX - this.tiltX) * 0.06;

    const gTargX = this.px;
    const gTargY = 1.0 - this.py;
    this.glowX += (gTargX - this.glowX) * 0.08;
    this.glowY += (gTargY - this.glowY) * 0.08;

    const gTargI = 0.28 + 0.72 * rev + 0.4 * this.active;
    this.glowI += (gTargI - this.glowI) * 0.09;

    const cur = STYLES[this.styleIdx];
    const nxt = STYLES[(this.styleIdx + 1) % STYLES.length];
    const rgb = (a: [number, number, number], b: [number, number, number]) => {
      const m = this.styleMix;
      const r = Math.round(a[0] + (b[0] - a[0]) * m);
      const g = Math.round(a[1] + (b[1] - a[1]) * m);
      const bl = Math.round(a[2] + (b[2] - a[2]) * m);
      return `rgb(${r}, ${g}, ${bl})`;
    };

    this.onFrame?.({
      tiltX: this.tiltX,
      tiltY: this.tiltY,
      glowX: this.glowX,
      glowY: this.glowY,
      glowI: this.glowI,
      bg: rgb(cur.bg, nxt.bg),
      glowColor: rgb(cur.glow, nxt.glow),
    });

    if (this.hasTrail) this.stepTrail(dt);
    this.renderDisplay();

  }

  private stepTrail(dt: number) {
    const gl = this.gl!;
    if (!this.rtA || !this.rtB) return;
    gl.useProgram(this.trail);
    gl.bindFramebuffer(gl.FRAMEBUFFER, this.rtB.fb);
    gl.viewport(0, 0, TRAIL_RES, TRAIL_RES);
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, this.rtA.tex);
    gl.uniform1i(this.tLoc.uMap, 0);
    gl.uniform2f(this.tLoc.uResolution, TRAIL_RES, TRAIL_RES);
    gl.uniform2f(this.tLoc.uPointer, this.px, this.py);
    gl.uniform1f(this.tLoc.uActive, this.autoActive);
    gl.uniform1f(this.tLoc.uDt, dt);
    gl.uniform1f(this.tLoc.uTime, this.time);
    gl.uniform1f(this.tLoc.uSize, this.revealSize);
    gl.drawArrays(gl.TRIANGLES, 0, 3);
    gl.bindFramebuffer(gl.FRAMEBUFFER, null);

    const t = this.rtA;
    this.rtA = this.rtB;
    this.rtB = t;
  }

  private renderDisplay() {
    const gl = this.gl;
    if (!gl || !this.display) return;
    gl.viewport(0, 0, this.canvas.width, this.canvas.height);
    gl.useProgram(this.display);

    const texA = this.styleTex[this.styleIdx] ?? this.blackTex;
    const texB = this.styleTex[(this.styleIdx + 1) % STYLES.length] ?? texA;
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, texA);
    gl.uniform1i(this.dLoc.uStyleA, 0);
    gl.activeTexture(gl.TEXTURE1);
    gl.bindTexture(gl.TEXTURE_2D, texB);
    gl.uniform1i(this.dLoc.uStyleB, 1);
    gl.uniform1f(this.dLoc.uStyleMix, this.styleMix);
    gl.uniform1f(this.dLoc.uZoomA, STYLES[this.styleIdx].zoom ?? 1);
    gl.uniform1f(this.dLoc.uZoomB, STYLES[(this.styleIdx + 1) % STYLES.length].zoom ?? 1);
    gl.activeTexture(gl.TEXTURE2);
    gl.bindTexture(gl.TEXTURE_2D, this.realTex);
    gl.uniform1i(this.dLoc.uReal, 2);
    gl.activeTexture(gl.TEXTURE3);
    gl.bindTexture(gl.TEXTURE_2D, this.hasTrail && this.rtA ? this.rtA.tex : this.blackTex);
    gl.uniform1i(this.dLoc.uTrail, 3);
    const [cx, cy] = this.coverScale(this.styleAR);
    gl.uniform2f(this.dLoc.uCover, cx, cy);
    gl.uniform2f(this.dLoc.uRealShift, REAL_SHIFT[0], REAL_SHIFT[1]);
    gl.uniform1f(this.dLoc.uRealZoom, REAL_ZOOM);
    gl.uniform2f(this.dLoc.uParallax, this.parx, this.pary);
    gl.drawArrays(gl.TRIANGLES, 0, 3);

    if (!this.painted) {
      this.painted = true;
      this.canvas.style.opacity = "1";
    }
  }

  destroy() {
    this.destroyed = true;
    this.visible = false;
    this.pause();
    this.canvas.removeEventListener("pointermove", this.onMove);
    this.canvas.removeEventListener("pointerenter", this.onEnter);
    this.canvas.removeEventListener("pointerleave", this.onLeave);
    const gl = this.gl;
    if (gl) {
      const uniq = new Set<WebGLTexture>();
      [...this.styleTex, this.realTex, this.blackTex, this.rtA?.tex ?? null, this.rtB?.tex ?? null].forEach(
        (t) => t && uniq.add(t),
      );
      uniq.forEach((t) => gl.deleteTexture(t));
      [this.rtA?.fb, this.rtB?.fb].forEach((f) => f && gl.deleteFramebuffer(f));
      if (this.quad) gl.deleteBuffer(this.quad);
      gl.getExtension("WEBGL_lose_context")?.loseContext();
    }
    this.canvas.remove();
  }
}

```