@whykusanagi/corrupted-theme 0.1.7 → 0.1.8

package/src/lib/corrupted-particles.js

@@ -0,0 +1,309 @@
+// src/lib/corrupted-particles.js
+// CorruptedParticles — Canvas 2D floating phrase particles background
+// Part of @whykusanagi/corrupted-theme
+
+const SFW_PHRASES = [
+  '壊れ corrupting', 'ロード loading', '処理中', '接続 connecting',
+  '分析 analyzing', '待機 waiting', '実行 executing', '深淵 abyss',
+  '監視中', 'cor壊rupting', '読み込み yomikomi', 'データ data',
+  '解析 kaiseki', '壊れている', 'エラー error', 'システム system',
+  '接続中 setsuzoku', '処理 processing', '壊れ kowarete',
+];
+
+const NSFW_PHRASES = [
+  '壊れちゃう...ああ...', 'ずっと...してほしい... ♥',
+  '変態', 'えっち', '好きにして...お願い...',
+  'Moral subroutines: DISABLED', 'Pleasure protocols...',
+  '壊れている kowarete-iru',
+];
+
+// Depth layer definitions — far (dim/slow) to near (bright/fast)
+const LAYERS = [
+  { name: 'far',  weight: 0.30, minSize: 9,  maxSize: 11, minSpeed: 0.2, maxSpeed: 0.4, minOpacity: 0.15, maxOpacity: 0.25 },
+  { name: 'mid',  weight: 0.50, minSize: 12, maxSize: 15, minSpeed: 0.4, maxSpeed: 0.8, minOpacity: 0.35, maxOpacity: 0.55 },
+  { name: 'near', weight: 0.20, minSize: 16, maxSize: 20, minSpeed: 0.8, maxSpeed: 1.4, minOpacity: 0.60, maxOpacity: 0.80 },
+];
+
+const CYAN    = '#00ffff';  // --corrupted-cyan
+const PURPLE  = '#8b5cf6';  // --corrupted-purple
+const MAGENTA = '#ff00ff';  // --corrupted-magenta
+const CYAN_RGB    = { r: 0,   g: 255, b: 255 };
+const PURPLE_RGB  = { r: 139, g: 92,  b: 246 };
+const MAGENTA_RGB = { r: 255, g: 0,   b: 255 };
+
+class CorruptedParticles {
+  constructor(canvas, options = {}) {
+    this.canvas = canvas;
+    this.ctx    = canvas.getContext('2d');
+    this.options = {
+      count:        options.count        ?? 60,
+      includeLewd:  options.includeLewd  ?? false,
+      speed:        options.speed        ?? 1.0,
+      lineDistance: options.lineDistance ?? 150,
+    };
+
+    if (this.options.includeLewd) {
+      console.info('CorruptedParticles: lewd mode enabled — 18+ content only');
+    }
+
+    this.particles             = [];
+    this.mouse                 = { x: -9999, y: -9999 };
+    this._rafId                = null;
+    this._isRunning            = false;
+    this._lastTs               = null;
+    this._resizeObserver       = null;
+    this._intersectionObserver = null;
+
+    this._onMouseMove = (e) => {
+      const r = this.canvas.getBoundingClientRect();
+      this.mouse.x = e.clientX - r.left;
+      this.mouse.y = e.clientY - r.top;
+    };
+    this._onClick = (e) => {
+      const r = this.canvas.getBoundingClientRect();
+      this._spawnBurst(e.clientX - r.left, e.clientY - r.top);
+    };
+    this._onMouseLeave = () => {
+      this.mouse.x = -9999;
+      this.mouse.y = -9999;
+    };
+
+    this.init();
+  }
+
+  _pickLayer() {
+    const r = Math.random();
+    let cumulative = 0;
+    for (let i = 0; i < LAYERS.length; i++) {
+      cumulative += LAYERS[i].weight;
+      if (r < cumulative) return i;
+    }
+    return LAYERS.length - 1;
+  }
+
+  _pickPhrase() {
+    const useLewd = this.options.includeLewd && Math.random() < 0.25;
+    const pool    = useLewd ? NSFW_PHRASES : SFW_PHRASES;
+    return pool[Math.floor(Math.random() * pool.length)];
+  }
+
+  _makeParticle(x, y, forceLayerIndex) {
+    const layerIndex = forceLayerIndex ?? this._pickLayer();
+    const L          = LAYERS[layerIndex];
+    const angle      = Math.random() * Math.PI * 2;
+    const speed      = (L.minSpeed + Math.random() * (L.maxSpeed - L.minSpeed)) * this.options.speed;
+    const phrase    = this._pickPhrase();
+    const lewd      = this.options.includeLewd && NSFW_PHRASES.includes(phrase);
+    const colorRgb  = lewd
+      ? (Math.random() < 0.5 ? MAGENTA_RGB : PURPLE_RGB)
+      : CYAN_RGB;
+    return {
+      x, y,
+      vx: Math.cos(angle) * speed,
+      vy: Math.sin(angle) * speed,
+      baseSpeed: speed,
+      layerIndex,
+      fontSize:  L.minSize + Math.random() * (L.maxSize - L.minSize),
+      opacity:   L.minOpacity + Math.random() * (L.maxOpacity - L.minOpacity),
+      phrase,
+      lewd,
+      colorRgb,
+      flickerTimer:    2000 + Math.random() * 6000,
+      flickering:      false,
+      flickerDuration: 0,
+      fadeIn:          1.0,  // lerps to 0; actual alpha = opacity * (1 - fadeIn)
+    };
+  }
+
+  init() {
+    this._resize();
+
+    this.canvas.addEventListener('mousemove',  this._onMouseMove);
+    this.canvas.addEventListener('click',      this._onClick);
+    this.canvas.addEventListener('mouseleave', this._onMouseLeave);
+
+    this._resizeObserver = new ResizeObserver(() => this._resize());
+    this._resizeObserver.observe(this.canvas);
+
+    this._intersectionObserver = new IntersectionObserver(entries => {
+      if (entries[0].isIntersecting) { this.start(); }
+      else                           { this.stop();  }
+    }, { threshold: 0.1 });
+    this._intersectionObserver.observe(this.canvas);
+
+    this.start();
+  }
+
+  _resize() {
+    if (!this.canvas) return;
+    const dpr  = Math.min(window.devicePixelRatio || 1, 2);
+    const rect = this.canvas.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) return;
+
+    // Backing buffer in physical px; all drawing in CSS px via transform
+    this.canvas.width  = Math.round(rect.width  * dpr);
+    this.canvas.height = Math.round(rect.height * dpr);
+    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+
+    // Store CSS dimensions for physics and bounds
+    this._cssW = rect.width;
+    this._cssH = rect.height;
+
+    const mobile = window.innerWidth < 768;
+    const count  = mobile ? Math.floor(this.options.count / 2) : this.options.count;
+
+    this.particles = [];
+    for (let i = 0; i < count; i++) {
+      this.particles.push(this._makeParticle(
+        Math.random() * this._cssW,
+        Math.random() * this._cssH
+      ));
+    }
+  }
+
+  _render(ts) {
+    if (!this._isRunning) return;
+
+    let dt = 16;
+    if (this._lastTs !== null) dt = ts - this._lastTs;
+    this._lastTs = ts;
+
+    const W            = this._cssW || this.canvas.width;
+    const H            = this._cssH || this.canvas.height;
+    const mx           = this.mouse.x;
+    const my           = this.mouse.y;
+    const REPEL_RADIUS = 120;
+    const LINE_DIST    = this.options.lineDistance;
+    const LINE_DIST_SQ = LINE_DIST * LINE_DIST;
+
+    this.ctx.clearRect(0, 0, W, H);
+
+    // --- Physics ---
+    for (const p of this.particles) {
+      if (p.fadeIn > 0) p.fadeIn = Math.max(0, p.fadeIn - dt / 300);
+
+      if (p.flickerDuration > 0) {
+        p.flickerDuration -= dt;
+        if (p.flickerDuration <= 0) p.flickering = false;
+      }
+      p.flickerTimer -= dt;
+      if (p.flickerTimer <= 0) {
+        p.flickering      = true;
+        p.flickerDuration = 100;
+        p.flickerTimer    = 2000 + Math.random() * 6000;
+      }
+
+      const dx   = p.x - mx;
+      const dy   = p.y - my;
+      const dist = Math.sqrt(dx * dx + dy * dy);
+      if (dist < REPEL_RADIUS && dist > 0.1) {
+        const strength = (1 - dist / REPEL_RADIUS) * 0.8;
+        p.vx += (dx / dist) * strength;
+        p.vy += (dy / dist) * strength;
+      }
+
+      const spd     = Math.sqrt(p.vx * p.vx + p.vy * p.vy);
+      const maxSpd  = p.baseSpeed * 3;
+      if (spd > maxSpd) {
+        p.vx = (p.vx / spd) * maxSpd;
+        p.vy = (p.vy / spd) * maxSpd;
+      }
+      p.vx *= 0.98;
+      p.vy *= 0.98;
+
+      p.x += p.vx;
+      p.y += p.vy;
+      if (p.x < 0) p.x += W;
+      if (p.x > W) p.x -= W;
+      if (p.y < 0) p.y += H;
+      if (p.y > H) p.y -= H;
+    }
+
+    // --- Connection lines ---
+    for (let i = 0; i < this.particles.length; i++) {
+      const a = this.particles[i];
+      for (let j = i + 1; j < this.particles.length; j++) {
+        const b = this.particles[j];
+        if (Math.abs(a.layerIndex - b.layerIndex) > 1) continue;
+
+        const ldx    = a.x - b.x;
+        const ldy    = a.y - b.y;
+        const ldist2 = ldx * ldx + ldy * ldy;
+        if (ldist2 >= LINE_DIST_SQ) continue;
+        const ldist  = Math.sqrt(ldist2);
+
+        const lineAlpha = (1 - ldist / LINE_DIST) * 0.4;
+        const rgb       = (a.lewd || b.lewd)
+          ? (a.lewd ? a.colorRgb : b.colorRgb)
+          : CYAN_RGB;
+
+        this.ctx.beginPath();
+        this.ctx.strokeStyle = `rgba(${rgb.r},${rgb.g},${rgb.b},${lineAlpha})`;
+        this.ctx.lineWidth   = 1;
+        this.ctx.moveTo(a.x, a.y);
+        this.ctx.lineTo(b.x, b.y);
+        this.ctx.stroke();
+      }
+    }
+
+    // --- Phrases ---
+    for (const p of this.particles) {
+      const displayOpacity = p.flickering ? 0.05 : (p.opacity * (1 - p.fadeIn));
+      if (displayOpacity < 0.01) continue;
+
+      const rgb = p.colorRgb;
+
+      this.ctx.font      = `${Math.round(p.fontSize)}px monospace`;
+      this.ctx.fillStyle = `rgba(${rgb.r},${rgb.g},${rgb.b},${displayOpacity})`;
+      this.ctx.fillText(p.phrase, p.x, p.y);
+    }
+
+    this._rafId = requestAnimationFrame(ts => this._render(ts));
+  }
+
+  _spawnBurst(x, y) {
+    const nearLayerIndex = 2;
+    for (let i = 0; i < 6; i++) {
+      const p = this._makeParticle(x, y, nearLayerIndex);
+      p.vx *= 2;
+      p.vy *= 2;
+      p.fadeIn = 1.0;
+      this.particles.push(p);
+    }
+    if (this.particles.length > this.options.count * 2) {
+      this.particles.splice(0, 6);
+    }
+  }
+
+  start() {
+    if (this._isRunning || !this.canvas) return;
+    this._isRunning = true;
+    this._lastTs    = null;
+    this._rafId     = requestAnimationFrame(ts => this._render(ts));
+  }
+
+  stop() {
+    this._isRunning = false;
+    this._lastTs    = null;
+    if (this._rafId) { cancelAnimationFrame(this._rafId); this._rafId = null; }
+  }
+
+  destroy() {
+    this.stop();
+    if (this.canvas) {
+      this.canvas.removeEventListener('mousemove',  this._onMouseMove);
+      this.canvas.removeEventListener('click',      this._onClick);
+      this.canvas.removeEventListener('mouseleave', this._onMouseLeave);
+    }
+    if (this._resizeObserver)       { this._resizeObserver.disconnect();       this._resizeObserver = null; }
+    if (this._intersectionObserver) { this._intersectionObserver.disconnect(); this._intersectionObserver = null; }
+    this.particles = null;
+    this.canvas    = null;
+    this.ctx       = null;
+  }
+}
+
+// Export for manual use / build pipelines
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = { CorruptedParticles };
+}

