asciify-engine 1.0.14 → 1.0.16

package/dist/index.d.cts

@@ -308,6 +308,129 @@ declare function renderStarsBackground(ctx: CanvasRenderingContext2D, width: num
     x: number;
     y: number;
 }, options?: StarsBackgroundOptions): void;
+/**
+ * Concentric ASCII ripples that radiate from a vanishing point following
+ * the mouse — like a sonar / radar signal.
+ *
+ * @example
+ * ```ts
+ * asciiBackground('#hero', { type: 'pulse' });
+ * ```
+ */
+interface PulseBackgroundOptions {
+    /** Font size in CSS pixels (default: 13). */
+    fontSize?: number;
+    /** Character ramp dark → bright (default: ' .:-=+*#%@'). */
+    chars?: string;
+    /** Accent colour on ring crests (default: '#d4ff00'). */
+    accentColor?: string;
+    /** Custom base character colour (any CSS colour string). */
+    color?: string;
+    /** Number of concentric rings (default: 6). */
+    rings?: number;
+    /** Ring travel speed (default: 1). */
+    speed?: number;
+    /** Ring width sharpness — higher = thinner rings (default: 4). */
+    sharpness?: number;
+    /** Light mode (default: false). */
+    lightMode?: boolean;
+}
+declare function renderPulseBackground(ctx: CanvasRenderingContext2D, width: number, height: number, time: number, mousePos?: {
+    x: number;
+    y: number;
+}, options?: PulseBackgroundOptions): void;
+/**
+ * Slow-drifting organic fractal noise field. No directional pattern —
+ * pure ambient texture. The mouse subtly warps the field around the cursor.
+ *
+ * @example
+ * ```ts
+ * asciiBackground('#hero', { type: 'noise' });
+ * ```
+ */
+interface NoiseBackgroundOptions {
+    /** Font size in CSS pixels (default: 14). */
+    fontSize?: number;
+    /** Character ramp dark → bright (default: ' .·:;=+*#%@░▒▓'). */
+    chars?: string;
+    /** Accent colour on intensity peaks (default: '#d4ff00'). */
+    accentColor?: string;
+    /** Custom base character colour (any CSS colour string). */
+    color?: string;
+    /** Number of noise octaves for FBM detail (default: 4, max: 6). */
+    octaves?: number;
+    /** Drift / scroll speed (default: 1). */
+    speed?: number;
+    /** Noise scale — lower = larger blobs (default: 1). */
+    scale?: number;
+    /** Accent threshold 0-1 (default: 0.78). */
+    accentThreshold?: number;
+    /** Mouse warp radius 0-1 (default: 0.3). */
+    mouseWarp?: number;
+    /** Light mode (default: false). */
+    lightMode?: boolean;
+}
+declare function renderNoiseBackground(ctx: CanvasRenderingContext2D, width: number, height: number, time: number, mousePos?: {
+    x: number;
+    y: number;
+}, options?: NoiseBackgroundOptions): void;
+/**
+ * CRT-style horizontal scan-line sweep. Bright scan bands travel downward
+ * continuously; the cursor creates a local disruption / glitch zone.
+ *
+ * @example
+ * ```ts
+ * asciiBackground('#hero', { type: 'grid' });
+ * ```
+ */
+interface GridBackgroundOptions {
+    /** Font size in CSS pixels (default: 12). */
+    fontSize?: number;
+    /** Character set (default: '·-=+|/'). */
+    chars?: string;
+    /** Accent / scan-band colour (default: '#d4ff00'). */
+    accentColor?: string;
+    /** Custom base character colour (any CSS colour string). */
+    color?: string;
+    /** Number of scan bands visible at once (default: 3). */
+    bands?: number;
+    /** Band travel speed (default: 1). */
+    speed?: number;
+    /** Band width as fraction of canvas height (default: 0.12). */
+    bandWidth?: number;
+    /** Enable cursor disruption glitch zone (default: true). */
+    glitch?: boolean;
+    /** Light mode (default: false). */
+    lightMode?: boolean;
+}
+declare function renderGridBackground(ctx: CanvasRenderingContext2D, width: number, height: number, time: number, mousePos?: {
+    x: number;
+    y: number;
+}, options?: GridBackgroundOptions): void;
+interface AuroraBackgroundOptions {
+    /** Character grid density. Default 14. */
+    fontSize?: number;
+    /** Character ramp from sparse to dense. Default fine gradient ramp. */
+    chars?: string;
+    /** Base character color. Default theme-aware white/black. */
+    color?: string;
+    /** Accent color for intensity peaks. Default '#d4ff00'. */
+    accentColor?: string;
+    /** Animation speed multiplier. Default 1. */
+    speed?: number;
+    /** Number of wave layers stacked. More = richer interference. Default 5. */
+    layers?: number;
+    /** Wave spread/softness — higher = broader, more diffuse bands. Default 1.2. */
+    softness?: number;
+    /** Mouse distortion radius (0–1). Elegant ripple that follows the cursor. Default 0.2. */
+    mouseRipple?: number;
+    /** Force light mode (dark chars on light bg). Default false. */
+    lightMode?: boolean;
+}
+declare function renderAuroraBackground(ctx: CanvasRenderingContext2D, width: number, height: number, time: number, mousePos?: {
+    x: number;
+    y: number;
+}, options?: AuroraBackgroundOptions): void;
 /**
  * Drop-in helper that mounts an interactive ASCII wave background onto any
  * element. Injects a canvas, wires DPR resize, mouse tracking, and the RAF
@@ -330,14 +453,17 @@ declare function renderStarsBackground(ctx: CanvasRenderingContext2D, width: num
  * useEffect(() => asciiBackground(ref.current).destroy, []);
  * ```
  */
