asciify-engine 1.0.3 → 1.0.5

package/dist/index.d.cts

@@ -4,7 +4,7 @@ type AnimationStyle = 'none' | 'wave' | 'pulse' | 'rain' | 'breathe' | 'sparkle'
 type ArtStyle = 'classic' | 'particles' | 'letters' | 'claudeCode' | 'art' | 'terminal' | 'box' | 'lines';
 type HoverEffect = 'spotlight' | 'magnify' | 'repel' | 'glow' | 'colorShift';
 type HoverPreset = 'none' | 'subtle' | 'flashlight' | 'magnifier' | 'forceField' | 'neon' | 'fire' | 'ice';
-type SourceType = 'image' | 'video' | null;
+type SourceType = 'image' | 'video' | 'gif' | null;
 interface AsciiOptions {
     fontSize: number;
     charSpacing: number;
@@ -134,6 +134,31 @@ interface AsciifySimpleOptions {
  * await asciify(img, canvas, { fontSize: 8, style: 'letters' });
  */
 declare function asciify(source: HTMLImageElement | HTMLVideoElement | HTMLCanvasElement | string, canvas: HTMLCanvasElement, { fontSize, style, options }?: AsciifySimpleOptions): Promise<void>;
+/**
+ * Fetch a GIF, convert it to ASCII, and start an animation loop on a canvas.
+ * Returns a `stop()` function that cancels the loop.
+ *
+ * @example
+ * const stop = await asciifyGif('animation.gif', canvas);
+ * // later: stop();
+ *
+ * @example with style
+ * const stop = await asciifyGif('animation.gif', canvas, { style: 'letters' });
+ */
+declare function asciifyGif(source: string | ArrayBuffer, canvas: HTMLCanvasElement, { fontSize, style, options }?: AsciifySimpleOptions): Promise<() => void>;
+/**
+ * Convert a video element to ASCII art and start an animation loop on a canvas.
+ * Returns a `stop()` function that cancels the loop.
+ *
+ * @example
+ * const video = document.querySelector('video');
+ * const stop = await asciifyVideo(video, canvas);
+ * // later: stop();
+ *
+ * @example with style
+ * const stop = await asciifyVideo(video, canvas, { fontSize: 8, style: 'art' });
+ */
+declare function asciifyVideo(source: HTMLVideoElement | string, canvas: HTMLCanvasElement, { fontSize, style, options }?: AsciifySimpleOptions): Promise<() => void>;
 /**
  * Generate a self-contained HTML embed snippet for an ASCII image.
  * Features: canvas rendering, animation loop, hover effects.
@@ -162,4 +187,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 WebGLRenderer, asciify, generateAnimatedEmbedCode, generateEmbedCode, gifToAsciiFrames, imageToAsciiFrame, renderFrameToCanvas, 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 RenderMode, type SourceType, type WebGLRenderer, asciify, asciifyGif, asciifyVideo, generateAnimatedEmbedCode, generateEmbedCode, gifToAsciiFrames, imageToAsciiFrame, renderFrameToCanvas, tryCreateWebGLRenderer, videoToAsciiFrames };

package/dist/index.d.ts

@@ -4,7 +4,7 @@ type AnimationStyle = 'none' | 'wave' | 'pulse' | 'rain' | 'breathe' | 'sparkle'
 type ArtStyle = 'classic' | 'particles' | 'letters' | 'claudeCode' | 'art' | 'terminal' | 'box' | 'lines';
 type HoverEffect = 'spotlight' | 'magnify' | 'repel' | 'glow' | 'colorShift';
 type HoverPreset = 'none' | 'subtle' | 'flashlight' | 'magnifier' | 'forceField' | 'neon' | 'fire' | 'ice';
-type SourceType = 'image' | 'video' | null;
+type SourceType = 'image' | 'video' | 'gif' | null;
 interface AsciiOptions {
     fontSize: number;
     charSpacing: number;
@@ -134,6 +134,31 @@ interface AsciifySimpleOptions {
  * await asciify(img, canvas, { fontSize: 8, style: 'letters' });
  */
 declare function asciify(source: HTMLImageElement | HTMLVideoElement | HTMLCanvasElement | string, canvas: HTMLCanvasElement, { fontSize, style, options }?: AsciifySimpleOptions): Promise<void>;
+/**
+ * Fetch a GIF, convert it to ASCII, and start an animation loop on a canvas.
+ * Returns a `stop()` function that cancels the loop.
+ *
+ * @example
+ * const stop = await asciifyGif('animation.gif', canvas);
+ * // later: stop();
+ *
+ * @example with style
+ * const stop = await asciifyGif('animation.gif', canvas, { style: 'letters' });
+ */
+declare function asciifyGif(source: string | ArrayBuffer, canvas: HTMLCanvasElement, { fontSize, style, options }?: AsciifySimpleOptions): Promise<() => void>;
+/**
+ * Convert a video element to ASCII art and start an animation loop on a canvas.
+ * Returns a `stop()` function that cancels the loop.
+ *
+ * @example
+ * const video = document.querySelector('video');
+ * const stop = await asciifyVideo(video, canvas);
+ * // later: stop();
+ *
+ * @example with style
+ * const stop = await asciifyVideo(video, canvas, { fontSize: 8, style: 'art' });
+ */
+declare function asciifyVideo(source: HTMLVideoElement | string, canvas: HTMLCanvasElement, { fontSize, style, options }?: AsciifySimpleOptions): Promise<() => void>;
 /**
  * Generate a self-contained HTML embed snippet for an ASCII image.
  * Features: canvas rendering, animation loop, hover effects.
@@ -162,4 +187,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 WebGLRenderer, asciify, generateAnimatedEmbedCode, generateEmbedCode, gifToAsciiFrames, imageToAsciiFrame, renderFrameToCanvas, 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 RenderMode, type SourceType, type WebGLRenderer, asciify, asciifyGif, asciifyVideo, generateAnimatedEmbedCode, generateEmbedCode, gifToAsciiFrames, imageToAsciiFrame, renderFrameToCanvas, tryCreateWebGLRenderer, videoToAsciiFrames };

package/dist/index.js

@@ -756,6 +756,69 @@ async function asciify(source, canvas, { fontSize = 10, style = "classic", optio
   const { frame } = imageToAsciiFrame(el, merged, canvas.width, canvas.height);
   renderFrameToCanvas(ctx, frame, merged, canvas.width, canvas.height);
 }
+async function asciifyGif(source, canvas, { fontSize = 10, style = "classic", options = {} } = {}) {
+  const buffer = typeof source === "string" ? await fetch(source).then((r) => r.arrayBuffer()) : source;
+  const merged = { ...DEFAULT_OPTIONS, ...ART_STYLE_PRESETS[style], ...options, fontSize };
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("Could not get 2d context from canvas");
+  const { frames, fps } = await gifToAsciiFrames(buffer, merged, canvas.width, canvas.height);
+  let cancelled = false;
+  let animId;
+  let i = 0;
+  let last = performance.now();
+  const interval = 1e3 / fps;
+  const tick = (now) => {
+    if (cancelled) return;
+    if (now - last >= interval) {
+      renderFrameToCanvas(ctx, frames[i], merged, canvas.width, canvas.height);
+      i = (i + 1) % frames.length;
+      last = now;
+    }
+    animId = requestAnimationFrame(tick);
+  };
+  animId = requestAnimationFrame(tick);
+  return () => {
+    cancelled = true;
+    cancelAnimationFrame(animId);
+  };
+}
+async function asciifyVideo(source, canvas, { fontSize = 10, style = "classic", options = {} } = {}) {
+  let video;
+  if (typeof source === "string") {
+    video = document.createElement("video");
+    video.crossOrigin = "anonymous";
+    video.src = source;
+    await new Promise((resolve, reject) => {
+      video.onloadeddata = () => resolve();
+      video.onerror = () => reject(new Error(`Failed to load video: ${source}`));
+    });
+  } else {
+    video = source;
+  }
+  const merged = { ...DEFAULT_OPTIONS, ...ART_STYLE_PRESETS[style], ...options, fontSize };
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("Could not get 2d context from canvas");
+  const { frames, fps } = await videoToAsciiFrames(video, merged, canvas.width, canvas.height);
+  let cancelled = false;
+  let animId;
+  let i = 0;
+  let last = performance.now();
+  const interval = 1e3 / fps;
+  const tick = (now) => {
+    if (cancelled) return;
+    if (now - last >= interval) {
+      renderFrameToCanvas(ctx, frames[i], merged, canvas.width, canvas.height);
+      i = (i + 1) % frames.length;
+      last = now;
+    }
+    animId = requestAnimationFrame(tick);
+  };
+  animId = requestAnimationFrame(tick);
+  return () => {
+    cancelled = true;
+    cancelAnimationFrame(animId);
+  };
+}
 function generateEmbedCode(frame, options, width, height) {
   const rows = frame.length;
   if (rows === 0) return "";
@@ -1388,6 +1451,6 @@ function tryCreateWebGLRenderer(canvas) {
   }
 }
 
-export { ART_STYLE_PRESETS, CHARSETS, DEFAULT_OPTIONS, HOVER_PRESETS, asciify, generateAnimatedEmbedCode, generateEmbedCode, gifToAsciiFrames, imageToAsciiFrame, renderFrameToCanvas, tryCreateWebGLRenderer, videoToAsciiFrames };
+export { ART_STYLE_PRESETS, CHARSETS, DEFAULT_OPTIONS, HOVER_PRESETS, asciify, asciifyGif, asciifyVideo, generateAnimatedEmbedCode, generateEmbedCode, gifToAsciiFrames, imageToAsciiFrame, renderFrameToCanvas, tryCreateWebGLRenderer, videoToAsciiFrames };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map