asciify-engine 1.0.16 → 1.0.18

package/dist/index.cjs

@@ -113,6 +113,8 @@ var HOVER_PRESETS = {
     options: { hoverStrength: 0.5, hoverEffect: "glow", hoverRadius: 0.15, hoverColor: "#60d5f7" }
   }
 };
+
+// src/core/utils.ts
 function createOffscreenCanvas(width, height) {
   const canvas = document.createElement("canvas");
   canvas.width = width;
@@ -143,29 +145,29 @@ var BAYER_4X4 = [
   [3, 11, 1, 9],
   [15, 7, 13, 5]
 ];
-var _GRAY_LUT = new Array(256);
-var _GREEN_LUT = new Array(256);
-for (let _i = 0; _i < 256; _i++) {
-  _GRAY_LUT[_i] = `rgb(${_i},${_i},${_i})`;
-  _GREEN_LUT[_i] = `rgb(0,${_i},0)`;
-}
 function applyDither(lum, x, y, strength) {
   if (strength <= 0) return lum;
   const threshold = (BAYER_4X4[y % 4][x % 4] / 16 - 0.5) * strength * 128;
   return Math.max(0, Math.min(255, lum + threshold));
 }
+var GRAY_LUT = new Array(256);
+var GREEN_LUT = new Array(256);
+for (let _i = 0; _i < 256; _i++) {
+  GRAY_LUT[_i] = `rgb(${_i},${_i},${_i})`;
+  GREEN_LUT[_i] = `rgb(0,${_i},0)`;
+}
 function getCellColorStr(cell, colorMode, acR, acG, acB) {
   switch (colorMode) {
     case "fullcolor":
       return `rgb(${cell.r},${cell.g},${cell.b})`;
     case "matrix":
-      return _GREEN_LUT[0.299 * cell.r + 0.587 * cell.g + 0.114 * cell.b | 0];
+      return GREEN_LUT[0.299 * cell.r + 0.587 * cell.g + 0.114 * cell.b | 0];
     case "accent": {
       const ab = (0.299 * cell.r + 0.587 * cell.g + 0.114 * cell.b) / 255;
       return `rgb(${acR * ab | 0},${acG * ab | 0},${acB * ab | 0})`;
     }
     default:
-      return _GRAY_LUT[0.299 * cell.r + 0.587 * cell.g + 0.114 * cell.b | 0];
+      return GRAY_LUT[0.299 * cell.r + 0.587 * cell.g + 0.114 * cell.b | 0];
   }
 }
 var _colorRGB = [0, 0, 0];
@@ -200,6 +202,11 @@ function getCellColorRGB(cell, colorMode, acR, acG, acB) {
   }
   return _colorRGB;
 }
