asciify-engine 1.0.13 → 1.0.14

package/dist/index.d.cts

@@ -251,6 +251,63 @@ declare function renderWaveBackground(ctx: CanvasRenderingContext2D, width: numb
     x: number;
     y: number;
 }, options?: WaveBackgroundOptions): void;
+/**
+ * Renders a digital-rain ASCII background — independent columns of falling
+ * characters each with a glowing head and fading tail. Deterministic and
+ * stateless: derived entirely from elapsed time.
+ *
+ * @example
+ * ```ts
+ * asciiBackground('#hero', { type: 'rain' });
+ * ```
+ */
+interface RainBackgroundOptions {
+    fontSize?: number;
+    /** Characters drawn in columns (one picked randomly per cell per frame). */
+    chars?: string;
+    /** Head / accent colour (default: '#d4ff00'). */
+    accentColor?: string;
+    /** Custom character colour (any CSS colour string). */
+    color?: string;
+    /** Global speed multiplier (default: 1). */
+    speed?: number;
+    /** Fraction of columns active at once 0-1 (default: 0.55). */
+    density?: number;
+    /** Number of cells in the fading tail (default: 14). */
+    tailLength?: number;
+    /** Light mode: dark chars on light background (default: false). */
+    lightMode?: boolean;
+}
+declare function renderRainBackground(ctx: CanvasRenderingContext2D, width: number, height: number, time: number, options?: RainBackgroundOptions): void;
+/**
+ * Renders a 3-D star-warp / hyperspace ASCII background — ASCII chars fly
+ * outward from a vanishing point that gently follows the mouse cursor.
+ * Stars scale up and brighten as they approach the screen edge.
+ *
+ * @example
+ * ```ts
+ * asciiBackground('#hero', { type: 'stars' });
+ * ```
+ */
+interface StarsBackgroundOptions {
+    fontSize?: number;
+    /** Characters used as stars (sparse = more authentic). */
+    chars?: string;
+    /** Accent/trail colour for fast near-edge stars (default: '#d4ff00'). */
+    accentColor?: string;
+    /** Custom base colour (any CSS colour string). */
+    color?: string;
+    /** Global speed multiplier (default: 1). */
+    speed?: number;
+    /** Number of star particles (default: 180). */
+    count?: number;
+    /** Light mode (default: false). */
+    lightMode?: boolean;
+}
+declare function renderStarsBackground(ctx: CanvasRenderingContext2D, width: number, height: number, time: number, mousePos?: {
+    x: number;
+    y: number;
+}, options?: StarsBackgroundOptions): 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
@@ -273,7 +330,14 @@ declare function renderWaveBackground(ctx: CanvasRenderingContext2D, width: numb
  * useEffect(() => asciiBackground(ref.current).destroy, []);
  * ```
  */
-interface AsciiBackgroundOptions extends WaveBackgroundOptions {
+interface AsciiBackgroundOptions extends WaveBackgroundOptions, RainBackgroundOptions, StarsBackgroundOptions {
+    /**
+     * 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)
+     */
+    type?: 'wave' | 'rain' | 'stars';
     /** CSS opacity applied to the canvas element (default: 0.2) */
     opacity?: number;
     /** Extra CSS class names added to the injected canvas */
@@ -283,14 +347,13 @@ interface AsciiBackgroundOptions extends WaveBackgroundOptions {
     /**
      * Colour scheme handling (default: 'auto').
      * - 'auto'  — follows the system prefers-color-scheme and updates live
-     * - 'dark'  — always render dark-on-dark (bright chars on dark bg)
+     * - 'dark'  — always render bright chars on dark background
      * - 'light' — always render dark chars on light background
      */
     colorScheme?: 'auto' | 'light' | 'dark';
     /**
      * Custom character colour. Accepts any CSS colour string: hex, rgb(), hsl().
-     * When set, overrides the default white/black colour for the ASCII chars.
-     * The accent colour remains separate — use `accentColor` to change it.
+     * Overrides the default white/black for the ASCII chars.
      * @example '#6b8700'
      */
     color?: string;
@@ -320,4 +383,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 RenderMode, type SourceType, type WaveBackgroundOptions, type WebGLRenderer, asciiBackground, asciify, asciifyGif, asciifyVideo, generateAnimatedEmbedCode, generateEmbedCode, gifToAsciiFrames, imageToAsciiFrame, mountWaveBackground, renderFrameToCanvas, renderWaveBackground, tryCreateWebGLRenderer, videoToAsciiFrames };
+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 };

package/dist/index.d.ts

@@ -251,6 +251,63 @@ declare function renderWaveBackground(ctx: CanvasRenderingContext2D, width: numb
     x: number;
     y: number;
 }, options?: WaveBackgroundOptions): void;
+/**
+ * Renders a digital-rain ASCII background — independent columns of falling
+ * characters each with a glowing head and fading tail. Deterministic and
+ * stateless: derived entirely from elapsed time.
+ *
+ * @example
+ * ```ts
+ * asciiBackground('#hero', { type: 'rain' });
+ * ```
+ */
+interface RainBackgroundOptions {
+    fontSize?: number;
+    /** Characters drawn in columns (one picked randomly per cell per frame). */
+    chars?: string;
+    /** Head / accent colour (default: '#d4ff00'). */
+    accentColor?: string;
+    /** Custom character colour (any CSS colour string). */
+    color?: string;
+    /** Global speed multiplier (default: 1). */
+    speed?: number;
+    /** Fraction of columns active at once 0-1 (default: 0.55). */
+    density?: number;
+    /** Number of cells in the fading tail (default: 14). */
+    tailLength?: number;
+    /** Light mode: dark chars on light background (default: false). */
+    lightMode?: boolean;
+}
+declare function renderRainBackground(ctx: CanvasRenderingContext2D, width: number, height: number, time: number, options?: RainBackgroundOptions): void;
+/**
+ * Renders a 3-D star-warp / hyperspace ASCII background — ASCII chars fly
+ * outward from a vanishing point that gently follows the mouse cursor.
+ * Stars scale up and brighten as they approach the screen edge.
+ *
+ * @example
+ * ```ts
+ * asciiBackground('#hero', { type: 'stars' });
+ * ```
+ */
+interface StarsBackgroundOptions {
+    fontSize?: number;
+    /** Characters used as stars (sparse = more authentic). */
+    chars?: string;
+    /** Accent/trail colour for fast near-edge stars (default: '#d4ff00'). */
+    accentColor?: string;
+    /** Custom base colour (any CSS colour string). */
+    color?: string;
+    /** Global speed multiplier (default: 1). */
+    speed?: number;
+    /** Number of star particles (default: 180). */
+    count?: number;
+    /** Light mode (default: false). */
+    lightMode?: boolean;
+}
+declare function renderStarsBackground(ctx: CanvasRenderingContext2D, width: number, height: number, time: number, mousePos?: {
+    x: number;
+    y: number;
+}, options?: StarsBackgroundOptions): 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
@@ -273,7 +330,14 @@ declare function renderWaveBackground(ctx: CanvasRenderingContext2D, width: numb
  * useEffect(() => asciiBackground(ref.current).destroy, []);
  * ```
  */
-interface AsciiBackgroundOptions extends WaveBackgroundOptions {
+interface AsciiBackgroundOptions extends WaveBackgroundOptions, RainBackgroundOptions, StarsBackgroundOptions {
+    /**
+     * 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)
+     */
+    type?: 'wave' | 'rain' | 'stars';
     /** CSS opacity applied to the canvas element (default: 0.2) */
     opacity?: number;
     /** Extra CSS class names added to the injected canvas */
@@ -283,14 +347,13 @@ interface AsciiBackgroundOptions extends WaveBackgroundOptions {
     /**
      * Colour scheme handling (default: 'auto').
      * - 'auto'  — follows the system prefers-color-scheme and updates live
-     * - 'dark'  — always render dark-on-dark (bright chars on dark bg)
+     * - 'dark'  — always render bright chars on dark background
      * - 'light' — always render dark chars on light background
      */
     colorScheme?: 'auto' | 'light' | 'dark';
     /**
      * Custom character colour. Accepts any CSS colour string: hex, rgb(), hsl().
-     * When set, overrides the default white/black colour for the ASCII chars.
-     * The accent colour remains separate — use `accentColor` to change it.
+     * Overrides the default white/black for the ASCII chars.
      * @example '#6b8700'
      */
     color?: string;
@@ -320,4 +383,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 RenderMode, type SourceType, type WaveBackgroundOptions, type WebGLRenderer, asciiBackground, asciify, asciifyGif, asciifyVideo, generateAnimatedEmbedCode, generateEmbedCode, gifToAsciiFrames, imageToAsciiFrame, mountWaveBackground, renderFrameToCanvas, renderWaveBackground, tryCreateWebGLRenderer, videoToAsciiFrames };
+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 };

package/dist/index.js

@@ -830,7 +830,7 @@ async function asciifyVideo(source, canvas, { fontSize = 10, style = "classic",
     cancelAnimationFrame(animId);
   };
 }
-var EMBED_CDN_VERSION = "1.0.12";
+var EMBED_CDN_VERSION = "1.0.14";
 function buildEmbedOpts(options, rows, cols, width, height, fps, animated) {
   const o = {
     r: rows,
@@ -997,6 +997,127 @@ function renderWaveBackground(ctx, width, height, time, mousePos = { x: 0.5, y:
     }
   }
 }
+function renderRainBackground(ctx, width, height, time, options = {}) {
+  const {
+    fontSize = 13,
+    chars = "0123456789ABCDEF@#$&*+=/<>",
+    accentColor = "#d4ff00",
+    color,
+    speed = 1,
+    density = 0.55,
+    tailLength = 14,
+    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, bg = 255, bb = 255;
+  if (lightMode) {
+    br = 0;
+    bg = 0;
+    bb = 0;
+  }
+  if (color) {
+    const p = _parseColor(color);
+    if (p) {
+      br = p.r;
+      bg = 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 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;
+    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 ch = chars[Math.floor(charSeed * chars.length)];
+      const t = 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;
+        ctx.fillStyle = `rgba(${br},${bg},${bb},${alpha})`;
+      }
+      ctx.fillText(ch, x, y);
+    }
+  }
+}
+function renderStarsBackground(ctx, width, height, time, mousePos = { x: 0.5, y: 0.5 }, options = {}) {
+  const {
+    fontSize = 14,
+    chars = " . \xB7 * + \xB0 \u2605",
+    accentColor = "#d4ff00",
+    color,
+    speed = 1,
+    count = 180,
+    lightMode = false
+  } = options;
+  ctx.clearRect(0, 0, width, height);
+  ctx.textBaseline = "middle";
+  ctx.textAlign = "center";
+  const cx = width * (0.2 + mousePos.x * 0.6);
+  const cy = height * (0.2 + mousePos.y * 0.6);
+  const maxR = Math.sqrt(width * width + height * height) * 0.65;
+  let br = 255, bg = 255, bb = 255;
+  if (lightMode) {
+    br = 0;
+    bg = 0;
+    bb = 0;
+  }
+  if (color) {
+    const p = _parseColor(color);
+    if (p) {
+      br = p.r;
+      bg = 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 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 r = (time * baseSpd * speed * 0.22 + phase) % 1;
+    const x = cx + Math.cos(angle) * r * maxR;
+    const y = cy + Math.sin(angle) * r * maxR;
+    if (x < -20 || x > width + 20 || y < -20 || y > height + 20) continue;
+    const sz = Math.max(6, fontSize * (0.4 + r * 0.9));
+    ctx.font = `${sz}px monospace`;
+    const charIdx = Math.min(charArr.length - 1, Math.floor(r * charArr.length));
+    const ch = charArr[charIdx];
+    const isAccent = r > 0.72;
+    const alpha = lightMode ? r * 0.28 : r * 0.2;
+    ctx.fillStyle = isAccent ? `rgba(${acR},${acG},${acB},${Math.min(lightMode ? 0.45 : 0.32, alpha * 2.2)})` : `rgba(${br},${bg},${bb},${alpha})`;
+    ctx.fillText(ch, x, y);
+  }
+  ctx.textAlign = "left";
+}
 function _parseColor(c) {
   const hex = c.match(/^#([0-9a-f]{3,8})$/i)?.[1];
   if (hex) {
@@ -1009,6 +1130,7 @@ function _parseColor(c) {
 }
 function asciiBackground(target, options = {}) {
   const {
+    type = "wave",
     opacity = 0.2,
     className,
     zIndex = 0,
@@ -1048,16 +1170,31 @@ function asciiBackground(target, options = {}) {
     if (colorScheme === "dark") return false;
     return mq.matches;
   };
-  let parsedColor = null;
-  if (color) parsedColor = _parseColor(color);
-  const buildOpts = () => ({
+  const parsedColor = color ? _parseColor(color) : null;
+  const buildWaveOpts = () => ({
     ...renderOpts,
     lightMode: renderOpts.lightMode !== void 0 ? renderOpts.lightMode : isLight(),
     baseColor: parsedColor ? `rgba(${parsedColor.r},${parsedColor.g},${parsedColor.b},{a})` : renderOpts.baseColor
   });
-  const optsRef = { current: buildOpts() };
+  const buildRainOpts = () => ({
+    ...renderOpts,
+    lightMode: renderOpts.lightMode !== void 0 ? renderOpts.lightMode : isLight(),
+    color: color ?? renderOpts.color
+  });
+  const buildStarsOpts = () => ({
+    ...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 optsRef.current = buildWaveOpts();
+  };
+  rebuildOpts();
   const onSchemeChange = () => {
-    optsRef.current = buildOpts();
+    rebuildOpts();
   };
   if (colorScheme === "auto") mq.addEventListener("change", onSchemeChange);
   const resize = () => {
@@ -1081,7 +1218,13 @@ function asciiBackground(target, options = {}) {
     smoothMouse.x += (mouse.x - smoothMouse.x) * 0.07;
     smoothMouse.y += (mouse.y - smoothMouse.y) * 0.07;
     const r = container.getBoundingClientRect();
-    renderWaveBackground(ctx, r.width, r.height, time, smoothMouse, optsRef.current);
+    if (type === "rain") {
+      renderRainBackground(ctx, r.width, r.height, time, optsRef.current);
+    } else if (type === "stars") {
+      renderStarsBackground(ctx, r.width, r.height, time, smoothMouse, optsRef.current);
+    } else {
+      renderWaveBackground(ctx, r.width, r.height, time, smoothMouse, optsRef.current);
+    }
     time += 0.016;
     raf = requestAnimationFrame(tick);
   };
@@ -1547,6 +1690,6 @@ function tryCreateWebGLRenderer(canvas) {
   }
 }
 
-export { ART_STYLE_PRESETS, CHARSETS, DEFAULT_OPTIONS, HOVER_PRESETS, asciiBackground, asciify, asciifyGif, asciifyVideo, generateAnimatedEmbedCode, generateEmbedCode, gifToAsciiFrames, imageToAsciiFrame, mountWaveBackground, renderFrameToCanvas, renderWaveBackground, tryCreateWebGLRenderer, videoToAsciiFrames };
+export { ART_STYLE_PRESETS, CHARSETS, DEFAULT_OPTIONS, HOVER_PRESETS, asciiBackground, asciify, asciifyGif, asciifyVideo, generateAnimatedEmbedCode, generateEmbedCode, gifToAsciiFrames, imageToAsciiFrame, mountWaveBackground, renderFrameToCanvas, renderRainBackground, renderStarsBackground, renderWaveBackground, tryCreateWebGLRenderer, videoToAsciiFrames };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map