-interface AsciiBackgroundOptions extends WaveBackgroundOptions, RainBackgroundOptions, StarsBackgroundOptions {
+interface AsciiBackgroundOptions extends WaveBackgroundOptions, RainBackgroundOptions, StarsBackgroundOptions, PulseBackgroundOptions, NoiseBackgroundOptions, GridBackgroundOptions, AuroraBackgroundOptions {
     /**
      * Which background to render (default: 'wave').
      * - 'wave'  — interactive ASCII field with vortex, sparkles, breathe
      * - 'rain'  — digital column rain (Matrix-style falling characters)
      * - 'stars' — 3D star-warp / hyperspace (chars fly toward the viewer)
+     * - 'pulse' — concentric ASCII ripples radiating from the mouse position
+     * - 'noise' — slow-drifting organic fractal noise field
+     * - 'grid'  — CRT-style horizontal scan bands with cursor glitch zone
      */
-    type?: 'wave' | 'rain' | 'stars';
+    type?: 'wave' | 'rain' | 'stars' | 'pulse' | 'noise' | 'grid' | 'aurora';
     /** CSS opacity applied to the canvas element (default: 0.2) */
     opacity?: number;
     /** Extra CSS class names added to the injected canvas */
@@ -383,4 +509,4 @@ interface WebGLRenderer {
  */
 declare function tryCreateWebGLRenderer(canvas: HTMLCanvasElement): WebGLRenderer | null;
 
-export { ART_STYLE_PRESETS, type AnimationStyle, type ArtStyle, type AsciiBackgroundOptions, type AsciiCell, type AsciiFrame, type AsciiOptions, type AsciiResult, type AsciifySimpleOptions, CHARSETS, type CharsetKey, type ColorMode, DEFAULT_OPTIONS, HOVER_PRESETS, type HoverEffect, type HoverPreset, type MountWaveOptions, type RainBackgroundOptions, type RenderMode, type SourceType, type StarsBackgroundOptions, type WaveBackgroundOptions, type WebGLRenderer, asciiBackground, asciify, asciifyGif, asciifyVideo, generateAnimatedEmbedCode, generateEmbedCode, gifToAsciiFrames, imageToAsciiFrame, mountWaveBackground, renderFrameToCanvas, renderRainBackground, renderStarsBackground, renderWaveBackground, tryCreateWebGLRenderer, videoToAsciiFrames };
+export { ART_STYLE_PRESETS, type AnimationStyle, type ArtStyle, type AsciiBackgroundOptions, type AsciiCell, type AsciiFrame, type AsciiOptions, type AsciiResult, type AsciifySimpleOptions, type AuroraBackgroundOptions, CHARSETS, type CharsetKey, type ColorMode, DEFAULT_OPTIONS, type GridBackgroundOptions, HOVER_PRESETS, type HoverEffect, type HoverPreset, type MountWaveOptions, type NoiseBackgroundOptions, type PulseBackgroundOptions, type RainBackgroundOptions, type RenderMode, type SourceType, type StarsBackgroundOptions, type WaveBackgroundOptions, type WebGLRenderer, asciiBackground, asciify, asciifyGif, asciifyVideo, generateAnimatedEmbedCode, generateEmbedCode, gifToAsciiFrames, imageToAsciiFrame, mountWaveBackground, renderAuroraBackground, renderFrameToCanvas, renderGridBackground, renderNoiseBackground, renderPulseBackground, renderRainBackground, renderStarsBackground, renderWaveBackground, tryCreateWebGLRenderer, videoToAsciiFrames };

package/dist/index.d.ts

@@ -308,6 +308,129 @@ declare function renderStarsBackground(ctx: CanvasRenderingContext2D, width: num
     x: number;
     y: number;
 }, options?: StarsBackgroundOptions): void;
+/**
+ * Concentric ASCII ripples that radiate from a vanishing point following
+ * the mouse — like a sonar / radar signal.
+ *
+ * @example
+ * ```ts
+ * asciiBackground('#hero', { type: 'pulse' });
+ * ```
+ */
+interface PulseBackgroundOptions {
+    /** Font size in CSS pixels (default: 13). */
+    fontSize?: number;
+    /** Character ramp dark → bright (default: ' .:-=+*#%@'). */
+    chars?: string;
+    /** Accent colour on ring crests (default: '#d4ff00'). */
+    accentColor?: string;
+    /** Custom base character colour (any CSS colour string). */
+    color?: string;
+    /** Number of concentric rings (default: 6). */
+    rings?: number;
+    /** Ring travel speed (default: 1). */
+    speed?: number;
+    /** Ring width sharpness — higher = thinner rings (default: 4). */
+    sharpness?: number;
+    /** Light mode (default: false). */
+    lightMode?: boolean;
+}
+declare function renderPulseBackground(ctx: CanvasRenderingContext2D, width: number, height: number, time: number, mousePos?: {
+    x: number;
+    y: number;
+}, options?: PulseBackgroundOptions): void;
+/**
+ * Slow-drifting organic fractal noise field. No directional pattern —
+ * pure ambient texture. The mouse subtly warps the field around the cursor.
+ *
+ * @example
+ * ```ts
+ * asciiBackground('#hero', { type: 'noise' });
+ * ```
+ */
+interface NoiseBackgroundOptions {
+    /** Font size in CSS pixels (default: 14). */
+    fontSize?: number;
+    /** Character ramp dark → bright (default: ' .·:;=+*#%@░▒▓'). */
+    chars?: string;
+    /** Accent colour on intensity peaks (default: '#d4ff00'). */
+    accentColor?: string;
+    /** Custom base character colour (any CSS colour string). */
+    color?: string;
+    /** Number of noise octaves for FBM detail (default: 4, max: 6). */
+    octaves?: number;
+    /** Drift / scroll speed (default: 1). */
+    speed?: number;
+    /** Noise scale — lower = larger blobs (default: 1). */
+    scale?: number;
+    /** Accent threshold 0-1 (default: 0.78). */
+    accentThreshold?: number;
+    /** Mouse warp radius 0-1 (default: 0.3). */
+    mouseWarp?: number;
+    /** Light mode (default: false). */
+    lightMode?: boolean;
+}
+declare function renderNoiseBackground(ctx: CanvasRenderingContext2D, width: number, height: number, time: number, mousePos?: {
+    x: number;
+    y: number;
+}, options?: NoiseBackgroundOptions): void;
+/**
+ * CRT-style horizontal scan-line sweep. Bright scan bands travel downward
+ * continuously; the cursor creates a local disruption / glitch zone.
+ *
+ * @example
+ * ```ts
+ * asciiBackground('#hero', { type: 'grid' });
+ * ```
+ */
+interface GridBackgroundOptions {
+    /** Font size in CSS pixels (default: 12). */
+    fontSize?: number;
+    /** Character set (default: '·-=+|/'). */
+    chars?: string;
+    /** Accent / scan-band colour (default: '#d4ff00'). */
+    accentColor?: string;
+    /** Custom base character colour (any CSS colour string). */
+    color?: string;
+    /** Number of scan bands visible at once (default: 3). */
+    bands?: number;
+    /** Band travel speed (default: 1). */
+    speed?: number;
+    /** Band width as fraction of canvas height (default: 0.12). */
+    bandWidth?: number;
+    /** Enable cursor disruption glitch zone (default: true). */
+    glitch?: boolean;
+    /** Light mode (default: false). */
+    lightMode?: boolean;
+}
+declare function renderGridBackground(ctx: CanvasRenderingContext2D, width: number, height: number, time: number, mousePos?: {
+    x: number;
+    y: number;
+}, options?: GridBackgroundOptions): void;
+interface AuroraBackgroundOptions {
+    /** Character grid density. Default 14. */
+    fontSize?: number;
+    /** Character ramp from sparse to dense. Default fine gradient ramp. */
+    chars?: string;
+    /** Base character color. Default theme-aware white/black. */
+    color?: string;
+    /** Accent color for intensity peaks. Default '#d4ff00'. */
+    accentColor?: string;
+    /** Animation speed multiplier. Default 1. */
+    speed?: number;
+    /** Number of wave layers stacked. More = richer interference. Default 5. */
+    layers?: number;
+    /** Wave spread/softness — higher = broader, more diffuse bands. Default 1.2. */
+    softness?: number;
+    /** Mouse distortion radius (0–1). Elegant ripple that follows the cursor. Default 0.2. */
+    mouseRipple?: number;
+    /** Force light mode (dark chars on light bg). Default false. */
+    lightMode?: boolean;
+}
+declare function renderAuroraBackground(ctx: CanvasRenderingContext2D, width: number, height: number, time: number, mousePos?: {
+    x: number;
+    y: number;
+}, options?: AuroraBackgroundOptions): void;
 /**
  * Drop-in helper that mounts an interactive ASCII wave background onto any
  * element. Injects a canvas, wires DPR resize, mouse tracking, and the RAF
@@ -330,14 +453,17 @@ declare function renderStarsBackground(ctx: CanvasRenderingContext2D, width: num
  * useEffect(() => asciiBackground(ref.current).destroy, []);
  * ```
  */
-interface AsciiBackgroundOptions extends WaveBackgroundOptions, RainBackgroundOptions, StarsBackgroundOptions {
+interface AsciiBackgroundOptions extends WaveBackgroundOptions, RainBackgroundOptions, StarsBackgroundOptions, PulseBackgroundOptions, NoiseBackgroundOptions, GridBackgroundOptions, AuroraBackgroundOptions {
     /**
      * Which background to render (default: 'wave').
      * - 'wave'  — interactive ASCII field with vortex, sparkles, breathe
      * - 'rain'  — digital column rain (Matrix-style falling characters)
      * - 'stars' — 3D star-warp / hyperspace (chars fly toward the viewer)
+     * - 'pulse' — concentric ASCII ripples radiating from the mouse position
+     * - 'noise' — slow-drifting organic fractal noise field
+     * - 'grid'  — CRT-style horizontal scan bands with cursor glitch zone
      */
-    type?: 'wave' | 'rain' | 'stars';
+    type?: 'wave' | 'rain' | 'stars' | 'pulse' | 'noise' | 'grid' | 'aurora';
     /** CSS opacity applied to the canvas element (default: 0.2) */
     opacity?: number;
     /** Extra CSS class names added to the injected canvas */
@@ -383,4 +509,4 @@ interface WebGLRenderer {
  */
 declare function tryCreateWebGLRenderer(canvas: HTMLCanvasElement): WebGLRenderer | null;
 
-export { ART_STYLE_PRESETS, type AnimationStyle, type ArtStyle, type AsciiBackgroundOptions, type AsciiCell, type AsciiFrame, type AsciiOptions, type AsciiResult, type AsciifySimpleOptions, CHARSETS, type CharsetKey, type ColorMode, DEFAULT_OPTIONS, HOVER_PRESETS, type HoverEffect, type HoverPreset, type MountWaveOptions, type RainBackgroundOptions, type RenderMode, type SourceType, type StarsBackgroundOptions, type WaveBackgroundOptions, type WebGLRenderer, asciiBackground, asciify, asciifyGif, asciifyVideo, generateAnimatedEmbedCode, generateEmbedCode, gifToAsciiFrames, imageToAsciiFrame, mountWaveBackground, renderFrameToCanvas, renderRainBackground, renderStarsBackground, renderWaveBackground, tryCreateWebGLRenderer, videoToAsciiFrames };
+export { ART_STYLE_PRESETS, type AnimationStyle, type ArtStyle, type AsciiBackgroundOptions, type AsciiCell, type AsciiFrame, type AsciiOptions, type AsciiResult, type AsciifySimpleOptions, type AuroraBackgroundOptions, CHARSETS, type CharsetKey, type ColorMode, DEFAULT_OPTIONS, type GridBackgroundOptions, HOVER_PRESETS, type HoverEffect, type HoverPreset, type MountWaveOptions, type NoiseBackgroundOptions, type PulseBackgroundOptions, type RainBackgroundOptions, type RenderMode, type SourceType, type StarsBackgroundOptions, type WaveBackgroundOptions, type WebGLRenderer, asciiBackground, asciify, asciifyGif, asciifyVideo, generateAnimatedEmbedCode, generateEmbedCode, gifToAsciiFrames, imageToAsciiFrame, mountWaveBackground, renderAuroraBackground, renderFrameToCanvas, renderGridBackground, renderNoiseBackground, renderPulseBackground, renderRainBackground, renderStarsBackground, renderWaveBackground, tryCreateWebGLRenderer, videoToAsciiFrames };

package/dist/index.js

@@ -379,7 +379,7 @@ async function gifToAsciiFrames(buffer, options, targetWidth, targetHeight, onPr
       prevCtx.clearRect(0, 0, logicalW, logicalH);
       prevCtx.drawImage(compCanvas, 0, 0);
     }
-    const frameImageData = new ImageData(patch, dims.width, dims.height);
+    const frameImageData = new ImageData(new Uint8ClampedArray(patch.buffer), dims.width, dims.height);
     const tempCanvas = document.createElement("canvas");
     tempCanvas.width = dims.width;
     tempCanvas.height = dims.height;
@@ -830,7 +830,7 @@ async function asciifyVideo(source, canvas, { fontSize = 10, style = "classic",
     cancelAnimationFrame(animId);
   };
 }
-var EMBED_CDN_VERSION = "1.0.14";
+var EMBED_CDN_VERSION = "1.0.16";
 function buildEmbedOpts(options, rows, cols, width, height, fps, animated) {
   const o = {
     r: rows,
@@ -1118,6 +1118,303 @@ function renderStarsBackground(ctx, width, height, time, mousePos = { x: 0.5, y:
   }
   ctx.textAlign = "left";
 }
+function renderPulseBackground(ctx, width, height, time, mousePos = { x: 0.5, y: 0.5 }, options = {}) {
+  const {
+    fontSize = 13,
+    chars = " .:-=+*#%@",
+    accentColor = "#d4ff00",
+    color,
+    rings = 6,
+    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;
+  if (lightMode) {
+    br = 0;
+    bg2 = 0;
+    bb = 0;
+  }
+  if (color) {
+    const p = _parseColor(color);
+    if (p) {
+      br = p.r;
+      bg2 = p.g;
+      bb = 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++) {
+    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);
+    }
+  }
+}
+function renderNoiseBackground(ctx, width, height, time, mousePos = { x: 0.5, y: 0.5 }, options = {}) {
+  const {
+    fontSize = 14,
+    chars = " .\xB7:;=+*#%@\u2591\u2592\u2593",
+    accentColor = "#d4ff00",
+    color,
+    octaves = 4,
+    speed = 1,
+    scale = 1,
+    accentThreshold = 0.78,
+    mouseWarp = 0.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 br = 255, bgc = 255, bb = 255;
+  if (lightMode) {
+    br = 0;
+    bgc = 0;
+    bb = 0;
+  }
+  if (color) {
+    const p = _parseColor(color);
+    if (p) {
+      br = p.r;
+      bgc = p.g;
+      bb = 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 noiseScale = 0.035 * scale;
+  const t = time * speed;
+  const oct = Math.min(6, Math.max(1, octaves));
+  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;
+      norm += amp;
+      amp *= 0.5;
+      freq *= 2.1;
+    }
+    return v / norm;
+  };
+  for (let row = 0; row < rows; row++) {
+    for (let col = 0; col < cols; col++) {
+      const nx = col * noiseScale + t * 0.06;
+      const ny = row * noiseScale * 1.3 - t * 0.04;
+      const dx = col / cols - mousePos.x;
+      const dy = row / rows - mousePos.y;
+      const dist = Math.sqrt(dx * dx + dy * dy);
+      const warp = mouseWarp > 0 ? Math.max(0, 1 - dist / mouseWarp) * 0.12 : 0;
+      const wx = nx + warp * Math.sin(t * 1.3 + dy * 8);
+      const wy = ny + warp * Math.cos(t * 0.9 + dx * 8);
+      const raw = fbmN(wx, wy);
+      const norm2 = raw * 0.5 + 0.5;
+      if (norm2 < 0.12) continue;
+      const charIdx = Math.floor(norm2 * (chars.length - 1));
+      const ch = chars[charIdx];
+      if (ch === " ") continue;
+      const isAccent = norm2 > accentThreshold;
+      const alpha = lightMode ? norm2 * 0.2 : norm2 * 0.13;
+      ctx.fillStyle = isAccent ? `rgba(${acR},${acG},${acB},${lightMode ? 0.42 : 0.28})` : `rgba(${br},${bgc},${bb},${alpha})`;
+      ctx.fillText(ch, col * charW, row * lineH);
+    }
+  }
+}
+function renderGridBackground(ctx, width, height, time, mousePos = { x: 0.5, y: 0.5 }, options = {}) {
+  const {
+    fontSize = 12,
+    chars = "\xB7-=+|/",
+    accentColor = "#d4ff00",
+    color,
+    bands = 3,
+    speed = 1,
+    bandWidth = 0.12,
+    glitch = true,
+    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 br = 255, bgv = 255, bb = 255;
+  if (lightMode) {
+    br = 0;
+    bgv = 0;
+    bb = 0;
+  }
+  if (color) {
+    const p = _parseColor(color);
+    if (p) {
+      br = p.r;
+      bgv = p.g;
+      bb = 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++) {
+    for (let col = 0; col < cols; col++) {
+      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 gridBase = (gridSeed * 0.5 + 0.5) * 0.35;
+      let glitchBump = 0;
+      if (glitch) {
+        const dx = col / cols - mousePos.x;
+        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);
+          glitchBump = Math.max(0, 1 - d / 0.18) * (g > 0.5 ? g - 0.3 : 0);
+        }
+      }
+      const intensity = Math.min(1, gridBase + bandIntensity * 0.8 + glitchBump * 0.6);
+      if (intensity < 0.04) continue;
+      const charIdx = Math.floor(intensity * (chars.length - 1));
+      const ch = chars[charIdx];
+      const isAccent = bandIntensity > 0.55;
+      const alpha = lightMode ? intensity * 0.2 : intensity * 0.12;
+      ctx.fillStyle = isAccent ? `rgba(${acR},${acG},${acB},${lightMode ? 0.46 : 0.28})` : `rgba(${br},${bgv},${bb},${alpha})`;
+      ctx.fillText(ch, col * charW, row * lineH);
+    }
+  }
+}
+function renderAuroraBackground(ctx, width, height, time, mousePos = { x: 0.5, y: 0.5 }, options = {}) {
+  const {
+    fontSize = 14,
+    chars = " \xB7\u2219\u2022:;+=\u2261\u2263#@",
+    color,
+    accentColor = "#d4ff00",
+    speed = 1,
+    layers = 5,
+    softness = 1.2,
+    mouseRipple = 0.2,
+    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 layerParams = [];
+  for (let l = 0; l < layers; l++) {
+    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
+    });
+  }
+  for (let row = 0; row < rows; row++) {
+    const ny = row / rows;
+    for (let col = 0; col < cols; col++) {
+      const nx = col / cols;
+      const mdx = nx - mousePos.x;
+      const mdy = ny - mousePos.y;
+      const md = Math.sqrt(mdx * mdx + mdy * mdy);
+      const warp = mouseRipple * Math.exp(-md * md / 0.06);
+      const wx = nx + mdx * warp;
+      const wy = ny + mdy * warp;
+      let sum = 0;
+      let totalAmp = 0;
+      for (let l = 0; l < layers; l++) {
+        const { fx, fy, phase, dt, amp } = layerParams[l];
+        const wave = Math.sin(wx * fx * Math.PI * 2 + t * dt + phase) * Math.cos(wy * fy * Math.PI * 2 + t * dt * 0.7 + phase * 1.3);
+        sum += wave * amp;
+        totalAmp += amp;
+      }
+      const rawVal = sum / totalAmp;
+      const curved = 0.5 + 0.5 * Math.tanh(rawVal * softness * 2.2);
+      if (curved < 0.12) continue;
+      const normalized = (curved - 0.12) / 0.88;
+      const charIdx = Math.min(chars.length - 1, Math.floor(normalized * chars.length));
+      const ch = chars[charIdx];
+      const isAccent = curved > 0.82;
+      const alpha = lightMode ? curved * 0.18 : curved * 0.14;
+      ctx.fillStyle = isAccent ? `rgba(${acR},${acG},${acB},${lightMode ? 0.5 : 0.32})` : `rgba(${cr},${cg},${cb},${alpha})`;
+      ctx.fillText(ch, col * charW, row * lineH);
+    }
+  }
+}
 function _parseColor(c) {
   const hex = c.match(/^#([0-9a-f]{3,8})$/i)?.[1];
   if (hex) {
@@ -1186,10 +1483,34 @@ function asciiBackground(target, options = {}) {
     lightMode: renderOpts.lightMode !== void 0 ? renderOpts.lightMode : isLight(),
     color: color ?? renderOpts.color
   });
+  const buildPulseOpts = () => ({
+    ...renderOpts,
+    lightMode: renderOpts.lightMode !== void 0 ? renderOpts.lightMode : isLight(),
+    color: color ?? renderOpts.color
+  });
+  const buildNoiseOpts = () => ({
+    ...renderOpts,
+    lightMode: renderOpts.lightMode !== void 0 ? renderOpts.lightMode : isLight(),
+    color: color ?? renderOpts.color
+  });
+  const buildGridOpts = () => ({
+    ...renderOpts,
+    lightMode: renderOpts.lightMode !== void 0 ? renderOpts.lightMode : isLight(),
+    color: color ?? renderOpts.color
+  });
+  const buildAuroraOpts = () => ({
+    ...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();
     else if (type === "stars") optsRef.current = buildStarsOpts();
+    else if (type === "pulse") optsRef.current = buildPulseOpts();
+    else if (type === "noise") optsRef.current = buildNoiseOpts();
+    else if (type === "grid") optsRef.current = buildGridOpts();
+    else if (type === "aurora") optsRef.current = buildAuroraOpts();
     else optsRef.current = buildWaveOpts();
   };
   rebuildOpts();
@@ -1222,6 +1543,14 @@ function asciiBackground(target, options = {}) {
       renderRainBackground(ctx, r.width, r.height, time, optsRef.current);
     } else if (type === "stars") {
       renderStarsBackground(ctx, r.width, r.height, time, smoothMouse, optsRef.current);
+    } else if (type === "pulse") {
+      renderPulseBackground(ctx, r.width, r.height, time, smoothMouse, optsRef.current);
+    } else if (type === "noise") {
+      renderNoiseBackground(ctx, r.width, r.height, time, smoothMouse, optsRef.current);
+    } else if (type === "grid") {
+      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 {
       renderWaveBackground(ctx, r.width, r.height, time, smoothMouse, optsRef.current);
     }
@@ -1690,6 +2019,6 @@ function tryCreateWebGLRenderer(canvas) {
   }
 }
 
-export { ART_STYLE_PRESETS, CHARSETS, DEFAULT_OPTIONS, HOVER_PRESETS, asciiBackground, asciify, asciifyGif, asciifyVideo, generateAnimatedEmbedCode, generateEmbedCode, gifToAsciiFrames, imageToAsciiFrame, mountWaveBackground, renderFrameToCanvas, renderRainBackground, renderStarsBackground, renderWaveBackground, tryCreateWebGLRenderer, videoToAsciiFrames };
+export { ART_STYLE_PRESETS, CHARSETS, DEFAULT_OPTIONS, HOVER_PRESETS, asciiBackground, asciify, asciifyGif, asciifyVideo, generateAnimatedEmbedCode, generateEmbedCode, gifToAsciiFrames, imageToAsciiFrame, mountWaveBackground, renderAuroraBackground, renderFrameToCanvas, renderGridBackground, renderNoiseBackground, renderPulseBackground, renderRainBackground, renderStarsBackground, renderWaveBackground, tryCreateWebGLRenderer, videoToAsciiFrames };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map