+
+// src/core/animation.ts
+function smoothstep(t) {
+  return t * t * (3 - 2 * t);
+}
 function getAnimationMultiplier(x, y, cols, rows, time, style, speed) {
   if (style === "none") return 1;
   const t = time * speed;
@@ -219,8 +226,8 @@ function getAnimationMultiplier(x, y, cols, rows, time, style, speed) {
     }
     case "rain": {
       const drop = Math.sin(y / rows * Math.PI * 8 - t * 5 + x * 0.3) * 0.5 + 0.5;
-      const fade = Math.sin(x / cols * Math.PI * 2 + t) * 0.3 + 0.7;
-      return 0.1 + 0.9 * drop * fade;
+      const fade2 = Math.sin(x / cols * Math.PI * 2 + t) * 0.3 + 0.7;
+      return 0.1 + 0.9 * drop * fade2;
     }
     case "breathe": {
       const breathe = Math.sin(t * 2) * 0.3 + 0.7;
@@ -260,8 +267,8 @@ function getAnimationMultiplier(x, y, cols, rows, time, style, speed) {
       const revealPoint = progress * totalCells * 1.3;
       const dist = cellIndex - revealPoint;
       if (dist > 0) return 0;
-      const fade = Math.max(0, 1 + dist / (totalCells * 0.15));
-      return Math.min(1, fade);
+      const fade2 = Math.max(0, 1 + dist / (totalCells * 0.15));
+      return Math.min(1, fade2);
     }
     case "scatter": {
       const scx = cols / 2;
@@ -282,6 +289,200 @@ function getAnimationMultiplier(x, y, cols, rows, time, style, speed) {
       return 1;
   }
 }
+var _hoverResult = { scale: 1, offsetX: 0, offsetY: 0, glow: 0, colorBlend: 0, proximity: 0 };
+function computeHoverEffect(nx, ny, hoverX, hoverY, hoverIntensity, strength, cellW, cellH, effect = "spotlight", radiusFactor = 0.5) {
+  const dx = nx - hoverX;
+  const dy = ny - hoverY;
+  const distSq = dx * dx + dy * dy;
+  const radius = 0.08 + radiusFactor * 0.35 + strength * 0.04;
+  if (distSq >= radius * radius) {
+    _hoverResult.scale = 1;
+    _hoverResult.offsetX = 0;
+    _hoverResult.offsetY = 0;
+    _hoverResult.glow = 0;
+    _hoverResult.colorBlend = 0;
+    _hoverResult.proximity = 0;
+    return _hoverResult;
+  }
+  const dist = Math.sqrt(distSq);
+  const t = 1 - dist / radius;
+  const eased = smoothstep(t) * hoverIntensity;
+  let scale = 1;
+  let offsetX = 0;
+  let offsetY = 0;
+  let glow = 0;
+  let colorBlend = 0;
+  switch (effect) {
+    case "spotlight": {
+      scale = 1 + eased * strength * 1.8;
+      const angle = Math.atan2(dy, dx);
+      const pushForce = eased * eased * strength * 0.6;
+      offsetX = Math.cos(angle) * pushForce * cellW;
+      offsetY = Math.sin(angle) * pushForce * cellH;
+      glow = eased * strength * 0.4;
+      colorBlend = eased * eased * strength * 0.25;
+      break;
+    }
+    case "magnify":
+      scale = 1 + eased * strength * 2.5;
+      glow = eased * strength * 0.15;
+      break;
+    case "repel": {
+      scale = 1 + eased * strength * 0.3;
+      const angle2 = Math.atan2(dy, dx);
+      const push = eased * eased * strength * 1.2;
+      offsetX = Math.cos(angle2) * push * cellW;
+      offsetY = Math.sin(angle2) * push * cellH;
+      break;
+    }
+    case "glow":
+      glow = eased * strength * 0.8;
+      colorBlend = eased * strength * 0.4;
+      break;
+    case "colorShift":
+      scale = 1 + eased * strength * 0.4;
+      glow = eased * strength * 0.2;
+      colorBlend = eased * strength * 0.7;
+      break;
+  }
+  _hoverResult.scale = scale;
+  _hoverResult.offsetX = offsetX;
+  _hoverResult.offsetY = offsetY;
+  _hoverResult.glow = glow;
+  _hoverResult.colorBlend = colorBlend;
+  _hoverResult.proximity = eased;
+  return _hoverResult;
+}
+
+// src/backgrounds/_shared.ts
+function parseColor(c) {
+  const hex = c.match(/^#([0-9a-f]{3,8})$/i)?.[1];
+  if (hex) {
+    const h = hex.length <= 4 ? hex.split("").map((x) => parseInt(x + x, 16)) : [parseInt(hex.slice(0, 2), 16), parseInt(hex.slice(2, 4), 16), parseInt(hex.slice(4, 6), 16)];
+    return { r: h[0], g: h[1], b: h[2] };
+  }
+  const rgb = c.match(/rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)/i);
+  if (rgb) return { r: +rgb[1], g: +rgb[2], b: +rgb[3] };
+  return null;
+}
+function fade(t) {
+  return t * t * t * (t * (t * 6 - 15) + 10);
+}
+function lerp(a, b, t) {
+  return a + (b - a) * t;
+}
+function hash2(ix, iy) {
+  let n = ix * 127 + iy * 311;
+  n = n >> 13 ^ n;
+  return (n * (n * n * 15731 + 789221) + 1376312589 & 2147483647) / 1073741823 - 1;
+}
+function vnoise(x, y) {
+  const ix = Math.floor(x), iy = Math.floor(y);
+  const fx = x - ix, fy = y - iy;
+  const ux = fade(fx), uy = fade(fy);
+  const v00 = hash2(ix, iy);
+  const v10 = hash2(ix + 1, iy);
+  const v01 = hash2(ix, iy + 1);
+  const v11 = hash2(ix + 1, iy + 1);
+  return lerp(lerp(v00, v10, ux), lerp(v01, v11, ux), uy);
+}
+function fbm(x, y) {
+  return (vnoise(x, y) * 0.5 + vnoise(x * 2.1, y * 2.1) * 0.25 + vnoise(x * 4.3, y * 4.3) * 0.125) / 0.875;
+}
+
+// src/backgrounds/wave.ts
+function renderWaveBackground(ctx, width, height, time, mousePos = { x: 0.5, y: 0.5 }, options = {}) {
+  const {
+    fontSize = 13,
+    charAspect = 0.62,
+    lineHeightRatio = 1.4,
+    chars = " .:-=+*#%@",
+    baseColor = null,
+    accentColor = "#d4ff00",
+    accentThreshold = 0.52,
+    mouseInfluence = 0.55,
+    mouseFalloff = 2.8,
+    speed = 1,
+    vortex = true,
+    sparkles = true,
+    breathe = true,
+    lightMode = false
+  } = options;
+  const charW = fontSize * charAspect;
+  const lineH = fontSize * lineHeightRatio;
+  const cols = Math.ceil(width / charW);
+  const rows = Math.ceil(height / lineH);
+  const mx = mousePos.x;
+  const my = mousePos.y;
+  let acR = 212, acG = 255, acB = 0;
+  if (accentColor) {
+    const hex = accentColor.replace("#", "");
+    if (hex.length === 6) {
+      acR = parseInt(hex.slice(0, 2), 16);
+      acG = parseInt(hex.slice(2, 4), 16);
+      acB = parseInt(hex.slice(4, 6), 16);
+    }
+  }
+  ctx.clearRect(0, 0, width, height);
+  ctx.font = `${fontSize}px "JetBrains Mono", monospace`;
+  ctx.textBaseline = "top";
+  const t = time * speed;
+  const breatheAmp = breathe ? (Math.sin(t * 0.22) * 0.5 + 0.5) * 0.12 : 0;
+  for (let row = 0; row < rows; row++) {
+    for (let col = 0; col < cols; col++) {
+      const nx = col / cols;
+      const ny = row / rows;
+      const w1 = Math.sin(col * 0.08 + row * 0.05 + t * 0.6) * 0.5 + 0.5;
+      const w2 = Math.sin(col * 0.03 - row * 0.07 + t * 0.4) * 0.5 + 0.5;
+      const w3 = Math.sin(col * 0.05 + row * 0.03 + t * 0.8) * 0.5 + 0.5;
+      const sinePart = (w1 + w2 + w3) / 3;
+      const noiseScale = 0.045;
+      const noiseShift = t * 0.08;
+      const noisePart = fbm(col * noiseScale + noiseShift, row * noiseScale * 1.4 - noiseShift * 0.7) * 0.5 + 0.5;
+      const driftFreq = 0.06;
+      const driftPart = Math.sin((col + row * 0.65) * driftFreq + t * 1.1) * 0.5 + 0.5;
+      const wavePart = sinePart * 0.45 + noisePart * 0.35 + driftPart * 0.2 + breatheAmp;
+      const dxRaw = nx - mx;
+      const dyRaw = ny - my;
+      const distRaw = Math.sqrt(dxRaw * dxRaw + dyRaw * dyRaw);
+      let vortexBump = 0;
+      if (vortex && distRaw < 0.35) {
+        const angle = Math.atan2(dyRaw, dxRaw);
+        const swirl = Math.sin(angle * 4 + t * 2.2 - distRaw * 14);
+        const falloff = Math.max(0, 1 - distRaw / 0.35);
+        vortexBump = swirl * falloff * falloff * 0.22;
+      }
+      const proximity = Math.max(0, 1 - distRaw * mouseFalloff);
+      const intensity = wavePart * (1 - mouseInfluence) + (proximity + vortexBump * 0.5) * mouseInfluence + vortexBump * 0.15;
+      const clamped = Math.min(1, Math.max(0, intensity));
+      let finalIntensity = clamped;
+      if (sparkles && clamped > 0.72) {
+        const bucket = Math.floor(t * 8);
+        const sparkleSeed = hash2(col * 7 + bucket * 3, row * 11 + bucket);
+        if (sparkleSeed > 0.88) {
+          finalIntensity = Math.min(1, clamped + (sparkleSeed - 0.88) * 4);
+        }
+      }
+      const charIdx = Math.floor(finalIntensity * (chars.length - 1));
+      if (chars[charIdx] === " ") continue;
+      const alpha = 0.015 + finalIntensity * 0.07;
+      const isAccent = finalIntensity > accentThreshold;
+      if (isAccent) {
+        const accentAlpha = Math.min(lightMode ? 0.4 : 0.28, alpha * (lightMode ? 4 : 2.8));
+        ctx.fillStyle = `rgba(${acR},${acG},${acB},${accentAlpha})`;
+      } else if (baseColor) {
+        ctx.fillStyle = baseColor.replace("{a}", String(alpha));
+      } else if (lightMode) {
+        ctx.fillStyle = `rgba(0,0,0,${alpha * 1.3})`;
+      } else {
+        ctx.fillStyle = `rgba(255,255,255,${alpha})`;
+      }
+      ctx.fillText(chars[charIdx], col * charW, row * lineH);
+    }
+  }
+}
+
+// src/core/renderer.ts
 function imageToAsciiFrame(source, options, targetWidth, targetHeight) {
   const srcWidth = source instanceof HTMLVideoElement ? source.videoWidth : source.width;
   const srcHeight = source instanceof HTMLVideoElement ? source.videoHeight : source.height;
@@ -402,80 +603,10 @@ async function gifToAsciiFrames(buffer, options, targetWidth, targetHeight, onPr
   }
   return { frames, cols, rows, fps };
 }
-function smoothstep(t) {
-  return t * t * (3 - 2 * t);
-}
-var _hoverResult = { scale: 1, offsetX: 0, offsetY: 0, glow: 0, colorBlend: 0, proximity: 0 };
-function computeHoverEffect(nx, ny, hoverX, hoverY, hoverIntensity, strength, cellW, cellH, effect = "spotlight", radiusFactor = 0.5) {
-  const dx = nx - hoverX;
-  const dy = ny - hoverY;
-  const distSq = dx * dx + dy * dy;
-  const radius = 0.08 + radiusFactor * 0.35 + strength * 0.04;
-  if (distSq >= radius * radius) {
-    _hoverResult.scale = 1;
-    _hoverResult.offsetX = 0;
-    _hoverResult.offsetY = 0;
-    _hoverResult.glow = 0;
-    _hoverResult.colorBlend = 0;
-    _hoverResult.proximity = 0;
-    return _hoverResult;
-  }
-  const dist = Math.sqrt(distSq);
-  const t = 1 - dist / radius;
-  const eased = smoothstep(t) * hoverIntensity;
-  let scale = 1;
-  let offsetX = 0;
-  let offsetY = 0;
-  let glow = 0;
-  let colorBlend = 0;
-  switch (effect) {
-    case "spotlight": {
-      scale = 1 + eased * strength * 1.8;
-      const angle = Math.atan2(dy, dx);
-      const pushForce = eased * eased * strength * 0.6;
-      offsetX = Math.cos(angle) * pushForce * cellW;
-      offsetY = Math.sin(angle) * pushForce * cellH;
-      glow = eased * strength * 0.4;
-      colorBlend = eased * eased * strength * 0.25;
-      break;
-    }
-    case "magnify":
-      scale = 1 + eased * strength * 2.5;
-      glow = eased * strength * 0.15;
-      break;
-    case "repel": {
-      scale = 1 + eased * strength * 0.3;
-      const angle2 = Math.atan2(dy, dx);
-      const push = eased * eased * strength * 1.2;
-      offsetX = Math.cos(angle2) * push * cellW;
-      offsetY = Math.sin(angle2) * push * cellH;
-      break;
-    }
-    case "glow":
-      glow = eased * strength * 0.8;
-      colorBlend = eased * strength * 0.4;
-      break;
-    case "colorShift":
-      scale = 1 + eased * strength * 0.4;
-      glow = eased * strength * 0.2;
-      colorBlend = eased * strength * 0.7;
-      break;
-  }
-  _hoverResult.scale = scale;
-  _hoverResult.offsetX = offsetX;
-  _hoverResult.offsetY = offsetY;
-  _hoverResult.glow = glow;
-  _hoverResult.colorBlend = colorBlend;
-  _hoverResult.proximity = eased;
-  return _hoverResult;
-}
 function renderFrameToCanvas(ctx, frame, options, canvasWidth, canvasHeight, time = 0, hoverPos) {
   if (options.animationStyle === "waveField") {
     const mouseNorm = hoverPos ? { x: hoverPos.x, y: hoverPos.y } : { x: 0.5, y: 0.5 };
     const acHexWF = (options.accentColor || "#d4ff00").replace("#", "");
-    parseInt(acHexWF.substring(0, 2), 16) || 212;
-    parseInt(acHexWF.substring(2, 4), 16) || 255;
-    parseInt(acHexWF.substring(4, 6), 16) || 0;
     renderWaveBackground(ctx, canvasWidth, canvasHeight, time, mouseNorm, {
       accentColor: `#${acHexWF}`,
       accentThreshold: 0.52,
@@ -719,6 +850,9 @@ function renderFrameToCanvas(ctx, frame, options, canvasWidth, canvasHeight, tim
   }
   ctx.globalAlpha = 1;
 }
+
+// src/core/embed-gen.ts
+var EMBED_CDN_VERSION = "1.0.17";
 function serializeFrame(frame, fullColor) {
   const rows = frame.length;
   const cols = rows > 0 ? frame[0].length : 0;
@@ -742,9 +876,63 @@ function serializeFrame(frame, fullColor) {
   for (let j = 0; j < buf.length; j++) binary += String.fromCharCode(buf[j]);
   return btoa(binary);
 }
-async function asciify(source, canvas, { fontSize = 10, style = "classic", options = {} } = {}) {
-  let el;
-  if (typeof source === "string") {
+function buildEmbedOpts(options, rows, cols, width, height, fps, animated) {
+  const o = {
+    r: rows,
+    c: cols,
+    w: width,
+    h: height,
+    cs: options.charset,
+    cm: options.colorMode,
+    as: options.animationStyle,
+    sp: options.animationSpeed,
+    inv: options.invert,
+    hs: options.hoverStrength,
+    hr: options.hoverRadius,
+    he: options.hoverEffect,
+    hc: options.hoverColor,
+    dr: options.dotSizeRatio,
+    dots: options.renderMode === "dots"
+  };
+  if (options.colorMode === "accent") o.ac = options.accentColor;
+  if (fps !== void 0) o.fps = fps;
+  if (animated) o.anim = true;
+  return JSON.stringify(o);
+}
+var CDN_SCRIPT = `<script src="https://cdn.jsdelivr.net/npm/asciify-engine@${EMBED_CDN_VERSION}/dist/embed.js" async></script>`;
+function generateEmbedCode(frame, options, width, height) {
+  const rows = frame.length;
+  if (rows === 0) return "";
+  const cols = frame[0].length;
+  const isFullColor = options.colorMode === "fullcolor";
+  const data = serializeFrame(frame, isFullColor);
+  const id = `ar-${Math.random().toString(36).slice(2, 9)}`;
+  const opts = buildEmbedOpts(options, rows, cols, width, height);
+  return `<!-- Asciify Embed -->
+<canvas id="${id}" data-asciify-opts='${opts}' width="${width}" height="${height}"></canvas>
+<script type="application/json" id="${id}-d">"${data}"</script>
+${CDN_SCRIPT}
+<!-- /Asciify Embed -->`;
+}
+function generateAnimatedEmbedCode(frames, options, fps, width, height) {
+  if (frames.length === 0) return "";
+  const rows = frames[0].length;
+  const cols = frames[0][0].length;
+  const isFullColor = options.colorMode === "fullcolor";
+  const allData = frames.map((f) => serializeFrame(f, isFullColor));
+  const id = `ar-${Math.random().toString(36).slice(2, 9)}`;
+  const opts = buildEmbedOpts(options, rows, cols, width, height, fps, true);
+  return `<!-- Asciify Animated Embed -->
+<canvas id="${id}" data-asciify-opts='${opts}' width="${width}" height="${height}"></canvas>
+<script type="application/json" id="${id}-d">${JSON.stringify(allData)}</script>
+${CDN_SCRIPT}
+<!-- /Asciify Animated Embed -->`;
+}
+
+// src/core/simple-api.ts
+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) => {
@@ -832,173 +1020,8 @@ async function asciifyVideo(source, canvas, { fontSize = 10, style = "classic",
     cancelAnimationFrame(animId);
   };
 }
-var EMBED_CDN_VERSION = "1.0.16";
-function buildEmbedOpts(options, rows, cols, width, height, fps, animated) {
-  const o = {
-    r: rows,
-    c: cols,
-    w: width,
-    h: height,
-    cs: options.charset,
-    cm: options.colorMode,
-    as: options.animationStyle,
-    sp: options.animationSpeed,
-    inv: options.invert,
-    hs: options.hoverStrength,
-    hr: options.hoverRadius,
-    he: options.hoverEffect,
-    hc: options.hoverColor,
-    dr: options.dotSizeRatio,
-    dots: options.renderMode === "dots"
-  };
-  if (options.colorMode === "accent") o.ac = options.accentColor;
-  if (fps !== void 0) o.fps = fps;
-  if (animated) o.anim = true;
-  return JSON.stringify(o);
-}
-var CDN_SCRIPT = `<script src="https://cdn.jsdelivr.net/npm/asciify-engine@${EMBED_CDN_VERSION}/dist/embed.js" async></script>`;
-function generateEmbedCode(frame, options, width, height) {
-  const rows = frame.length;
-  if (rows === 0) return "";
-  const cols = frame[0].length;
-  const isFullColor = options.colorMode === "fullcolor";
-  const data = serializeFrame(frame, isFullColor);
-  const id = `ar-${Math.random().toString(36).slice(2, 9)}`;
-  const opts = buildEmbedOpts(options, rows, cols, width, height);
-  return `<!-- Asciify Embed -->
-<canvas id="${id}" data-asciify-opts='${opts}' width="${width}" height="${height}"></canvas>
-<script type="application/json" id="${id}-d">"${data}"</script>
-${CDN_SCRIPT}
-<!-- /Asciify Embed -->`;
-}
-function generateAnimatedEmbedCode(frames, options, fps, width, height) {
-  if (frames.length === 0) return "";
-  const rows = frames[0].length;
-  const cols = frames[0][0].length;
-  const isFullColor = options.colorMode === "fullcolor";
-  const allData = frames.map((f) => serializeFrame(f, isFullColor));
-  const id = `ar-${Math.random().toString(36).slice(2, 9)}`;
-  const opts = buildEmbedOpts(options, rows, cols, width, height, fps, true);
-  return `<!-- Asciify Animated Embed -->
-<canvas id="${id}" data-asciify-opts='${opts}' width="${width}" height="${height}"></canvas>
-<script type="application/json" id="${id}-d">${JSON.stringify(allData)}</script>
-${CDN_SCRIPT}
-<!-- /Asciify Animated Embed -->`;
-}
-function _fade(t) {
-  return t * t * t * (t * (t * 6 - 15) + 10);
-}
-function _lerp(a, b, t) {
-  return a + (b - a) * t;
-}
-function _hash2(ix, iy) {
-  let n = ix * 127 + iy * 311;
-  n = n >> 13 ^ n;
-  return (n * (n * n * 15731 + 789221) + 1376312589 & 2147483647) / 1073741823 - 1;
-}
-function _vnoise(x, y) {
-  const ix = Math.floor(x), iy = Math.floor(y);
-  const fx = x - ix, fy = y - iy;
-  const ux = _fade(fx), uy = _fade(fy);
-  const v00 = _hash2(ix, iy);
-  const v10 = _hash2(ix + 1, iy);
-  const v01 = _hash2(ix, iy + 1);
-  const v11 = _hash2(ix + 1, iy + 1);
-  return _lerp(_lerp(v00, v10, ux), _lerp(v01, v11, ux), uy);
-}
-function _fbm(x, y) {
-  return (_vnoise(x, y) * 0.5 + _vnoise(x * 2.1, y * 2.1) * 0.25 + _vnoise(x * 4.3, y * 4.3) * 0.125) / 0.875;
-}
-function renderWaveBackground(ctx, width, height, time, mousePos = { x: 0.5, y: 0.5 }, options = {}) {
-  const {
-    fontSize = 13,
-    charAspect = 0.62,
-    lineHeightRatio = 1.4,
-    chars = " .:-=+*#%@",
-    baseColor = null,
-    accentColor = "#d4ff00",
-    accentThreshold = 0.52,
-    mouseInfluence = 0.55,
-    mouseFalloff = 2.8,
-    speed = 1,
-    vortex = true,
-    sparkles = true,
-    breathe = true,
-    lightMode = false
-  } = options;
-  const charW = fontSize * charAspect;
-  const lineH = fontSize * lineHeightRatio;
-  const cols = Math.ceil(width / charW);
-  const rows = Math.ceil(height / lineH);
-  const mx = mousePos.x;
-  const my = mousePos.y;
-  let acR = 212, acG = 255, acB = 0;
-  if (accentColor) {
-    const hex = accentColor.replace("#", "");
-    if (hex.length === 6) {
-      acR = parseInt(hex.slice(0, 2), 16);
-      acG = parseInt(hex.slice(2, 4), 16);
-      acB = parseInt(hex.slice(4, 6), 16);
-    }
-  }
-  ctx.clearRect(0, 0, width, height);
-  ctx.font = `${fontSize}px "JetBrains Mono", monospace`;
-  ctx.textBaseline = "top";
-  const t = time * speed;
-  const breatheAmp = breathe ? (Math.sin(t * 0.22) * 0.5 + 0.5) * 0.12 : 0;
-  for (let row = 0; row < rows; row++) {
-    for (let col = 0; col < cols; col++) {
-      const nx = col / cols;
-      const ny = row / rows;
-      const w1 = Math.sin(col * 0.08 + row * 0.05 + t * 0.6) * 0.5 + 0.5;
-      const w2 = Math.sin(col * 0.03 - row * 0.07 + t * 0.4) * 0.5 + 0.5;
-      const w3 = Math.sin(col * 0.05 + row * 0.03 + t * 0.8) * 0.5 + 0.5;
-      const sinePart = (w1 + w2 + w3) / 3;
-      const noiseScale = 0.045;
-      const noiseShift = t * 0.08;
-      const noisePart = _fbm(col * noiseScale + noiseShift, row * noiseScale * 1.4 - noiseShift * 0.7) * 0.5 + 0.5;
-      const driftFreq = 0.06;
-      const driftPart = Math.sin((col + row * 0.65) * driftFreq + t * 1.1) * 0.5 + 0.5;
-      const wavePart = sinePart * 0.45 + noisePart * 0.35 + driftPart * 0.2 + breatheAmp;
-      const dxRaw = nx - mx;
-      const dyRaw = ny - my;
-      const distRaw = Math.sqrt(dxRaw * dxRaw + dyRaw * dyRaw);
-      let vortexBump = 0;
-      if (vortex && distRaw < 0.35) {
-        const angle = Math.atan2(dyRaw, dxRaw);
-        const swirl = Math.sin(angle * 4 + t * 2.2 - distRaw * 14);
-        const falloff = Math.max(0, 1 - distRaw / 0.35);
-        vortexBump = swirl * falloff * falloff * 0.22;
-      }
-      const proximity = Math.max(0, 1 - distRaw * mouseFalloff);
-      const intensity = wavePart * (1 - mouseInfluence) + (proximity + vortexBump * 0.5) * mouseInfluence + vortexBump * 0.15;
-      const clamped = Math.min(1, Math.max(0, intensity));
-      let finalIntensity = clamped;
-      if (sparkles && clamped > 0.72) {
-        const bucket = Math.floor(t * 8);
-        const sparkleSeed = _hash2(col * 7 + bucket * 3, row * 11 + bucket);
-        if (sparkleSeed > 0.88) {
-          finalIntensity = Math.min(1, clamped + (sparkleSeed - 0.88) * 4);
-        }
-      }
-      const charIdx = Math.floor(finalIntensity * (chars.length - 1));
-      if (chars[charIdx] === " ") continue;
-      const alpha = 0.015 + finalIntensity * 0.07;
-      const isAccent = finalIntensity > accentThreshold;
-      if (isAccent) {
-        const accentAlpha = Math.min(lightMode ? 0.4 : 0.28, alpha * (lightMode ? 4 : 2.8));
-        ctx.fillStyle = `rgba(${acR},${acG},${acB},${accentAlpha})`;
-      } else if (baseColor) {
-        ctx.fillStyle = baseColor.replace("{a}", String(alpha));
-      } else if (lightMode) {
-        ctx.fillStyle = `rgba(0,0,0,${alpha * 1.3})`;
-      } else {
-        ctx.fillStyle = `rgba(255,255,255,${alpha})`;
-      }
-      ctx.fillText(chars[charIdx], col * charW, row * lineH);
-    }
-  }
-}
+
+// src/backgrounds/rain.ts
 function renderRainBackground(ctx, width, height, time, options = {}) {
   const {
     fontSize = 13,
@@ -1024,7 +1047,7 @@ function renderRainBackground(ctx, width, height, time, options = {}) {
     bb = 0;
   }
   if (color) {
-    const p = _parseColor(color);
+    const p = parseColor(color);
     if (p) {
       br = p.r;
       bg = p.g;
@@ -1032,7 +1055,7 @@ function renderRainBackground(ctx, width, height, time, options = {}) {
     }
   }
   let acR = 212, acG = 255, acB = 0;
-  const ap = _parseColor(accentColor);
+  const ap = parseColor(accentColor);
   if (ap) {
     acR = ap.r;
     acG = ap.g;
@@ -1040,28 +1063,30 @@ function renderRainBackground(ctx, width, height, time, options = {}) {
   }
   const period = rows + tailLength;
   for (let c = 0; c < cols; c++) {
-    if (_hash2(c * 17, 3) > density) continue;
-    const colSpeed = (0.5 + _hash2(c * 31, 7) * 1.5) * speed;
-    const phase = _hash2(c * 13, 11) * period;
+    if (hash2(c * 17, 3) > density) continue;
+    const colSpeed = (0.5 + hash2(c * 31, 7) * 1.5) * speed;
+    const phase = hash2(c * 13, 11) * period;
     const headRow = Math.floor((time * colSpeed * 7 + phase) % period);
     const x = c * charW;
     for (let k = 0; k <= tailLength; k++) {
       const row = headRow - (tailLength - k);
       if (row < 0 || row >= rows) continue;
       const y = row * lineH;
-      const charSeed = _hash2(c * 53 + Math.floor(time * 5 + k), row * 7);
+      const charSeed = hash2(c * 53 + Math.floor(time * 5 + k), row * 7);
       const ch = chars[Math.floor(charSeed * chars.length)];
-      const t = k / tailLength;
+      const tRatio = k / tailLength;
       if (k === tailLength) {
         ctx.fillStyle = `rgba(${acR},${acG},${acB},${lightMode ? 0.7 : 0.85})`;
       } else {
-        const alpha = lightMode ? t * 0.22 : t * 0.15;
+        const alpha = lightMode ? tRatio * 0.22 : tRatio * 0.15;
         ctx.fillStyle = `rgba(${br},${bg},${bb},${alpha})`;
       }
       ctx.fillText(ch, x, y);
     }
   }
 }
+
+// src/backgrounds/stars.ts
 function renderStarsBackground(ctx, width, height, time, mousePos = { x: 0.5, y: 0.5 }, options = {}) {
   const {
     fontSize = 14,
@@ -1085,7 +1110,7 @@ function renderStarsBackground(ctx, width, height, time, mousePos = { x: 0.5, y:
     bb = 0;
   }
   if (color) {
-    const p = _parseColor(color);
+    const p = parseColor(color);
     if (p) {
       br = p.r;
       bg = p.g;
@@ -1093,7 +1118,7 @@ function renderStarsBackground(ctx, width, height, time, mousePos = { x: 0.5, y:
     }
   }
   let acR = 212, acG = 255, acB = 0;
-  const ap = _parseColor(accentColor);
+  const ap = parseColor(accentColor);
   if (ap) {
     acR = ap.r;
     acG = ap.g;
@@ -1102,9 +1127,9 @@ function renderStarsBackground(ctx, width, height, time, mousePos = { x: 0.5, y:
   const charArr = chars.replace(/ /g, "").split("");
   if (charArr.length === 0) return;
   for (let i = 0; i < count; i++) {
-    const angle = _hash2(i * 17, 3) * Math.PI * 2;
-    const baseSpd = 0.15 + _hash2(i * 31, 7) * 0.85;
-    const phase = _hash2(i * 13, 11);
+    const angle = hash2(i * 17, 3) * Math.PI * 2;
+    const baseSpd = 0.15 + hash2(i * 31, 7) * 0.85;
+    const phase = hash2(i * 13, 11);
     const r = (time * baseSpd * speed * 0.22 + phase) % 1;
     const x = cx + Math.cos(angle) * r * maxR;
     const y = cy + Math.sin(angle) * r * maxR;
@@ -1120,68 +1145,81 @@ function renderStarsBackground(ctx, width, height, time, mousePos = { x: 0.5, y:
   }
   ctx.textAlign = "left";
 }
+
+// src/backgrounds/pulse.ts
 function renderPulseBackground(ctx, width, height, time, mousePos = { x: 0.5, y: 0.5 }, options = {}) {
   const {
-    fontSize = 13,
-    chars = " .:-=+*#%@",
-    accentColor = "#d4ff00",
+    fontSize = 14,
+    chars = ". \xB7 \u25CB \u25CE \u25CF",
+    accentColor = "#00ffcc",
     color,
-    rings = 6,
+    rings = 5,
     speed = 1,
     sharpness = 4,
     lightMode = false
   } = options;
-  const charW = fontSize * 0.62;
-  const lineH = fontSize * 1.4;
-  const cols = Math.ceil(width / charW);
-  const rows = Math.ceil(height / lineH);
   ctx.clearRect(0, 0, width, height);
-  ctx.font = `${fontSize}px monospace`;
-  ctx.textBaseline = "top";
-  const maxR = Math.sqrt(width * width + height * height) * 0.5;
-  const ox = mousePos.x * width;
-  const oy = mousePos.y * height;
-  let br = 255, bg2 = 255, bb = 255;
+  ctx.textBaseline = "middle";
+  ctx.textAlign = "center";
+  const cx = width * mousePos.x;
+  const cy = height * mousePos.y;
+  const maxDist = Math.sqrt(cx * cx + cy * cy) * 1.6 + Math.sqrt(width * width + height * height) * 0.2;
+  let br = 255, bg = 255, bb = 255;
   if (lightMode) {
     br = 0;
-    bg2 = 0;
+    bg = 0;
     bb = 0;
   }
   if (color) {
-    const p = _parseColor(color);
+    const p = parseColor(color);
     if (p) {
       br = p.r;
-      bg2 = p.g;
+      bg = p.g;
       bb = p.b;
     }
   }
-  let acR = 212, acG = 255, acB = 0;
-  const ap = _parseColor(accentColor);
+  let acR = 0, acG = 255, acB = 204;
+  const ap = parseColor(accentColor);
   if (ap) {
     acR = ap.r;
     acG = ap.g;
     acB = ap.b;
   }
-  const t = time * speed;
+  const charArr = chars.replace(/ /g, "").split("");
+  if (charArr.length === 0) return;
+  const cols = Math.ceil(width / fontSize);
+  const rows = Math.ceil(height / fontSize);
   for (let row = 0; row < rows; row++) {
     for (let col = 0; col < cols; col++) {
-      const px = col * charW + charW * 0.5;
-      const py = row * lineH + lineH * 0.5;
-      const dist = Math.sqrt((px - ox) ** 2 + (py - oy) ** 2);
-      const norm = dist / maxR;
-      const phase = (norm * rings - t * 1.4) % 1;
-      const wave = Math.pow(Math.max(0, Math.cos(phase * Math.PI * 2)), sharpness);
-      if (wave < 0.02) continue;
-      const charIdx = Math.floor(wave * (chars.length - 1));
-      const ch = chars[charIdx];
-      if (ch === " ") continue;
-      const isAccent = wave > 0.75;
-      const alpha = lightMode ? wave * 0.22 : wave * 0.14;
-      ctx.fillStyle = isAccent ? `rgba(${acR},${acG},${acB},${lightMode ? 0.5 : 0.35})` : `rgba(${br},${bg2},${bb},${alpha})`;
-      ctx.fillText(ch, col * charW, row * lineH);
+      const px = col * fontSize + fontSize * 0.5;
+      const py = row * fontSize + fontSize * 0.5;
+      const dx = px - cx;
+      const dy = py - cy;
+      const dist = Math.sqrt(dx * dx + dy * dy);
+      const norm = dist / maxDist;
+      let totalIntensity = 0;
+      for (let r = 0; r < rings; r++) {
+        const phase = r / rings;
+        const t = (time * speed * 0.38 + phase) % 1;
+        const ringDist = Math.abs(norm - t);
+        const ringNorm = Math.max(0, 1 - ringDist * maxDist / (fontSize * (12 - sharpness)));
+        totalIntensity += Math.cos(ringNorm * Math.PI * 0.5) * ringNorm;
+      }
+      totalIntensity = Math.min(1, totalIntensity);
+      if (totalIntensity < 0.02) continue;
+      const isAccent = totalIntensity > 0.6;
+      ctx.font = `${fontSize}px monospace`;
+      const charIdx = Math.floor(totalIntensity * (charArr.length - 1));
+      const ch = charArr[Math.min(charIdx, charArr.length - 1)];
+      const alpha = lightMode ? totalIntensity * 0.32 : totalIntensity * 0.22;
+      ctx.fillStyle = isAccent ? `rgba(${acR},${acG},${acB},${Math.min(lightMode ? 0.5 : 0.4, totalIntensity * 0.55)})` : `rgba(${br},${bg},${bb},${alpha})`;
+      ctx.fillText(ch, px, py);
     }
   }
+  ctx.textAlign = "left";
 }
+
+// src/backgrounds/noise.ts
 function renderNoiseBackground(ctx, width, height, time, mousePos = { x: 0.5, y: 0.5 }, options = {}) {
   const {
     fontSize = 14,
@@ -1209,7 +1247,7 @@ function renderNoiseBackground(ctx, width, height, time, mousePos = { x: 0.5, y:
     bb = 0;
   }
   if (color) {
-    const p = _parseColor(color);
+    const p = parseColor(color);
     if (p) {
       br = p.r;
       bgc = p.g;
@@ -1217,7 +1255,7 @@ function renderNoiseBackground(ctx, width, height, time, mousePos = { x: 0.5, y:
     }
   }
   let acR = 212, acG = 255, acB = 0;
-  const ap = _parseColor(accentColor);
+  const ap = parseColor(accentColor);
   if (ap) {
     acR = ap.r;
     acG = ap.g;
@@ -1229,7 +1267,7 @@ function renderNoiseBackground(ctx, width, height, time, mousePos = { x: 0.5, y:
   const fbmN = (x, y) => {
     let v = 0, amp = 0.5, freq = 1, norm = 0;
     for (let o = 0; o < oct; o++) {
-      v += _vnoise(x * freq, y * freq) * amp;
+      v += vnoise(x * freq, y * freq) * amp;
       norm += amp;
       amp *= 0.5;
       freq *= 2.1;
@@ -1259,6 +1297,8 @@ function renderNoiseBackground(ctx, width, height, time, mousePos = { x: 0.5, y:
     }
   }
 }
+
+// src/backgrounds/grid.ts
 function renderGridBackground(ctx, width, height, time, mousePos = { x: 0.5, y: 0.5 }, options = {}) {
   const {
     fontSize = 12,
@@ -1285,7 +1325,7 @@ function renderGridBackground(ctx, width, height, time, mousePos = { x: 0.5, y:
     bb = 0;
   }
   if (color) {
-    const p = _parseColor(color);
+    const p = parseColor(color);
     if (p) {
       br = p.r;
       bgv = p.g;
@@ -1293,7 +1333,7 @@ function renderGridBackground(ctx, width, height, time, mousePos = { x: 0.5, y:
     }
   }
   let acR = 212, acG = 255, acB = 0;
-  const ap = _parseColor(accentColor);
+  const ap = parseColor(accentColor);
   if (ap) {
     acR = ap.r;
     acG = ap.g;
@@ -1305,7 +1345,7 @@ function renderGridBackground(ctx, width, height, time, mousePos = { x: 0.5, y:
       const ny = row / rows;
       const scanPhase = ((ny * bands - t * 0.5) % 1 + 1) % 1;
       const bandIntensity = Math.max(0, 1 - scanPhase / bandWidth);
-      const gridSeed = _hash2(col * 3, row * 7);
+      const gridSeed = hash2(col * 3, row * 7);
       const gridBase = (gridSeed * 0.5 + 0.5) * 0.35;
       let glitchBump = 0;
       if (glitch) {
@@ -1313,7 +1353,7 @@ function renderGridBackground(ctx, width, height, time, mousePos = { x: 0.5, y:
         const dy = ny - mousePos.y;
         const d = Math.sqrt(dx * dx + dy * dy);
         if (d < 0.18) {
-          const g = _hash2(col * 11 + Math.floor(t * 12), row * 5);
+          const g = hash2(col * 11 + Math.floor(t * 12), row * 5);
           glitchBump = Math.max(0, 1 - d / 0.18) * (g > 0.5 ? g - 0.3 : 0);
         }
       }
@@ -1328,6 +1368,8 @@ function renderGridBackground(ctx, width, height, time, mousePos = { x: 0.5, y:
     }
   }
 }
+
+// src/backgrounds/aurora.ts
 function renderAuroraBackground(ctx, width, height, time, mousePos = { x: 0.5, y: 0.5 }, options = {}) {
   const {
     fontSize = 14,
@@ -1354,7 +1396,7 @@ function renderAuroraBackground(ctx, width, height, time, mousePos = { x: 0.5, y
     cb = 0;
   }
   if (color) {
-    const p = _parseColor(color);
+    const p = parseColor(color);
     if (p) {
       cr = p.r;
       cg = p.g;
@@ -1362,7 +1404,7 @@ function renderAuroraBackground(ctx, width, height, time, mousePos = { x: 0.5, y
     }
   }
   let acR = 212, acG = 255, acB = 0;
-  const ap = _parseColor(accentColor);
+  const ap = parseColor(accentColor);
   if (ap) {
     acR = ap.r;
     acG = ap.g;
@@ -1371,19 +1413,14 @@ function renderAuroraBackground(ctx, width, height, time, mousePos = { x: 0.5, y
   const t = time * speed;
   const layerParams = [];
   for (let l = 0; l < layers; l++) {
-    const seed = _hash2(l * 17, l * 31 + 7);
-    const seed2 = _hash2(l * 23 + 5, l * 11);
+    const seed = hash2(l * 17, l * 31 + 7);
+    const seed2 = hash2(l * 23 + 5, l * 11);
     layerParams.push({
       fx: 0.8 + seed * 2.2,
-      // x spatial frequency
       fy: 1.2 + seed2 * 1.8,
-      // y spatial frequency
       phase: seed * Math.PI * 4,
-      // phase offset
-      dt: (0.3 + _hash2(l * 7, l * 13 + 3) * 0.5) * (l % 2 === 0 ? 1 : -1),
-      // drift speed & direction
-      amp: 0.55 + _hash2(l * 29, l * 3) * 0.45
-      // amplitude weight
+      dt: (0.3 + hash2(l * 7, l * 13 + 3) * 0.5) * (l % 2 === 0 ? 1 : -1),
+      amp: 0.55 + hash2(l * 29, l * 3) * 0.45
     });
   }
   for (let row = 0; row < rows; row++) {
@@ -1417,6 +1454,219 @@ function renderAuroraBackground(ctx, width, height, time, mousePos = { x: 0.5, y
     }
   }
 }
+
+// src/backgrounds/silk.ts
+function renderSilkBackground(ctx, width, height, time, options = {}) {
+  const {
+    fontSize = 13,
+    color,
+    accentColor = "#d4ff00",
+    speed = 0.4,
+    layers = 4,
+    turbulence = 0.8,
+    lightMode = false
+  } = options;
+  const charW = fontSize * 0.62;
+  const lineH = fontSize * 1.4;
+  const cols = Math.ceil(width / charW);
+  const rows = Math.ceil(height / lineH);
+  ctx.clearRect(0, 0, width, height);
+  ctx.font = `${fontSize}px monospace`;
+  ctx.textBaseline = "top";
+  let cr = 255, cg = 255, cb = 255;
+  if (lightMode) {
+    cr = 0;
+    cg = 0;
+    cb = 0;
+  }
+  if (color) {
+    const p = parseColor(color);
+    if (p) {
+      cr = p.r;
+      cg = p.g;
+      cb = p.b;
+    }
+  }
+  let acR = 212, acG = 255, acB = 0;
+  const ap = parseColor(accentColor);
+  if (ap) {
+    acR = ap.r;
+    acG = ap.g;
+    acB = ap.b;
+  }
+  const t = time * speed;
+  const dirChars = ["\u2500", "\u2500", "\u254C", "\xB7", "\u254C", "\u2500", "\u2500", "\u254C", "\xB7"];
+  for (let row = 0; row < rows; row++) {
+    const ny = row / rows;
+    for (let col = 0; col < cols; col++) {
+      const nx = col / cols;
+      let angleSum = 0;
+      let intensitySum = 0;
+      for (let l = 0; l < layers; l++) {
+        const ls = hash2(l * 13, l * 7 + 3);
+        const ls2 = hash2(l * 29, l * 11 + 1);
+        const fx = 1.1 + ls * 2.4;
+        const fy = 0.9 + ls2 * 2;
+        const ph = ls * Math.PI * 6;
+        const dr = (0.2 + hash2(l * 41, l * 17) * 0.5) * (l % 2 === 0 ? 1 : -1.3);
+        const u = Math.sin(nx * fx * Math.PI * 2 + t * dr + ph);
+        const v = Math.cos(ny * fy * Math.PI * 2 + t * dr * 0.6 + ph * 1.7);
+        const cross = Math.sin(nx * fy * Math.PI * turbulence + ny * fx * Math.PI * turbulence + t * dr * 0.4);
+        angleSum += Math.atan2(v + cross * 0.3, u);
+        intensitySum += (u * v + 1) * 0.5;
+      }
+      const angle = angleSum / layers;
+      const intensity = Math.min(1, intensitySum / layers);
+      if (intensity < 0.1) continue;
+      const angleNorm = (angle + Math.PI) / (Math.PI * 2);
+      const charIdx = Math.floor(angleNorm * dirChars.length) % dirChars.length;
+      const ch = dirChars[charIdx];
+      const isAccent = intensity > 0.8;
+      const alpha = lightMode ? intensity * 0.16 : intensity * 0.13;
+      ctx.fillStyle = isAccent ? `rgba(${acR},${acG},${acB},${lightMode ? 0.44 : 0.26})` : `rgba(${cr},${cg},${cb},${alpha})`;
+      ctx.fillText(ch, col * charW, row * lineH);
+    }
+  }
+}
+
+// src/backgrounds/void.ts
+function renderVoidBackground(ctx, width, height, time, mousePos = { x: 0.5, y: 0.5 }, options = {}) {
+  const {
+    fontSize = 13,
+    chars = " \xB7:;=+*#%@",
+    color,
+    accentColor = "#d4ff00",
+    speed = 1,
+    radius = 0.38,
+    swirl = 3,
+    lightMode = false
+  } = options;
+  const charW = fontSize * 0.62;
+  const lineH = fontSize * 1.4;
+  const cols = Math.ceil(width / charW);
+  const rows = Math.ceil(height / lineH);
+  const aspect = width / height;
+  ctx.clearRect(0, 0, width, height);
+  ctx.font = `${fontSize}px monospace`;
+  ctx.textBaseline = "top";
+  let cr = 255, cg = 255, cb = 255;
+  if (lightMode) {
+    cr = 0;
+    cg = 0;
+    cb = 0;
+  }
+  if (color) {
+    const p = parseColor(color);
+    if (p) {
+      cr = p.r;
+      cg = p.g;
+      cb = p.b;
+    }
+  }
+  let acR = 212, acG = 255, acB = 0;
+  const ap = parseColor(accentColor);
+  if (ap) {
+    acR = ap.r;
+    acG = ap.g;
+    acB = ap.b;
+  }
+  const t = time * speed;
+  for (let row = 0; row < rows; row++) {
+    const ny = row / rows;
+    for (let col = 0; col < cols; col++) {
+      const nx = col / cols;
+      const dx = (nx - mousePos.x) * aspect;
+      const dy = ny - mousePos.y;
+      const dist = Math.sqrt(dx * dx + dy * dy);
+      const r = dist / radius;
+      if (r > 1) {
+        const outerNoise = hash2(col * 3, row * 7) * Math.max(0, 1 - (r - 1) * 3);
+        if (outerNoise < 0.62) continue;
+        const alpha2 = outerNoise * (lightMode ? 0.05 : 0.04);
+        ctx.fillStyle = `rgba(${cr},${cg},${cb},${alpha2})`;
+        ctx.fillText(chars[1], col * charW, row * lineH);
+        continue;
+      }
+      const pulseRing = Math.max(0, 1 - Math.abs(r - (0.15 + 0.12 * Math.sin(t * 1.1))) / 0.07);
+      const gravity = Math.pow(1 - r, 2.2);
+      const intensity = Math.min(1, gravity + pulseRing * 0.6);
+      if (intensity < 0.06) continue;
+      const densityI = Math.floor(intensity * (chars.length - 1));
+      const charIdx = Math.min(chars.length - 1, densityI);
+      const ch = chars[charIdx];
+      const isAccent = pulseRing > 0.35 || r < 0.08;
+      const alpha = lightMode ? intensity * 0.22 : intensity * 0.18;
+      ctx.fillStyle = isAccent ? `rgba(${acR},${acG},${acB},${lightMode ? 0.55 : 0.38})` : `rgba(${cr},${cg},${cb},${alpha})`;
+      ctx.fillText(ch, col * charW, row * lineH);
+    }
+  }
+}
+
+// src/backgrounds/morph.ts
+function renderMorphBackground(ctx, width, height, time, options = {}) {
+  const {
+    fontSize = 14,
+    chars = " \xB7\u2219\u2022:-=+*#",
+    color,
+    accentColor = "#d4ff00",
+    speed = 0.5,
+    harmonics = 3,
+    lightMode = false
+  } = options;
+  const charW = fontSize * 0.62;
+  const lineH = fontSize * 1.4;
+  const cols = Math.ceil(width / charW);
+  const rows = Math.ceil(height / lineH);
+  ctx.clearRect(0, 0, width, height);
+  ctx.font = `${fontSize}px monospace`;
+  ctx.textBaseline = "top";
+  let cr = 255, cg = 255, cb = 255;
+  if (lightMode) {
+    cr = 0;
+    cg = 0;
+    cb = 0;
+  }
+  if (color) {
+    const p = parseColor(color);
+    if (p) {
+      cr = p.r;
+      cg = p.g;
+      cb = p.b;
+    }
+  }
+  let acR = 212, acG = 255, acB = 0;
+  const ap = parseColor(accentColor);
+  if (ap) {
+    acR = ap.r;
+    acG = ap.g;
+    acB = ap.b;
+  }
+  const t = time * speed;
+  const maxV = Array.from({ length: harmonics }, (_, h) => 1 / (h + 1)).reduce((a, b) => a + b, 0);
+  for (let row = 0; row < rows; row++) {
+    for (let col = 0; col < cols; col++) {
+      let v = 0;
+      for (let h = 0; h < harmonics; h++) {
+        const fBase = hash2(col * (h + 3) + 7, row * (h + 5) + 11);
+        const fineF = 0.18 + fBase * 1.4;
+        const phase = hash2(col * (h + 7), row * (h + 9) + 3) * Math.PI * 2;
+        const weight = 1 / (h + 1);
+        v += Math.sin(t * fineF + phase) * weight;
+      }
+      const norm = (v / maxV + 1) * 0.5;
+      if (norm < 0.28) continue;
+      const remapped = (norm - 0.28) / 0.72;
+      const charIdx = Math.min(chars.length - 1, Math.floor(remapped * chars.length));
+      const ch = chars[charIdx];
+      const isAccent = norm > 0.88;
+      const alpha = lightMode ? remapped * 0.17 : remapped * 0.13;
+      ctx.fillStyle = isAccent ? `rgba(${acR},${acG},${acB},${lightMode ? 0.45 : 0.28})` : `rgba(${cr},${cg},${cb},${alpha})`;
+      ctx.fillText(ch, col * charW, row * lineH);
+    }
+  }
+}
+
+// src/backgrounds/index.ts
 function _parseColor(c) {
   const hex = c.match(/^#([0-9a-f]{3,8})$/i)?.[1];
   if (hex) {
@@ -1505,6 +1755,21 @@ function asciiBackground(target, options = {}) {
     lightMode: renderOpts.lightMode !== void 0 ? renderOpts.lightMode : isLight(),
     color: color ?? renderOpts.color
   });
+  const buildSilkOpts = () => ({
+    ...renderOpts,
+    lightMode: renderOpts.lightMode !== void 0 ? renderOpts.lightMode : isLight(),
+    color: color ?? renderOpts.color
+  });
+  const buildVoidOpts = () => ({
+    ...renderOpts,
+    lightMode: renderOpts.lightMode !== void 0 ? renderOpts.lightMode : isLight(),
+    color: color ?? renderOpts.color
+  });
+  const buildMorphOpts = () => ({
+    ...renderOpts,
+    lightMode: renderOpts.lightMode !== void 0 ? renderOpts.lightMode : isLight(),
+    color: color ?? renderOpts.color
+  });
   const optsRef = { current: buildWaveOpts() };
   const rebuildOpts = () => {
     if (type === "rain") optsRef.current = buildRainOpts();
@@ -1513,6 +1778,9 @@ function asciiBackground(target, options = {}) {
     else if (type === "noise") optsRef.current = buildNoiseOpts();
     else if (type === "grid") optsRef.current = buildGridOpts();
     else if (type === "aurora") optsRef.current = buildAuroraOpts();
+    else if (type === "silk") optsRef.current = buildSilkOpts();
+    else if (type === "void") optsRef.current = buildVoidOpts();
+    else if (type === "morph") optsRef.current = buildMorphOpts();
     else optsRef.current = buildWaveOpts();
   };
   rebuildOpts();
@@ -1553,6 +1821,12 @@ function asciiBackground(target, options = {}) {
       renderGridBackground(ctx, r.width, r.height, time, smoothMouse, optsRef.current);
     } else if (type === "aurora") {
       renderAuroraBackground(ctx, r.width, r.height, time, smoothMouse, optsRef.current);
+    } else if (type === "silk") {
+      renderSilkBackground(ctx, r.width, r.height, time, optsRef.current);
+    } else if (type === "void") {
+      renderVoidBackground(ctx, r.width, r.height, time, smoothMouse, optsRef.current);
+    } else if (type === "morph") {
+      renderMorphBackground(ctx, r.width, r.height, time, optsRef.current);
     } else {
       renderWaveBackground(ctx, r.width, r.height, time, smoothMouse, optsRef.current);
     }
@@ -2037,10 +2311,13 @@ exports.mountWaveBackground = mountWaveBackground;
 exports.renderAuroraBackground = renderAuroraBackground;
 exports.renderFrameToCanvas = renderFrameToCanvas;
 exports.renderGridBackground = renderGridBackground;
+exports.renderMorphBackground = renderMorphBackground;
 exports.renderNoiseBackground = renderNoiseBackground;
 exports.renderPulseBackground = renderPulseBackground;
 exports.renderRainBackground = renderRainBackground;
+exports.renderSilkBackground = renderSilkBackground;
 exports.renderStarsBackground = renderStarsBackground;
+exports.renderVoidBackground = renderVoidBackground;
 exports.renderWaveBackground = renderWaveBackground;
 exports.tryCreateWebGLRenderer = tryCreateWebGLRenderer;
 exports.videoToAsciiFrames = videoToAsciiFrames;