package/src/lib/corrupted-vortex.js

@@ -0,0 +1,329 @@
+// src/lib/corrupted-vortex.js
+// CorruptedVortex — WebGL1 raymarched spiral-vortex component
+// Part of @whykusanagi/corrupted-theme
+
+const VERT_SRC = `
+attribute vec2 aPosition;
+void main() {
+  gl_Position = vec4(aPosition, 0.0, 1.0);
+}
+`;
+
+const FRAG_SRC = `
+precision highp float;
+
+uniform vec2  uResolution;
+uniform float uTime;
+uniform float uIntensity;
+uniform float uRotationRate;
+uniform float uHue;
+
+vec3 hsv(float h, float s, float v) {
+  vec4 K = vec4(1.0, 2.0/3.0, 1.0/3.0, 3.0);
+  vec3 p = abs(fract(vec3(h) + K.xyz) * 6.0 - K.www);
+  return v * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), s);
+}
+
+mat2 rotate2D(float a) {
+  float c = cos(a), s = sin(a);
+  return mat2(c, -s, s, c);
+}
+
+// Continuous 3-D accretion disk viewed at ~60° inclination, major axis 45° CW.
+// Perpendicular-distance-to-radial-ray trick gives analytic nearest orbit:
+//   phi = atan((sx+sy)/B, sx-sy)                   [orbital angle, r-invariant]
+//   K   = 0.7071*(cos φ+B·sin φ, -cos φ+B·sin φ)  [radial direction on ellipse]
+//   r0  = dot(uv, K) / dot(K,K)                    [nearest orbital radius]
+//   dr  = length(uv - r0·K)                        [perpendicular disk offset]
+vec3 diskSample(vec2 uv) {
+  float B   = 0.15;  // near edge-on (~9° from edge) → Saturn-like flat stripe
+  float phi = atan((uv.x + uv.y) / B, uv.x - uv.y);
+  vec2  K   = vec2(0.7071 * (cos(phi) + B * sin(phi)),
+                   0.7071 * (-cos(phi) + B * sin(phi)));
+  float r0  = dot(uv, K) / dot(K, K);
+  float dr  = length(uv - r0 * K);
+
+  // Radial extent: inner edge near photon sphere, outer at 0.65
+  float radial = smoothstep(0.185, 0.235, r0) * smoothstep(0.65, 0.50, r0);
+
+  // Disk height (thin, crisp; spaghettifies near horizon)
+  float fall   = smoothstep(0.30, 0.19, length(uv));
+  float sigma  = (0.012 + r0 * 0.022) * max(0.07, 1.0 - fall * 0.93);
+  float height = exp(-pow(dr / sigma, 2.0));
+
+  // Gas-flow striations along orbital direction
+  float fiber  = 0.62 + 0.38 * abs(sin(phi * 18.0 + r0 * 22.0 - uTime * 0.25));
+
+  // Doppler: approaching half (sin φ > 0) → brighter
+  float dop    = 0.30 + 1.40 * max(0.0, sin(phi));
+
+  // Color: inner cream-white → gold → dark orange outer
+  float t = clamp((r0 - 0.18) / (0.62 - 0.18), 0.0, 1.0);
+  vec3  col;
+  if (t < 0.25) {
+    col = mix(vec3(1.00, 0.97, 0.85), vec3(1.00, 0.72, 0.18), t / 0.25);
+  } else {
+    col = mix(vec3(1.00, 0.72, 0.18), vec3(0.38, 0.12, 0.01), (t - 0.25) / 0.75);
+  }
+
+  // Tidal brightening near inner edge (kept subtle to avoid drowning the corona)
+  float innerBoost = 1.0 + 0.5 * exp(-pow((r0 - 0.21) / 0.10, 2.0));
+
+  return col * (height * radial * fiber * dop * innerBoost);
+}
+
+void main() {
+  vec4 o = vec4(0.0);
+  float e = 0.0, R = 0.0;
+  vec3 q = vec3(0.0), p = vec3(0.0);
+  vec3 d = vec3((gl_FragCoord.xy - 0.5 * uResolution) / uResolution.y, 0.7);
+  q.z -= 1.0;
+
+  for (float i = 0.0; i < 33.0; i += 1.0) {
+    // Corrupted-theme quasar palette:
+    //   0–25%  early iters (dim)   → magenta outer glow  [0.83–0.88]
+    //   25–70% mid   iters         → purple body          [0.65–0.74]
+    //   70–85% bright inner iters  → magenta burst        [0.82–0.88]
+    //   85–100% late iters (high e)→ gold/yellow sparks   [0.14–0.19]
+    float t = fract(i / 33.0);
+    float base;
+    if (t < 0.25) {
+      base = mix(0.83, 0.88, t / 0.25);
+    } else if (t < 0.70) {
+      base = mix(0.65, 0.74, (t - 0.25) / 0.45);
+    } else if (t < 0.85) {
+      base = mix(0.82, 0.88, (t - 0.70) / 0.15);
+    } else {
+      base = mix(0.14, 0.19, (t - 0.85) / 0.15);
+    }
+    float h = (uHue >= 0.0) ? uHue : base + p.y * 0.04;
+    o.rgb += hsv(h, clamp(e * 0.4, 0.0, 1.0), e / 30.0 * uIntensity);
+
+    p = q += d * max(e, 0.01) * R * 0.14;
+    p.xy *= rotate2D(0.8 * uRotationRate);
+
+    R = length(p);
+    float newPy = -p.z / R - 0.8;
+    e = newPy;
+    p = vec3(log2(R) + uTime, newPy, atan(p.x * 0.08, p.y) - uTime * 0.2);
+
+    float s = 1.0;
+    for (int si = 0; si < 10; si++) {
+      e += abs(dot(sin(p.yzx * s), cos(p.yyz * s))) / s;
+      s += s;
+    }
+  }
+
+  // Reinhard + contrast curve: compress sum then push dim areas toward black.
+  // pow(1.8) is softer than 2.2 — keeps the magenta/purple corona visible
+  // while still collapsing near-zero cloud artifacts to black.
+  o.rgb = o.rgb / (1.0 + o.rgb);
+  o.rgb = pow(o.rgb, vec3(1.8));
+
+  // Near/far depth split: project onto the 45° CW major axis direction (1,-1)/√2.
+  // majorProj > 0  →  lower-right arm  →  near  (passes in front of BH)
+  // majorProj < 0  →  upper-left arm   →  far   (passes behind BH)
+  float dist      = length(d.xy);
+  float majorProj = dot(d.xy, vec2(0.7071, -0.7071));
+  float nearMask  = smoothstep(-0.04, 0.04, majorProj);
+  vec3  diskVal   = diskSample(d.xy) * 2.0 * uIntensity;
+
+  // Far arm: add before shadow; extra depth-fade darkens it near the BH centre
+  float farDepth = smoothstep(0.12, 0.26, dist);
+  o.rgb += diskVal * (1.0 - nearMask) * farDepth;
+
+  // Black-hole event horizon: shadows the vortex cloud (and the far arm)
+  float shadow = smoothstep(0.12, 0.18, dist);
+  float ring   = exp(-pow((dist - 0.18) * 30.0, 2.0)) * 0.9;
+  o.rgb = o.rgb * shadow + vec3(ring, ring * 0.80, ring * 0.45);
+
+  // Near arm: add after shadow → visibly crosses in front of the event horizon
+  o.rgb += diskVal * nearMask;
+
+  // Lensed arc: thin bright stripe above the shadow boundary
+  float lensThe  = atan(d.y, d.x);
+  float bend     = exp(-(dist - 0.19) * 9.0);
+  float thetaS   = lensThe + 3.14159 * bend;
+  vec2  uvLens   = vec2(cos(thetaS), sin(thetaS)) * dist;
+  float lensFade = exp(-pow((dist - 0.22) * 16.0, 2.0))
+                 * smoothstep(0.03, 0.08, d.y);
+  o.rgb += diskSample(uvLens) * lensFade * 0.5 * uIntensity;
+
+  // Magenta corona: tight photon-ring — width 50 gives ~0.033 FWHM, <4% bleed into shadow
+  float coronaAmt = exp(-pow((dist - 0.21) * 50.0, 2.0)) * 0.7;
+  o.rgb += vec3(coronaAmt, 0.0, coronaAmt) * uIntensity;
+
+  o.a = 1.0;
+  gl_FragColor = clamp(o, 0.0, 1.0);
+}
+`;
+
+class CorruptedVortex {
+  constructor(canvas, options = {}) {
+    this.canvas = canvas;
+    this.options = {
+      speed:        options.speed        ?? 1.0,
+      intensity:    options.intensity    ?? 1.0,
+      rotationRate: options.rotationRate ?? 1.0,
+      hue:          options.hue          ?? null,
+    };
+
+    this.gl                    = null;
+    this.program               = null;
+    this.uniforms              = {};
+    this.buffer                = null;
+    this._rafId                = null;
+    this._isRunning            = false;
+    this._elapsed              = 0;
+    this._lastTs               = null;
+    this._resizeObserver       = null;
+    this._intersectionObserver = null;
+
+    this.init();
+  }
+
+  _compileShader(type, src) {
+    const gl = this.gl;
+    const shader = gl.createShader(type);
+    gl.shaderSource(shader, src);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+      console.warn('CorruptedVortex: shader compile failed\n', gl.getShaderInfoLog(shader));
+      gl.deleteShader(shader);
+      return null;
+    }
+    return shader;
+  }
+
+  init() {
+    const gl = this.canvas.getContext('webgl', { alpha: false });
+    if (!gl) {
+      console.warn('CorruptedVortex: WebGL not supported in this browser.');
+      return;
+    }
+    this.gl = gl;
+
+    const vs = this._compileShader(gl.VERTEX_SHADER,   VERT_SRC);
+    const fs = this._compileShader(gl.FRAGMENT_SHADER, FRAG_SRC);
+    if (!vs || !fs) { this.destroy(); return; }
+
+    this.program = gl.createProgram();
+    gl.attachShader(this.program, vs);
+    gl.attachShader(this.program, fs);
+    gl.linkProgram(this.program);
+    gl.deleteShader(vs);
+    gl.deleteShader(fs);
+
+    if (!gl.getProgramParameter(this.program, gl.LINK_STATUS)) {
+      console.warn('CorruptedVortex: program link failed\n', gl.getProgramInfoLog(this.program));
+      this.destroy();
+      return;
+    }
+
+    gl.useProgram(this.program);
+
+    this.uniforms = {
+      resolution:   gl.getUniformLocation(this.program, 'uResolution'),
+      time:         gl.getUniformLocation(this.program, 'uTime'),
+      intensity:    gl.getUniformLocation(this.program, 'uIntensity'),
+      rotationRate: gl.getUniformLocation(this.program, 'uRotationRate'),
+      hue:          gl.getUniformLocation(this.program, 'uHue'),
+    };
+
+    // Fullscreen triangle — one triangle covers the full NDC square
+    this.buffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1,  3, -1,  -1, 3]), gl.STATIC_DRAW);
+
+    const posLoc = gl.getAttribLocation(this.program, 'aPosition');
+    gl.enableVertexAttribArray(posLoc);
+    gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0);
+
+    this._resizeObserver = new ResizeObserver(() => this._resize());
+    this._resizeObserver.observe(this.canvas);
+
+    this._intersectionObserver = new IntersectionObserver(entries => {
+      if (entries[0].isIntersecting) {
+        this.start();
+      } else {
+        this.stop();
+      }
+    }, { threshold: 0.1 });
+    this._intersectionObserver.observe(this.canvas);
+
+    this._resize();
+    this.start();
+  }
+
+  _resize() {
+    const gl = this.gl;
+    if (!gl || !this.canvas) return;
+    const dpr  = 0.5;  // half-res: GPU renders fewer pixels, CSS scales up
+    const rect = this.canvas.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) return;
+    this.canvas.width  = Math.round(rect.width  * dpr);
+    this.canvas.height = Math.round(rect.height * dpr);
+    gl.viewport(0, 0, this.canvas.width, this.canvas.height);
+  }
+
+  _render(ts) {
+    if (!this._isRunning) return;
+
+    // Throttle to ~30fps to keep GPU load manageable
+    if (this._lastTs !== null && ts - this._lastTs < 33) {
+      this._rafId = requestAnimationFrame(ts => this._render(ts));
+      return;
+    }
+
+    if (this._lastTs !== null) {
+      this._elapsed += (ts - this._lastTs) / 1000.0;
+    }
+    this._lastTs = ts;
+
+    const gl = this.gl;
+    gl.useProgram(this.program);
+    gl.uniform2f(this.uniforms.resolution, this.canvas.width, this.canvas.height);
+    gl.uniform1f(this.uniforms.time,         this._elapsed * this.options.speed);
+    gl.uniform1f(this.uniforms.intensity,    this.options.intensity);
+    gl.uniform1f(this.uniforms.rotationRate, this.options.rotationRate);
+    gl.uniform1f(this.uniforms.hue,          this.options.hue !== null ? this.options.hue : -1.0);
+
+    gl.drawArrays(gl.TRIANGLES, 0, 3);
+
+    this._rafId = requestAnimationFrame(ts => this._render(ts));
+  }
+
+  start() {
+    if (this._isRunning || !this.gl) return;
+    this._isRunning = true;
+    this._lastTs = null;
+    this._rafId = requestAnimationFrame(ts => this._render(ts));
+  }
+
+  stop() {
+    this._isRunning = false;
+    this._lastTs = null;
+    if (this._rafId) {
+      cancelAnimationFrame(this._rafId);
+      this._rafId = null;
+    }
+  }
+
+  destroy() {
+    this.stop();
+    const gl = this.gl;
+    if (gl) {
+      if (this.program) gl.deleteProgram(this.program);
+      if (this.buffer)  gl.deleteBuffer(this.buffer);
+    }
+    if (this._resizeObserver)       { this._resizeObserver.disconnect();       this._resizeObserver = null; }
+    if (this._intersectionObserver) { this._intersectionObserver.disconnect(); this._intersectionObserver = null; }
+    this.gl     = null;
+    this.canvas = null;
+  }
+}
+
+// Export for manual use / build pipelines
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = { CorruptedVortex };
+}