asciify-engine 1.0.1 → 1.0.3

package/dist/index.cjs

@@ -11,7 +11,9 @@ var CHARSETS = {
   binary: "01",
   dots: " \u2801\u2803\u2807\u2847\u28C7\u28E7\u28F7\u28FF",
   letters: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",
-  claudeCode: " \u2554\u2557\u255A\u255D\u2551\u2550\u2560\u2563\u2566\u2569\u256C\u2591\u2592\u2593\u2588\u2502\u2500\u250C\u2510\u2514\u2518\u251C\u2524\u252C\u2534\u253C"
+  claudeCode: " \u2554\u2557\u255A\u255D\u2551\u2550\u2560\u2563\u2566\u2569\u256C\u2591\u2592\u2593\u2588\u2502\u2500\u250C\u2510\u2514\u2518\u251C\u2524\u252C\u2534\u253C",
+  box: " \u25AA\u25FE\u25FC\u25A0\u2588",
+  lines: " \u02D7\u2010\u2013\u2014\u2015\u2501"
 };
 var ART_STYLE_PRESETS = {
   classic: {
@@ -44,6 +46,16 @@ var ART_STYLE_PRESETS = {
     renderMode: "ascii",
     charset: CHARSETS.standard,
     colorMode: "matrix"
+  },
+  box: {
+    renderMode: "ascii",
+    charset: CHARSETS.box,
+    colorMode: "grayscale"
+  },
+  lines: {
+    renderMode: "ascii",
+    charset: CHARSETS.lines,
+    colorMode: "fullcolor"
   }
 };
 var DEFAULT_OPTIONS = {
@@ -61,43 +73,44 @@ var DEFAULT_OPTIONS = {
   dotSizeRatio: 0.8,
   ditherStrength: 0,
   hoverStrength: 0,
-  hoverRadius: 0.5,
+  hoverRadius: 0.2,
   hoverEffect: "spotlight",
   hoverColor: "#ffffff",
-  artStyle: "classic"
+  artStyle: "classic",
+  customText: ""
 };
 var HOVER_PRESETS = {
   none: {
     label: "Off",
-    options: { hoverStrength: 0, hoverEffect: "spotlight", hoverRadius: 0.5, hoverColor: "#ffffff" }
+    options: { hoverStrength: 0, hoverEffect: "spotlight", hoverRadius: 0.2, hoverColor: "#ffffff" }
   },
   subtle: {
     label: "Subtle",
-    options: { hoverStrength: 0.8, hoverEffect: "glow", hoverRadius: 0.4, hoverColor: "#ffffff" }
+    options: { hoverStrength: 0.25, hoverEffect: "glow", hoverRadius: 0.12, hoverColor: "#ffffff" }
   },
   flashlight: {
     label: "Flashlight",
-    options: { hoverStrength: 2.5, hoverEffect: "spotlight", hoverRadius: 0.6, hoverColor: "#fffbe6" }
+    options: { hoverStrength: 0.6, hoverEffect: "spotlight", hoverRadius: 0.15, hoverColor: "#fffbe6" }
   },
   magnifier: {
     label: "Magnifier",
-    options: { hoverStrength: 3, hoverEffect: "magnify", hoverRadius: 0.35, hoverColor: "#ffffff" }
+    options: { hoverStrength: 0.7, hoverEffect: "magnify", hoverRadius: 0.12, hoverColor: "#ffffff" }
   },
   forceField: {
     label: "Force Field",
-    options: { hoverStrength: 3.5, hoverEffect: "repel", hoverRadius: 0.5, hoverColor: "#a0e8ff" }
+    options: { hoverStrength: 0.7, hoverEffect: "repel", hoverRadius: 0.15, hoverColor: "#a0e8ff" }
   },
   neon: {
     label: "Neon",
-    options: { hoverStrength: 2.5, hoverEffect: "colorShift", hoverRadius: 0.55, hoverColor: "#d946ef" }
+    options: { hoverStrength: 0.6, hoverEffect: "colorShift", hoverRadius: 0.15, hoverColor: "#d946ef" }
   },
   fire: {
     label: "Fire",
-    options: { hoverStrength: 3, hoverEffect: "spotlight", hoverRadius: 0.5, hoverColor: "#ff6b2b" }
+    options: { hoverStrength: 0.7, hoverEffect: "spotlight", hoverRadius: 0.15, hoverColor: "#ff6b2b" }
   },
   ice: {
     label: "Ice",
-    options: { hoverStrength: 2, hoverEffect: "glow", hoverRadius: 0.65, hoverColor: "#60d5f7" }
+    options: { hoverStrength: 0.5, hoverEffect: "glow", hoverRadius: 0.15, hoverColor: "#60d5f7" }
   }
 };
 function createOffscreenCanvas(width, height) {
@@ -118,6 +131,12 @@ function luminanceToChar(lum, charset, invert) {
   const index = Math.floor(normalized * (charset.length - 1));
   return charset[Math.max(0, Math.min(charset.length - 1, index))];
 }
+function customTextToChar(lum, text, x, y, cols, invert) {
+  const normalized = invert ? 1 - lum / 255 : lum / 255;
+  if (normalized < 0.12) return " ";
+  const pos = y * cols + x;
+  return text[pos % text.length];
+}
 var BAYER_4X4 = [
   [0, 8, 2, 10],
   [12, 4, 14, 6],
@@ -293,7 +312,7 @@ function imageToAsciiFrame(source, options, targetWidth, targetHeight) {
       const lum = 0.299 * r + 0.587 * g + 0.114 * b;
       const adjustedLum = adjustLuminance(lum, options.brightness, options.contrast);
       const ditheredLum = applyDither(adjustedLum, x, y, options.ditherStrength);
-      const char = luminanceToChar(ditheredLum, options.charset, options.invert);
+      const char = options.customText ? customTextToChar(ditheredLum, options.customText, x, y, cols, options.invert) : luminanceToChar(ditheredLum, options.charset, options.invert);
       row.push({ char, r, g, b, a });
     }
     frame.push(row);
@@ -472,8 +491,11 @@ function renderFrameToCanvas(ctx, frame, options, canvasWidth, canvasHeight, tim
   }
   const cellW = canvasWidth / cols;
   const cellH = canvasHeight / rows;
+  const totalCells = rows * cols;
   const hoverIntensity = hoverPos?.intensity ?? 1;
-  const hoverActive = !!(hoverPos && options.hoverStrength > 0 && hoverIntensity > 5e-3);
+  const animationActive = options.animationStyle !== "none";
+  const suppressHover = animationActive && totalCells > 5e3;
+  const hoverActive = !suppressHover && !!(hoverPos && options.hoverStrength > 0 && hoverIntensity > 5e-3);
   const hc = options.hoverColor || "#ffffff";
   const hcR = parseInt(hc.slice(1, 3), 16) || 255;
   const hcG = parseInt(hc.slice(3, 5), 16) || 255;
@@ -482,12 +504,14 @@ function renderFrameToCanvas(ctx, frame, options, canvasWidth, canvasHeight, tim
   const acR = parseInt(acHex.substring(0, 2), 16) || 255;
   const acG = parseInt(acHex.substring(2, 4), 16) || 255;
   const acB = parseInt(acHex.substring(4, 6), 16) || 255;
+  const radiusScale = totalCells > 3e4 ? 0.25 : totalCells > 15e3 ? 0.4 : totalCells > 5e3 ? 0.6 : 1;
+  const effectiveHoverRadius = options.hoverRadius * radiusScale;
   let hoverMinCol = 0, hoverMaxCol = cols, hoverMinRow = 0, hoverMaxRow = rows;
   let hoverPosX = 0, hoverPosY = 0;
   if (hoverActive && hoverPos) {
     hoverPosX = hoverPos.x;
     hoverPosY = hoverPos.y;
-    const hoverNormRadius = 0.08 + options.hoverRadius * 0.35 + options.hoverStrength * 0.04;
+    const hoverNormRadius = 0.08 + effectiveHoverRadius * 0.35 + options.hoverStrength * 0.04;
     hoverMinCol = Math.max(0, Math.floor((hoverPosX - hoverNormRadius) * cols) - 1);
     hoverMaxCol = Math.min(cols, Math.ceil((hoverPosX + hoverNormRadius) * cols) + 1);
     hoverMinRow = Math.max(0, Math.floor((hoverPosY - hoverNormRadius) * rows) - 1);
@@ -498,7 +522,7 @@ function renderFrameToCanvas(ctx, frame, options, canvasWidth, canvasHeight, tim
   const noAnimation = animStyle === "none";
   const hoverStrength = options.hoverStrength;
   const hoverEffect = options.hoverEffect;
-  const hoverRadiusFactor = options.hoverRadius;
+  const hoverRadiusFactor = effectiveHoverRadius;
   const isInverted = options.invert;
   const colorMode = options.colorMode;
   const TWO_PI = Math.PI * 2;
@@ -564,7 +588,7 @@ function renderFrameToCanvas(ctx, frame, options, canvasWidth, canvasHeight, tim
           ctx.fillStyle = color;
           lastFillStyle = color;
         }
-        if (radius <= 1.5) {
+        if (radius <= 3) {
           const d = radius * 2;
           ctx.fillRect(px - radius, py - radius, d, d);
         } else {
@@ -577,10 +601,22 @@ function renderFrameToCanvas(ctx, frame, options, canvasWidth, canvasHeight, tim
   } else {
     const charAspect = 0.55;
     const fontSize = Math.min(cellW / charAspect, cellH) * 0.9;
-    ctx.font = `${fontSize}px "JetBrains Mono", monospace`;
-    ctx.textAlign = "center";
-    ctx.textBaseline = "middle";
-    const baseTransform = ctx.getTransform();
+    const useFastRect = fontSize < 6;
+    if (!useFastRect) {
+      ctx.font = `${fontSize}px "JetBrains Mono", monospace`;
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+    }
+    let charWeights = null;
+    if (useFastRect) {
+      charWeights = {};
+      const cs = options.charset;
+      const csLen = cs.length;
+      for (let i = 0; i < csLen; i++) {
+        charWeights[cs[i]] = Math.max(0.1, (i + 0.3) / csLen);
+      }
+    }
+    const baseTransform = !useFastRect ? ctx.getTransform() : null;
     for (let y = 0; y < rows; y++) {
       const rowData = frame[y];
       for (let x = 0; x < cols; x++) {
@@ -614,11 +650,6 @@ function renderFrameToCanvas(ctx, frame, options, canvasWidth, canvasHeight, tim
         }
         const px = x * cellW + cellW * 0.5 + hoverOffX;
         const py = y * cellH + cellH * 0.5 + hoverOffY;
-        const alpha = Math.min(1, cell.a * 0.00392156863 * animMul * (1 + hoverGlow));
-        if (alpha !== lastAlpha) {
-          ctx.globalAlpha = alpha;
-          lastAlpha = alpha;
-        }
         let color;
         if (hoverBlend > 0) {
           const rgb = getCellColorRGB(cell, colorMode, acR, acG, acB);
@@ -629,17 +660,39 @@ function renderFrameToCanvas(ctx, frame, options, canvasWidth, canvasHeight, tim
         } else {
           color = getCellColorStr(cell, colorMode, acR, acG, acB);
         }
-        if (color !== lastFillStyle) {
-          ctx.fillStyle = color;
-          lastFillStyle = color;
-        }
-        if (hoverScale !== 1) {
-          ctx.translate(px, py);
-          ctx.scale(hoverScale, hoverScale);
-          ctx.fillText(cell.char, 0, 0);
-          ctx.setTransform(baseTransform);
+        if (useFastRect) {
+          const weight = charWeights[cell.char] ?? 0.5;
+          const effAlpha = Math.min(1, cell.a * 0.00392156863 * animMul * (1 + hoverGlow)) * weight;
+          if (effAlpha < 0.02) continue;
+          if (effAlpha !== lastAlpha) {
+            ctx.globalAlpha = effAlpha;
+            lastAlpha = effAlpha;
+          }
+          if (color !== lastFillStyle) {
+            ctx.fillStyle = color;
+            lastFillStyle = color;
+          }
+          const rw = cellW * hoverScale;
+          const rh = cellH * hoverScale;
+          ctx.fillRect(px - rw * 0.5, py - rh * 0.5, rw, rh);
         } else {
-          ctx.fillText(cell.char, px, py);
+          const alpha = Math.min(1, cell.a * 0.00392156863 * animMul * (1 + hoverGlow));
+          if (alpha !== lastAlpha) {
+            ctx.globalAlpha = alpha;
+            lastAlpha = alpha;
+          }
+          if (color !== lastFillStyle) {
+            ctx.fillStyle = color;
+            lastFillStyle = color;
+          }
+          if (hoverScale !== 1) {
+            ctx.translate(px, py);
+            ctx.scale(hoverScale, hoverScale);
+            ctx.fillText(cell.char, 0, 0);
+            ctx.setTransform(baseTransform);
+          } else {
+            ctx.fillText(cell.char, px, py);
+          }
         }
       }
     }
@@ -678,6 +731,33 @@ function buildColorFnJS(options) {
       return `function(c){var g=Math.floor(.299*c.r+.587*c.g+.114*c.b);return 'rgb('+g+','+g+','+g+')'}`;
   }
 }
+async function asciify(source, canvas, { fontSize = 10, style = "classic", options = {} } = {}) {
+  let el;
+  if (typeof source === "string") {
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    await new Promise((resolve, reject) => {
+      img.onload = () => resolve();
+      img.onerror = () => reject(new Error(`Failed to load image: ${source}`));
+      img.src = source;
+    });
+    el = img;
+  } else if (source instanceof HTMLImageElement && !source.complete) {
+    await new Promise((resolve, reject) => {
+      source.onload = () => resolve();
+      source.onerror = () => reject(new Error("Image failed to load"));
+    });
+    el = source;
+  } else {
+    el = source;
+  }
+  const preset = ART_STYLE_PRESETS[style];
+  const merged = { ...DEFAULT_OPTIONS, ...preset, ...options, fontSize };
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("Could not get 2d context from canvas");
+  const { frame } = imageToAsciiFrame(el, merged, canvas.width, canvas.height);
+  renderFrameToCanvas(ctx, frame, merged, canvas.width, canvas.height);
+}
 function generateEmbedCode(frame, options, width, height) {
   const rows = frame.length;
   if (rows === 0) return "";
@@ -862,15 +942,465 @@ function generateAnimatedEmbedCode(frames, options, fps, width, height) {
 <!-- /Asciify Animated Embed -->`;
 }
 
+// src/webgl-engine.ts
+var VERT_SRC = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+precision highp int;
+
+// Unit quad corners: (-0.5,-0.5) to (0.5,0.5) - TRIANGLE_STRIP, 4 verts
+in vec2 a_corner;
+
+// Layout
+uniform vec2  u_canvasSize;
+uniform vec2  u_gridSize;
+uniform vec2  u_cellSize;
+
+// Animation
+uniform float u_time;
+uniform float u_animSpeed;
+uniform int   u_animStyle;
+
+// Color
+uniform int   u_colorMode;
+uniform vec3  u_accentColor;
+uniform int   u_invert;
+
+// Hover
+uniform float u_hoverStrength;
+uniform float u_hoverIntensity;
+uniform vec2  u_hoverPos;
+uniform float u_hoverRadius;
+uniform int   u_hoverEffect;
+uniform vec3  u_hoverColor;
+
+// Render mode: 0=rect  1=dots
+uniform int   u_renderMode;
+uniform float u_dotSizeRatio;
+
+// Cell data: RGBA8 texture (cols x rows)
+//   rgb = cell colour,  a = source alpha
+uniform sampler2D u_cellTex;
+
+out vec4  v_color;
+out float v_alpha;
+out vec2  v_localUv;
+
+#define PI 3.141592653589793
+
+float ss(float t) { return t * t * (3.0 - 2.0 * t); }
+
+float getAnim(float nx, float ny, float cx, float cy, float t) {
+  if (u_animStyle == 0) return 1.0;
+  if (u_animStyle == 1) { // wave
+    return 0.3 + 0.7 * (sin(nx * PI * 4.0 + t * 3.0) * 0.3 + 0.5
+                       + sin(ny * PI * 3.0 + t * 2.0) * 0.2);
+  }
+  if (u_animStyle == 2) { // pulse
+    float d = length(vec2(nx - 0.5, ny - 0.5)) * 1.41421;
+    return 0.2 + 0.8 * (sin(d * PI * 6.0 - t * 4.0) * 0.5 + 0.5);
+  }
+  if (u_animStyle == 3) { // rain
+    float drop = sin(ny * PI * 8.0 - t * 5.0 + cx * 0.3) * 0.5 + 0.5;
+    return 0.1 + 0.9 * drop * (sin(nx * PI * 2.0 + t) * 0.3 + 0.7);
+  }
+  if (u_animStyle == 4) { // breathe
+    return clamp(sin(t * 2.0) * 0.3 + 0.7 + sin((cx + cy) * 0.1 + t) * 0.1, 0.1, 1.0);
+  }
+  if (u_animStyle == 5) { // sparkle
+    float sp = fract(sin(cx * 127.1 + cy * 311.7 + floor(t * 8.0) * 43758.5453) * 43758.5453);
+    return sp > 0.7 ? 1.0 : 0.15 + sp * 0.4;
+  }
+  if (u_animStyle == 6) { // glitch
+    float band = floor(cy / max(1.0, u_gridSize.y * 0.05));
+    float gv   = fract(sin(band * 43.23 + floor(t * 6.0) * 17.89) * 43758.5453);
+    if (gv > 0.85) { float fl = sin(t * 30.0 + band) * 0.5 + 0.5; return fl < 0.3 ? 0.0 : fl; }
+    return 1.0;
+  }
+  if (u_animStyle == 7) { // spiral
+    float angle = atan(ny - 0.5, nx - 0.5);
+    float dist  = length(vec2(nx - 0.5, ny - 0.5)) * 1.41421;
+    return 0.15 + 0.85 * (sin(angle * 3.0 + dist * PI * 8.0 - t * 3.0) * 0.5 + 0.5);
+  }
+  if (u_animStyle == 8) { // typewriter
+    float reveal = fract(t * 0.5) * u_gridSize.x * u_gridSize.y * 1.3;
+    float dist   = cy * u_gridSize.x + cx - reveal;
+    if (dist > 0.0) return 0.0;
+    return clamp(1.0 + dist / (u_gridSize.x * u_gridSize.y * 0.15), 0.0, 1.0);
+  }
+  if (u_animStyle == 9) { // scatter
+    float d     = length(vec2(nx - 0.5, ny - 0.5)) * 1.41421;
+    float phase = sin(t * 1.5) * 0.5 + 0.5;
+    if (d > phase) return max(0.0, 1.0 - (d - phase) * 3.0);
+    return 0.7 + 0.3 * sin(d * 10.0 - t * 2.0);
+  }
+  return 1.0;
+}
+
+vec3 applyColorMode(vec3 rgb) {
+  float lum = dot(rgb, vec3(0.299, 0.587, 0.114));
+  if (u_colorMode == 0) return vec3(lum);
+  if (u_colorMode == 2) return vec3(0.0, lum, 0.0);
+  if (u_colorMode == 3) return lum * u_accentColor;
+  return rgb;
+}
+
+void main() {
+  int cols = int(u_gridSize.x);
+  int rows = int(u_gridSize.y);
+  int cx   = gl_InstanceID % cols;
+  int cy   = gl_InstanceID / cols;
+
+  float fnx = (float(cx) + 0.5) / float(cols);
+  float fny = (float(cy) + 0.5) / float(rows);
+
+  // Sample cell data
+  vec4 cell = texture(u_cellTex, vec2(fnx, fny));
+  // cell.rgb = colour,  cell.a = source alpha (0=transparent, 1=opaque)
+
+  // Invisible cells (fully transparent source pixel)
+  if (cell.a < 0.004) {
+    gl_Position = vec4(2.0, 2.0, 0.0, 1.0); v_alpha = 0.0; return;
+  }
+
+  // Char weight: 0=dark/space .. 1=dense/bright (luminance, matches luminanceToChar ordering)
+  float charW = dot(cell.rgb, vec3(0.299, 0.587, 0.114));
+
+  float cellW = u_cellSize.x;
+  float cellH = u_cellSize.y;
+
+  // Animation
+  float t  = u_time * u_animSpeed;
+  float am = getAnim(fnx, fny, float(cx), float(cy), t);
+  if (am < 0.04) {
+    gl_Position = vec4(2.0, 2.0, 0.0, 1.0); v_alpha = 0.0; return;
+  }
+
+  // Hover
+  float hoverScale = 1.0;
+  vec2  hoverOff   = vec2(0.0);
+  float hoverGlow  = 0.0;
+  float hoverBlend = 0.0;
+
+  if (u_hoverStrength > 0.0 && u_hoverIntensity > 0.005) {
+    vec2  d    = vec2(fnx - u_hoverPos.x, fny - u_hoverPos.y);
+    float r    = 0.08 + u_hoverRadius * 0.35 + u_hoverStrength * 0.04;
+    float dist = length(d);
+    if (dist < r) {
+      float tv = 1.0 - dist / r;
+      float e  = ss(tv) * u_hoverIntensity;
+      if (u_hoverEffect == 0) {                         // spotlight
+        hoverScale = 1.0 + e * u_hoverStrength * 1.8;
+        float ang  = atan(d.y, d.x);
+        hoverOff   = vec2(cos(ang), sin(ang)) * e * e * u_hoverStrength * 0.6 * vec2(cellW, cellH);
+        hoverGlow  = e * u_hoverStrength * 0.4;
+        hoverBlend = e * e * u_hoverStrength * 0.25;
+      } else if (u_hoverEffect == 1) {                  // magnify
+        hoverScale = 1.0 + e * u_hoverStrength * 2.5;
+        hoverGlow  = e * u_hoverStrength * 0.15;
+      } else if (u_hoverEffect == 2) {                  // repel
+        hoverScale = 1.0 + e * u_hoverStrength * 0.3;
+        float ang  = atan(d.y, d.x);
+        hoverOff   = vec2(cos(ang), sin(ang)) * e * e * u_hoverStrength * 1.2 * vec2(cellW, cellH);
+      } else if (u_hoverEffect == 3) {                  // glow
+        hoverGlow  = e * u_hoverStrength * 0.8;
+        hoverBlend = e * u_hoverStrength * 0.4;
+      } else {                                          // colorShift
+        hoverScale = 1.0 + e * u_hoverStrength * 0.4;
+        hoverGlow  = e * u_hoverStrength * 0.2;
+        hoverBlend = e * u_hoverStrength * 0.7;
+      }
+    }
+  }
+
+  // Final colour
+  vec3 rgb = (u_invert == 1) ? (1.0 - cell.rgb) : cell.rgb;
+  vec3 baseColor  = applyColorMode(rgb);
+  v_color = vec4(mix(baseColor, u_hoverColor, hoverBlend), 1.0);
+
+  // Quad size & alpha
+  vec2  quadSize;
+  float finalAlpha;
+
+  if (u_renderMode == 1) { // dots: radius driven by char weight (bright=big dot)
+    float maxR   = min(cellW, cellH) * 0.5 * u_dotSizeRatio;
+    float radius = maxR * charW * am * hoverScale;
+    if (radius < 0.3) { gl_Position = vec4(2.0, 2.0, 0.0, 1.0); v_alpha = 0.0; return; }
+    quadSize   = vec2(radius * 2.0);
+    finalAlpha = min(1.0, cell.a * am * (1.0 + hoverGlow));
+  } else { // rect: size proportional to luminance \u2014 dark=tiny, bright=full (ASCII density look)
+    if (charW < 0.01) { gl_Position = vec4(2.0, 2.0, 0.0, 1.0); v_alpha = 0.0; return; }
+    quadSize   = vec2(cellW * charW * hoverScale, cellH * charW * hoverScale);
+    finalAlpha = min(1.0, am * (1.0 + hoverGlow));
+  }
+
+  v_alpha   = finalAlpha;
+  v_localUv = a_corner;
+
+  // NDC position (Y flipped: WebGL bottom-up, canvas top-down)
+  float px    = float(cx) * cellW + cellW * 0.5 + hoverOff.x;
+  float py    = float(cy) * cellH + cellH * 0.5 + hoverOff.y;
+  vec2  pos   = vec2(px, py) + a_corner * quadSize;
+  vec2  ndc   = pos / u_canvasSize * 2.0 - 1.0;
+  ndc.y       = -ndc.y;
+  gl_Position = vec4(ndc, 0.0, 1.0);
+}
+`
+);
+var FRAG_SRC = (
+  /* glsl */
+  `#version 300 es
+precision mediump float;
+precision highp int;
+
+in vec4  v_color;
+in float v_alpha;
+in vec2  v_localUv;
+
+uniform int u_renderMode;
+
+out vec4 outColor;
+
+void main() {
+  if (v_alpha < 0.01) discard;
+  if (u_renderMode == 1) {
+    // Dots: circle SDF clip
+    if (length(v_localUv) > 0.5) discard;
+  }
+  outColor = vec4(v_color.rgb, v_alpha);
+}
+`
+);
+function compileShader(gl, type, src) {
+  const sh = gl.createShader(type);
+  gl.shaderSource(sh, src);
+  gl.compileShader(sh);
+  if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) {
+    const info = gl.getShaderInfoLog(sh) ?? "unknown";
+    gl.deleteShader(sh);
+    throw new Error(`Shader compile error: ${info}`);
+  }
+  return sh;
+}
+function linkProgram(gl, vert, frag) {
+  const prog = gl.createProgram();
+  gl.attachShader(prog, vert);
+  gl.attachShader(prog, frag);
+  gl.linkProgram(prog);
+  if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
+    const info = gl.getProgramInfoLog(prog) ?? "unknown";
+    gl.deleteProgram(prog);
+    throw new Error(`Program link error: ${info}`);
+  }
+  return prog;
+}
+function makeTexture(gl, filter = gl.NEAREST) {
+  const t = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, t);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);
+  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);
+  return t;
+}
+var ANIM_STYLES = ["none", "wave", "pulse", "rain", "breathe", "sparkle", "glitch", "spiral", "typewriter", "scatter"];
+var HOVER_EFFECTS = ["spotlight", "magnify", "repel", "glow", "colorShift"];
+var COLOR_MODES = ["grayscale", "fullcolor", "matrix", "accent"];
+function tryCreateWebGLRenderer(canvas) {
+  const glOrNull = canvas.getContext("webgl2", {
+    alpha: true,
+    antialias: false,
+    premultipliedAlpha: false,
+    preserveDrawingBuffer: false
+  });
+  if (!glOrNull) return null;
+  const gl = glOrNull;
+  try {
+    let render2 = function(frame, options, displayW, displayH, time, hoverPos) {
+      const rows = frame.length;
+      if (rows === 0) return;
+      const cols = frame[0].length;
+      if (cols === 0) return;
+      gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+      let hasTransparency = false;
+      const sy = Math.max(1, rows >> 2), sx = Math.max(1, cols >> 2);
+      outer: for (let iy = 0; iy < rows; iy += sy)
+        for (let ix = 0; ix < cols; ix += sx)
+          if (frame[iy][ix].a < 200) {
+            hasTransparency = true;
+            break outer;
+          }
+      gl.clearColor(
+        hasTransparency ? 0 : 0.0392,
+        hasTransparency ? 0 : 0.0392,
+        hasTransparency ? 0 : 0.0392,
+        hasTransparency ? 0 : 1
+      );
+      gl.clear(gl.COLOR_BUFFER_BIT);
+      if (cols !== lastCols || rows !== lastRows) {
+        cellBuf = new Uint8Array(cols * rows * 4);
+        lastCols = cols;
+        lastRows = rows;
+        cellDataDirty = true;
+      }
+      if (cellDataDirty) {
+        for (let y = 0; y < rows; y++) {
+          const row = frame[y];
+          for (let x = 0; x < cols; x++) {
+            const cell = row[x];
+            const i = (y * cols + x) * 4;
+            cellBuf[i] = cell.r;
+            cellBuf[i + 1] = cell.g;
+            cellBuf[i + 2] = cell.b;
+            cellBuf[i + 3] = cell.a;
+          }
+        }
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, cellTex);
+        gl.texImage2D(
+          gl.TEXTURE_2D,
+          0,
+          gl.RGBA,
+          cols,
+          rows,
+          0,
+          gl.RGBA,
+          gl.UNSIGNED_BYTE,
+          cellBuf
+        );
+        cellDataDirty = false;
+      }
+      gl.activeTexture(gl.TEXTURE0);
+      gl.bindTexture(gl.TEXTURE_2D, cellTex);
+      gl.useProgram(prog);
+      gl.bindVertexArray(vao);
+      const cellW = displayW / cols;
+      const cellH = displayH / rows;
+      gl.uniform2f(u.canvasSize, displayW, displayH);
+      gl.uniform2f(u.gridSize, cols, rows);
+      gl.uniform2f(u.cellSize, cellW, cellH);
+      gl.uniform1f(u.time, time);
+      gl.uniform1f(u.animSpeed, options.animationSpeed);
+      gl.uniform1i(u.animStyle, ANIM_STYLES.indexOf(options.animationStyle));
+      gl.uniform1i(u.colorMode, COLOR_MODES.indexOf(options.colorMode));
+      const acHex = (options.accentColor || "#ffffff").replace("#", "");
+      gl.uniform3f(
+        u.accentColor,
+        parseInt(acHex.slice(0, 2), 16) / 255,
+        parseInt(acHex.slice(2, 4), 16) / 255,
+        parseInt(acHex.slice(4, 6), 16) / 255
+      );
+      gl.uniform1i(u.invert, options.invert ? 1 : 0);
+      const totalCells = rows * cols;
+      const animActive = options.animationStyle !== "none";
+      const suppressHover = animActive && totalCells > 5e3;
+      const hoverActive = !suppressHover && !!hoverPos && options.hoverStrength > 0;
+      const radiusScale = totalCells > 3e4 ? 0.25 : totalCells > 15e3 ? 0.4 : totalCells > 5e3 ? 0.6 : 1;
+      gl.uniform1f(u.hoverStrength, hoverActive ? options.hoverStrength : 0);
+      gl.uniform1f(u.hoverIntensity, hoverActive ? hoverPos?.intensity ?? 0 : 0);
+      gl.uniform2f(u.hoverPos, hoverPos?.x ?? 0.5, hoverPos?.y ?? 0.5);
+      gl.uniform1f(u.hoverRadius, options.hoverRadius * radiusScale);
+      gl.uniform1i(u.hoverEffect, HOVER_EFFECTS.indexOf(options.hoverEffect));
+      const hc = options.hoverColor || "#ffffff";
+      gl.uniform3f(
+        u.hoverColor,
+        parseInt(hc.slice(1, 3), 16) / 255,
+        parseInt(hc.slice(3, 5), 16) / 255,
+        parseInt(hc.slice(5, 7), 16) / 255
+      );
+      gl.uniform1i(u.renderMode, options.renderMode === "dots" ? 1 : 0);
+      gl.uniform1f(u.dotSizeRatio, options.dotSizeRatio);
+      gl.uniform1i(u.cellTexU, 0);
+      gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, cols * rows);
+      gl.bindVertexArray(null);
+    };
+    var render = render2;
+    const vert = compileShader(gl, gl.VERTEX_SHADER, VERT_SRC);
+    const frag = compileShader(gl, gl.FRAGMENT_SHADER, FRAG_SRC);
+    const prog = linkProgram(gl, vert, frag);
+    gl.deleteShader(vert);
+    gl.deleteShader(frag);
+    const vao = gl.createVertexArray();
+    gl.bindVertexArray(vao);
+    const corners = new Float32Array([-0.5, -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5]);
+    const vbo = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
+    gl.bufferData(gl.ARRAY_BUFFER, corners, gl.STATIC_DRAW);
+    const aCorner = gl.getAttribLocation(prog, "a_corner");
+    gl.enableVertexAttribArray(aCorner);
+    gl.vertexAttribPointer(aCorner, 2, gl.FLOAT, false, 0, 0);
+    gl.bindVertexArray(null);
+    const cellTex = makeTexture(gl);
+    const g = (n) => gl.getUniformLocation(prog, n);
+    const u = {
+      canvasSize: g("u_canvasSize"),
+      gridSize: g("u_gridSize"),
+      cellSize: g("u_cellSize"),
+      time: g("u_time"),
+      animSpeed: g("u_animSpeed"),
+      animStyle: g("u_animStyle"),
+      colorMode: g("u_colorMode"),
+      accentColor: g("u_accentColor"),
+      invert: g("u_invert"),
+      hoverStrength: g("u_hoverStrength"),
+      hoverIntensity: g("u_hoverIntensity"),
+      hoverPos: g("u_hoverPos"),
+      hoverRadius: g("u_hoverRadius"),
+      hoverEffect: g("u_hoverEffect"),
+      hoverColor: g("u_hoverColor"),
+      renderMode: g("u_renderMode"),
+      dotSizeRatio: g("u_dotSizeRatio"),
+      cellTexU: g("u_cellTex")
+    };
+    let lastCols = 0;
+    let lastRows = 0;
+    let cellBuf = new Uint8Array(0);
+    let cellDataDirty = true;
+    gl.enable(gl.BLEND);
+    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+    return {
+      render: render2,
+      notifyDirty() {
+        cellDataDirty = true;
+      },
+      destroy() {
+        gl.deleteProgram(prog);
+        gl.deleteVertexArray(vao);
+        gl.deleteBuffer(vbo);
+        gl.deleteTexture(cellTex);
+      }
+    };
+  } catch (err) {
+    console.error("[asciify] WebGL renderer setup FAILED (returning stub):", err);
+    const stub = {
+      render() {
+        try {
+          gl.clearColor(0.039, 0.039, 0.039, 1);
+          gl.clear(gl.COLOR_BUFFER_BIT);
+        } catch {
+        }
+      },
+      notifyDirty() {
+      },
+      destroy() {
+      }
+    };
+    return stub;
+  }
+}
+
 exports.ART_STYLE_PRESETS = ART_STYLE_PRESETS;
 exports.CHARSETS = CHARSETS;
 exports.DEFAULT_OPTIONS = DEFAULT_OPTIONS;
 exports.HOVER_PRESETS = HOVER_PRESETS;
+exports.asciify = asciify;
 exports.generateAnimatedEmbedCode = generateAnimatedEmbedCode;
 exports.generateEmbedCode = generateEmbedCode;
 exports.gifToAsciiFrames = gifToAsciiFrames;
 exports.imageToAsciiFrame = imageToAsciiFrame;
 exports.renderFrameToCanvas = renderFrameToCanvas;
+exports.tryCreateWebGLRenderer = tryCreateWebGLRenderer;
 exports.videoToAsciiFrames = videoToAsciiFrames;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map