asciify-engine 1.0.9 → 1.0.11

package/dist/index.d.cts

@@ -251,6 +251,34 @@ declare function renderWaveBackground(ctx: CanvasRenderingContext2D, width: numb
     x: number;
     y: number;
 }, options?: WaveBackgroundOptions): void;
+/**
+ * Drop-in helper that mounts an interactive ASCII wave background onto any
+ * element. Creates and injects a `<canvas>`, wires mouse tracking, DPR
+ * resize, and the RAF loop — all internally.
+ *
+ * Returns a `destroy()` function to clean everything up.
+ *
+ * @example
+ * ```ts
+ * // 1 line — that's it:
+ * import { mountWaveBackground } from 'asciify-engine';
+ * const { destroy } = mountWaveBackground('#hero', { opacity: 0.2 });
+ *
+ * // React:
+ * useEffect(() => mountWaveBackground(ref.current).destroy, []);
+ * ```
+ */
+interface MountWaveOptions extends WaveBackgroundOptions {
+    /** CSS opacity applied to the canvas element (default: 0.2) */
+    opacity?: number;
+    /** Extra CSS class names added to the injected canvas */
+    className?: string;
+    /** z-index of the canvas (default: 0) */
+    zIndex?: number;
+}
+declare function mountWaveBackground(target: string | HTMLElement, options?: MountWaveOptions): {
+    destroy: () => void;
+};
 
 interface WebGLRenderer {
     render(frame: AsciiFrame, options: AsciiOptions, displayW: number, displayH: number, time: number, hoverPos?: {
@@ -269,4 +297,4 @@ interface WebGLRenderer {
  */
 declare function tryCreateWebGLRenderer(canvas: HTMLCanvasElement): WebGLRenderer | null;
 
-export { ART_STYLE_PRESETS, type AnimationStyle, type ArtStyle, type AsciiCell, type AsciiFrame, type AsciiOptions, type AsciiResult, type AsciifySimpleOptions, CHARSETS, type CharsetKey, type ColorMode, DEFAULT_OPTIONS, HOVER_PRESETS, type HoverEffect, type HoverPreset, type RenderMode, type SourceType, type WaveBackgroundOptions, type WebGLRenderer, asciify, asciifyGif, asciifyVideo, generateAnimatedEmbedCode, generateEmbedCode, gifToAsciiFrames, imageToAsciiFrame, renderFrameToCanvas, renderWaveBackground, tryCreateWebGLRenderer, videoToAsciiFrames };
+export { ART_STYLE_PRESETS, type AnimationStyle, type ArtStyle, 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, asciify, asciifyGif, asciifyVideo, generateAnimatedEmbedCode, generateEmbedCode, gifToAsciiFrames, imageToAsciiFrame, mountWaveBackground, renderFrameToCanvas, renderWaveBackground, tryCreateWebGLRenderer, videoToAsciiFrames };

package/dist/index.d.ts

@@ -251,6 +251,34 @@ declare function renderWaveBackground(ctx: CanvasRenderingContext2D, width: numb
     x: number;
     y: number;
 }, options?: WaveBackgroundOptions): void;
+/**
+ * Drop-in helper that mounts an interactive ASCII wave background onto any
+ * element. Creates and injects a `<canvas>`, wires mouse tracking, DPR
+ * resize, and the RAF loop — all internally.
+ *
+ * Returns a `destroy()` function to clean everything up.
+ *
+ * @example
+ * ```ts
+ * // 1 line — that's it:
+ * import { mountWaveBackground } from 'asciify-engine';
+ * const { destroy } = mountWaveBackground('#hero', { opacity: 0.2 });
+ *
+ * // React:
+ * useEffect(() => mountWaveBackground(ref.current).destroy, []);
+ * ```
+ */
+interface MountWaveOptions extends WaveBackgroundOptions {
+    /** CSS opacity applied to the canvas element (default: 0.2) */
+    opacity?: number;
+    /** Extra CSS class names added to the injected canvas */
+    className?: string;
+    /** z-index of the canvas (default: 0) */
+    zIndex?: number;
+}
+declare function mountWaveBackground(target: string | HTMLElement, options?: MountWaveOptions): {
+    destroy: () => void;
+};
 
 interface WebGLRenderer {
     render(frame: AsciiFrame, options: AsciiOptions, displayW: number, displayH: number, time: number, hoverPos?: {
@@ -269,4 +297,4 @@ interface WebGLRenderer {
  */
 declare function tryCreateWebGLRenderer(canvas: HTMLCanvasElement): WebGLRenderer | null;
 
-export { ART_STYLE_PRESETS, type AnimationStyle, type ArtStyle, type AsciiCell, type AsciiFrame, type AsciiOptions, type AsciiResult, type AsciifySimpleOptions, CHARSETS, type CharsetKey, type ColorMode, DEFAULT_OPTIONS, HOVER_PRESETS, type HoverEffect, type HoverPreset, type RenderMode, type SourceType, type WaveBackgroundOptions, type WebGLRenderer, asciify, asciifyGif, asciifyVideo, generateAnimatedEmbedCode, generateEmbedCode, gifToAsciiFrames, imageToAsciiFrame, renderFrameToCanvas, renderWaveBackground, tryCreateWebGLRenderer, videoToAsciiFrames };
+export { ART_STYLE_PRESETS, type AnimationStyle, type ArtStyle, 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, asciify, asciifyGif, asciifyVideo, generateAnimatedEmbedCode, generateEmbedCode, gifToAsciiFrames, imageToAsciiFrame, mountWaveBackground, renderFrameToCanvas, renderWaveBackground, tryCreateWebGLRenderer, videoToAsciiFrames };

package/dist/index.js

@@ -720,7 +720,7 @@ function renderFrameToCanvas(ctx, frame, options, canvasWidth, canvasHeight, tim
 function serializeFrame(frame, fullColor) {
   const rows = frame.length;
   const cols = rows > 0 ? frame[0].length : 0;
-  const stride = fullColor ? 4 : 2;
+  const stride = fullColor ? 3 : 1;
   const buf = new Uint8Array(1 + rows * cols * stride);
   buf[0] = stride;
   let i = 1;
@@ -731,10 +731,8 @@ function serializeFrame(frame, fullColor) {
         buf[i++] = cell.r;
         buf[i++] = cell.g;
         buf[i++] = cell.b;
-        buf[i++] = cell.a;
       } else {
         buf[i++] = Math.round(0.299 * cell.r + 0.587 * cell.g + 0.114 * cell.b);
-        buf[i++] = cell.a;
       }
     }
   }
@@ -832,7 +830,7 @@ async function asciifyVideo(source, canvas, { fontSize = 10, style = "classic",
     cancelAnimationFrame(animId);
   };
 }
-var EMBED_CDN_VERSION = "1.0.9";
+var EMBED_CDN_VERSION = "1.0.11";
 function buildEmbedOpts(options, rows, cols, width, height, fps, animated) {
   const o = {
     r: rows,
@@ -999,6 +997,70 @@ function renderWaveBackground(ctx, width, height, time, mousePos = { x: 0.5, y:
     }
   }
 }
+function mountWaveBackground(target, options = {}) {
+  const { opacity = 0.2, className, zIndex = 0, ...renderOpts } = options;
+  const container = typeof target === "string" ? document.querySelector(target) : target;
+  if (!container) {
+    console.warn("[asciify] mountWaveBackground: target not found", target);
+    return { destroy: () => {
+    } };
+  }
+  const prevPosition = container.style.position;
+  if (getComputedStyle(container).position === "static") {
+    container.style.position = "relative";
+  }
+  const canvas = document.createElement("canvas");
+  canvas.style.cssText = [
+    "position:absolute",
+    "inset:0",
+    "width:100%",
+    "height:100%",
+    `opacity:${opacity}`,
+    "pointer-events:none",
+    `z-index:${zIndex}`
+  ].join(";");
+  if (className) canvas.className = className;
+  container.prepend(canvas);
+  const ctx = canvas.getContext("2d");
+  const dpr = window.devicePixelRatio || 1;
+  const mouse = { x: 0.5, y: 0.5 };
+  const smoothMouse = { x: 0.5, y: 0.5 };
+  const resize = () => {
+    const r = container.getBoundingClientRect();
+    canvas.width = r.width * dpr;
+    canvas.height = r.height * dpr;
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  };
+  resize();
+  const onMouseMove = (e) => {
+    const r = container.getBoundingClientRect();
+    mouse.x = (e.clientX - r.left) / r.width;
+    mouse.y = (e.clientY - r.top) / r.height;
+  };
+  const ro = new ResizeObserver(resize);
+  ro.observe(container);
+  window.addEventListener("mousemove", onMouseMove);
+  let time = 0;
+  let raf = 0;
+  const tick = () => {
+    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, renderOpts);
+    time += 0.016;
+    raf = requestAnimationFrame(tick);
+  };
+  raf = requestAnimationFrame(tick);
+  return {
+    destroy: () => {
+      cancelAnimationFrame(raf);
+      ro.disconnect();
+      window.removeEventListener("mousemove", onMouseMove);
+      canvas.remove();
+      container.style.position = prevPosition;
+    }
+  };
+}
 
 // src/webgl-engine.ts
 var VERT_SRC = (
@@ -1448,6 +1510,6 @@ function tryCreateWebGLRenderer(canvas) {
   }
 }
 
-export { ART_STYLE_PRESETS, CHARSETS, DEFAULT_OPTIONS, HOVER_PRESETS, asciify, asciifyGif, asciifyVideo, generateAnimatedEmbedCode, generateEmbedCode, gifToAsciiFrames, imageToAsciiFrame, renderFrameToCanvas, renderWaveBackground, tryCreateWebGLRenderer, videoToAsciiFrames };
+export { ART_STYLE_PRESETS, CHARSETS, DEFAULT_OPTIONS, HOVER_PRESETS, asciify, asciifyGif, asciifyVideo, generateAnimatedEmbedCode, generateEmbedCode, gifToAsciiFrames, imageToAsciiFrame, mountWaveBackground, renderFrameToCanvas, renderWaveBackground, tryCreateWebGLRenderer, videoToAsciiFrames };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map