asciify-engine 1.0.31 → 1.0.34

package/dist/index.d.cts

@@ -711,66 +711,108 @@ declare function renderTextBackground(ctx: CanvasRenderingContext2D, width: numb
     intensity?: number;
 } | null): void;
 
-/**
- * record() — capture a rolling frame buffer from a running ASCII canvas
- * and export it as a downloadable animated GIF or WebP data URL.
- *
- * Usage:
- * ```ts
- * const recorder = createRecorder(canvasEl, { fps: 15, maxFrames: 120 });
- * recorder.start();
- * // ... after a few seconds ...
- * const dataUrl = await recorder.stop(); // 'data:image/gif;base64,...'
- * ```
- */
-interface RecorderOptions {
-    /** Target capture frame rate (default: 15) */
-    fps?: number;
-    /** Maximum number of frames to buffer (default: 120 → 8 s at 15 fps) */
-    maxFrames?: number;
+interface SnapshotOptions {
     /**
-     * Output format.
-     * - 'gif'  — animated GIF via gif.js worker (requires gif.worker.js in public/)
-     * - 'webp' — animated WebP via MediaRecorder API (Chrome/Edge only)
-     * - 'png-sequence' — returns a JSON array of PNG data URLs (universal)
-     * Default: 'gif'
+     * Image format.
+     * - 'png'  — lossless (default)
+     * - 'jpeg' — smaller, no transparency
+     * - 'webp' — best compression with transparency
      */
-    format?: 'gif' | 'webp' | 'png-sequence';
-    /** GIF quality 1 (best) – 30 (smallest) — only used for format:'gif' (default: 10) */
+    format?: 'png' | 'jpeg' | 'webp';
+    /** 0–1 quality for jpeg/webp. Default: 0.92 */
     quality?: number;
     /**
-     * Scale factor applied to the canvas before capture (default: 1).
-     * Use 0.5 to halve dimensions and reduce file size.
+     * Scale factor applied before capture. Default: 1.
+     * Use 2 for a high-resolution export at 2× the canvas size.
      */
     scale?: number;
 }
-interface Recorder {
-    /** Start capturing frames from the canvas. */
-    start(): void;
-    /**
-     * Stop capturing and encode.
-     * Resolves with a data URL (gif/webp) or JSON string (png-sequence).
-     */
-    stop(): Promise<string>;
-    /** True while recording. */
-    readonly isRecording: boolean;
-    /** Number of frames captured so far. */
-    readonly frameCount: number;
-}
 /**
- * Create a Recorder bound to a canvas element.
+ * Capture a single frame from a canvas as a Blob.
+ *
+ * @example
+ * ```ts
+ * const blob = await captureSnapshot(canvas);
+ * const url = URL.createObjectURL(blob);
+ * ```
  */
-declare function createRecorder(canvas: HTMLCanvasElement, options?: RecorderOptions): Recorder;
+declare function captureSnapshot(canvas: HTMLCanvasElement, { format, quality, scale }?: SnapshotOptions): Promise<Blob>;
 /**
- * Convenience: record for a fixed duration and auto-download.
+ * Capture a single frame and immediately trigger a browser download.
  *
  * @example
  * ```ts
- * await recordAndDownload(canvasEl, 3000, { fps: 15, format: 'gif' });
+ * await snapshotAndDownload(canvas);
+ * await snapshotAndDownload(canvas, { format: 'jpeg', filename: 'my-art' });
  * ```
  */
-declare function recordAndDownload(canvas: HTMLCanvasElement, durationMs: number, options?: RecorderOptions & {
+declare function snapshotAndDownload(canvas: HTMLCanvasElement, options?: SnapshotOptions & {
     filename?: string;
 }): Promise<void>;
 
-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 CircuitBackgroundOptions, type ColorMode, DEFAULT_OPTIONS, type DnaBackgroundOptions, type FireBackgroundOptions, type GridBackgroundOptions, HOVER_PRESETS, type HoverEffect, type HoverPreset, type MorphBackgroundOptions, type MountWaveOptions, type NoiseBackgroundOptions, PALETTE_THEMES, type PaletteTheme, type PulseBackgroundOptions, type RainBackgroundOptions, type Recorder, type RecorderOptions, type RenderMode, type SilkBackgroundOptions, type SourceType, type StarsBackgroundOptions, type TerrainBackgroundOptions, type TextBackgroundOptions, type VoidBackgroundOptions, type WaveBackgroundOptions, asciiBackground, asciiText, asciiTextAnsi, asciify, asciifyGif, asciifyVideo, buildTextFrame, createRecorder, gifToAsciiFrames, imageToAsciiFrame, mountWaveBackground, recordAndDownload, renderAuroraBackground, renderCircuitBackground, renderDnaBackground, renderFireBackground, renderFrameToCanvas, renderGridBackground, renderMorphBackground, renderNoiseBackground, renderPulseBackground, renderRainBackground, renderSilkBackground, renderStarsBackground, renderTerrainBackground, renderTextBackground, renderVoidBackground, renderWaveBackground, videoToAsciiFrames };
+/**
+ * asciifyWebcam — live webcam → ASCII art on canvas.
+ *
+ * Requests camera access, attaches the stream to a hidden video element, and
+ * runs a rAF loop that converts each frame to ASCII and renders it onto a
+ * supplied canvas.
+ *
+ * @example
+ * const stop = await asciifyWebcam(canvas);
+ * // later: stop();
+ *
+ * @example
+ * const stop = await asciifyWebcam(canvas, {
+ *   fontSize: 8,
+ *   style: 'terminal',
+ *   mirror: true,                   // horizontal flip (selfie mode)
+ *   constraints: { facingMode: 'user' },
+ * });
+ */
+
+interface WebcamOptions {
+    /** Character size in pixels. Default: 10 */
+    fontSize?: number;
+    /** Art style preset. Default: 'classic' */
+    style?: ArtStyle;
+    /** Extra AsciiOptions merged on top of the preset */
+    options?: Partial<AsciiOptions>;
+    /**
+     * Called every frame to get the latest options. Takes priority over `options`.
+     * Use this to keep the rendering in sync with live UI controls without
+     * restarting the camera.
+     *
+     * @example
+     * const optionsRef = useRef(currentOptions);
+     * optionsRef.current = currentOptions;
+     * asciifyWebcam(canvas, { liveOptions: () => optionsRef.current });
+     */
+    liveOptions?: () => Partial<AsciiOptions>;
+    /**
+     * Flip the output horizontally so it reads like a mirror / selfie camera.
+     * Default: true
+     */
+    mirror?: boolean;
+    /**
+     * Passed directly to `getUserMedia({ video: constraints })`.
+     * Defaults to `{ facingMode: 'user' }`.
+     */
+    constraints?: MediaTrackConstraints;
+    /**
+     * Device pixel ratio used to compute logical render dimensions from the
+     * canvas's physical pixel size. Defaults to `window.devicePixelRatio ?? 1`.
+     * Set this when you size the canvas at physical resolution (e.g. width × dpr)
+     * so that ASCII column/row counts are based on CSS pixels, not physical ones.
+     */
+    dpr?: number;
+}
+/**
+ * Start a live webcam ASCII-art loop and render it onto `canvas`.
+ * Returns a `stop()` function that cancels the loop and releases the camera.
+ *
+ * Throws if the browser doesn't support `getUserMedia` or the user denies
+ * camera permission.
+ */
+declare function asciifyWebcam(canvas: HTMLCanvasElement, { fontSize, style, options, liveOptions, mirror, constraints, dpr: dprOverride, }?: WebcamOptions): Promise<() => void>;
+
+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 CircuitBackgroundOptions, type ColorMode, DEFAULT_OPTIONS, type DnaBackgroundOptions, type FireBackgroundOptions, type GridBackgroundOptions, HOVER_PRESETS, type HoverEffect, type HoverPreset, type MorphBackgroundOptions, type MountWaveOptions, type NoiseBackgroundOptions, PALETTE_THEMES, type PaletteTheme, type PulseBackgroundOptions, type RainBackgroundOptions, type RenderMode, type SilkBackgroundOptions, type SnapshotOptions, type SourceType, type StarsBackgroundOptions, type TerrainBackgroundOptions, type TextBackgroundOptions, type VoidBackgroundOptions, type WaveBackgroundOptions, type WebcamOptions, asciiBackground, asciiText, asciiTextAnsi, asciify, asciifyGif, asciifyVideo, asciifyWebcam, buildTextFrame, captureSnapshot, gifToAsciiFrames, imageToAsciiFrame, mountWaveBackground, renderAuroraBackground, renderCircuitBackground, renderDnaBackground, renderFireBackground, renderFrameToCanvas, renderGridBackground, renderMorphBackground, renderNoiseBackground, renderPulseBackground, renderRainBackground, renderSilkBackground, renderStarsBackground, renderTerrainBackground, renderTextBackground, renderVoidBackground, renderWaveBackground, snapshotAndDownload, videoToAsciiFrames };

package/dist/index.d.ts

@@ -711,66 +711,108 @@ declare function renderTextBackground(ctx: CanvasRenderingContext2D, width: numb
     intensity?: number;
 } | null): void;
 
-/**
- * record() — capture a rolling frame buffer from a running ASCII canvas
- * and export it as a downloadable animated GIF or WebP data URL.
- *
- * Usage:
- * ```ts
- * const recorder = createRecorder(canvasEl, { fps: 15, maxFrames: 120 });
- * recorder.start();
- * // ... after a few seconds ...
- * const dataUrl = await recorder.stop(); // 'data:image/gif;base64,...'
- * ```
- */
-interface RecorderOptions {
-    /** Target capture frame rate (default: 15) */
-    fps?: number;
-    /** Maximum number of frames to buffer (default: 120 → 8 s at 15 fps) */
-    maxFrames?: number;
+interface SnapshotOptions {
     /**
-     * Output format.
-     * - 'gif'  — animated GIF via gif.js worker (requires gif.worker.js in public/)
-     * - 'webp' — animated WebP via MediaRecorder API (Chrome/Edge only)
-     * - 'png-sequence' — returns a JSON array of PNG data URLs (universal)
-     * Default: 'gif'
+     * Image format.
+     * - 'png'  — lossless (default)
+     * - 'jpeg' — smaller, no transparency
+     * - 'webp' — best compression with transparency
      */
-    format?: 'gif' | 'webp' | 'png-sequence';
-    /** GIF quality 1 (best) – 30 (smallest) — only used for format:'gif' (default: 10) */
+    format?: 'png' | 'jpeg' | 'webp';
+    /** 0–1 quality for jpeg/webp. Default: 0.92 */
     quality?: number;
     /**
-     * Scale factor applied to the canvas before capture (default: 1).
-     * Use 0.5 to halve dimensions and reduce file size.
+     * Scale factor applied before capture. Default: 1.
+     * Use 2 for a high-resolution export at 2× the canvas size.
      */
     scale?: number;
 }
-interface Recorder {
-    /** Start capturing frames from the canvas. */
-    start(): void;
-    /**
-     * Stop capturing and encode.
-     * Resolves with a data URL (gif/webp) or JSON string (png-sequence).
-     */
-    stop(): Promise<string>;
-    /** True while recording. */
-    readonly isRecording: boolean;
-    /** Number of frames captured so far. */
-    readonly frameCount: number;
-}
 /**
- * Create a Recorder bound to a canvas element.
+ * Capture a single frame from a canvas as a Blob.
+ *
+ * @example
+ * ```ts
+ * const blob = await captureSnapshot(canvas);
+ * const url = URL.createObjectURL(blob);
+ * ```
  */
-declare function createRecorder(canvas: HTMLCanvasElement, options?: RecorderOptions): Recorder;
+declare function captureSnapshot(canvas: HTMLCanvasElement, { format, quality, scale }?: SnapshotOptions): Promise<Blob>;
 /**
- * Convenience: record for a fixed duration and auto-download.
+ * Capture a single frame and immediately trigger a browser download.
  *
  * @example
  * ```ts
- * await recordAndDownload(canvasEl, 3000, { fps: 15, format: 'gif' });
+ * await snapshotAndDownload(canvas);
+ * await snapshotAndDownload(canvas, { format: 'jpeg', filename: 'my-art' });
  * ```
  */
-declare function recordAndDownload(canvas: HTMLCanvasElement, durationMs: number, options?: RecorderOptions & {
+declare function snapshotAndDownload(canvas: HTMLCanvasElement, options?: SnapshotOptions & {
     filename?: string;
 }): Promise<void>;
 
-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 CircuitBackgroundOptions, type ColorMode, DEFAULT_OPTIONS, type DnaBackgroundOptions, type FireBackgroundOptions, type GridBackgroundOptions, HOVER_PRESETS, type HoverEffect, type HoverPreset, type MorphBackgroundOptions, type MountWaveOptions, type NoiseBackgroundOptions, PALETTE_THEMES, type PaletteTheme, type PulseBackgroundOptions, type RainBackgroundOptions, type Recorder, type RecorderOptions, type RenderMode, type SilkBackgroundOptions, type SourceType, type StarsBackgroundOptions, type TerrainBackgroundOptions, type TextBackgroundOptions, type VoidBackgroundOptions, type WaveBackgroundOptions, asciiBackground, asciiText, asciiTextAnsi, asciify, asciifyGif, asciifyVideo, buildTextFrame, createRecorder, gifToAsciiFrames, imageToAsciiFrame, mountWaveBackground, recordAndDownload, renderAuroraBackground, renderCircuitBackground, renderDnaBackground, renderFireBackground, renderFrameToCanvas, renderGridBackground, renderMorphBackground, renderNoiseBackground, renderPulseBackground, renderRainBackground, renderSilkBackground, renderStarsBackground, renderTerrainBackground, renderTextBackground, renderVoidBackground, renderWaveBackground, videoToAsciiFrames };
+/**
+ * asciifyWebcam — live webcam → ASCII art on canvas.
+ *
+ * Requests camera access, attaches the stream to a hidden video element, and
+ * runs a rAF loop that converts each frame to ASCII and renders it onto a
+ * supplied canvas.
+ *
+ * @example
+ * const stop = await asciifyWebcam(canvas);
+ * // later: stop();
+ *
+ * @example
+ * const stop = await asciifyWebcam(canvas, {
+ *   fontSize: 8,
+ *   style: 'terminal',
+ *   mirror: true,                   // horizontal flip (selfie mode)
+ *   constraints: { facingMode: 'user' },
+ * });
+ */
+
+interface WebcamOptions {
+    /** Character size in pixels. Default: 10 */
+    fontSize?: number;
+    /** Art style preset. Default: 'classic' */
+    style?: ArtStyle;
+    /** Extra AsciiOptions merged on top of the preset */
+    options?: Partial<AsciiOptions>;
+    /**
+     * Called every frame to get the latest options. Takes priority over `options`.
+     * Use this to keep the rendering in sync with live UI controls without
+     * restarting the camera.
+     *
+     * @example
+     * const optionsRef = useRef(currentOptions);
+     * optionsRef.current = currentOptions;
+     * asciifyWebcam(canvas, { liveOptions: () => optionsRef.current });
+     */
+    liveOptions?: () => Partial<AsciiOptions>;
+    /**
+     * Flip the output horizontally so it reads like a mirror / selfie camera.
+     * Default: true
+     */
+    mirror?: boolean;
+    /**
+     * Passed directly to `getUserMedia({ video: constraints })`.
+     * Defaults to `{ facingMode: 'user' }`.
+     */
+    constraints?: MediaTrackConstraints;
+    /**
+     * Device pixel ratio used to compute logical render dimensions from the
+     * canvas's physical pixel size. Defaults to `window.devicePixelRatio ?? 1`.
+     * Set this when you size the canvas at physical resolution (e.g. width × dpr)
+     * so that ASCII column/row counts are based on CSS pixels, not physical ones.
+     */
+    dpr?: number;
+}
+/**
+ * Start a live webcam ASCII-art loop and render it onto `canvas`.
+ * Returns a `stop()` function that cancels the loop and releases the camera.
+ *
+ * Throws if the browser doesn't support `getUserMedia` or the user denies
+ * camera permission.
+ */
+declare function asciifyWebcam(canvas: HTMLCanvasElement, { fontSize, style, options, liveOptions, mirror, constraints, dpr: dprOverride, }?: WebcamOptions): Promise<() => void>;
+
+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 CircuitBackgroundOptions, type ColorMode, DEFAULT_OPTIONS, type DnaBackgroundOptions, type FireBackgroundOptions, type GridBackgroundOptions, HOVER_PRESETS, type HoverEffect, type HoverPreset, type MorphBackgroundOptions, type MountWaveOptions, type NoiseBackgroundOptions, PALETTE_THEMES, type PaletteTheme, type PulseBackgroundOptions, type RainBackgroundOptions, type RenderMode, type SilkBackgroundOptions, type SnapshotOptions, type SourceType, type StarsBackgroundOptions, type TerrainBackgroundOptions, type TextBackgroundOptions, type VoidBackgroundOptions, type WaveBackgroundOptions, type WebcamOptions, asciiBackground, asciiText, asciiTextAnsi, asciify, asciifyGif, asciifyVideo, asciifyWebcam, buildTextFrame, captureSnapshot, gifToAsciiFrames, imageToAsciiFrame, mountWaveBackground, renderAuroraBackground, renderCircuitBackground, renderDnaBackground, renderFireBackground, renderFrameToCanvas, renderGridBackground, renderMorphBackground, renderNoiseBackground, renderPulseBackground, renderRainBackground, renderSilkBackground, renderStarsBackground, renderTerrainBackground, renderTextBackground, renderVoidBackground, renderWaveBackground, snapshotAndDownload, videoToAsciiFrames };

package/dist/index.js

@@ -2283,146 +2283,145 @@ function renderTextBackground(ctx, width, height, text, options = {}, hoverPos)
 }
 
 // src/core/record.ts
-function createRecorder(canvas, options = {}) {
-  const {
-    fps = 15,
-    maxFrames = 120,
-    format = "gif",
-    quality = 10,
-    scale = 1
-  } = options;
-  const interval = 1e3 / fps;
-  let recording = false;
-  let timerId = -1;
-  const blobs = [];
-  const captureFrame = () => {
-    if (!recording || blobs.length >= maxFrames) return;
+function captureSnapshot(canvas, { format = "png", quality = 0.92, scale = 1 } = {}) {
+  return new Promise((resolve, reject) => {
     let src = canvas;
     if (scale !== 1) {
       const off = document.createElement("canvas");
       off.width = Math.round(canvas.width * scale);
       off.height = Math.round(canvas.height * scale);
       const offCtx = off.getContext("2d");
+      if (!offCtx) {
+        reject(new Error("captureSnapshot: could not get 2d context"));
+        return;
+      }
       offCtx.drawImage(canvas, 0, 0, off.width, off.height);
       src = off;
     }
-    blobs.push(src.toDataURL("image/png"));
+    src.toBlob(
+      (blob) => blob ? resolve(blob) : reject(new Error("captureSnapshot: toBlob returned null")),
+      `image/${format}`,
+      quality
+    );
+  });
+}
+async function snapshotAndDownload(canvas, options = {}) {
+  const { filename = "asciify-snapshot", format = "png", ...snapOpts } = options;
+  const blob = await captureSnapshot(canvas, { format, ...snapOpts });
+  const ext = format === "jpeg" ? "jpg" : format;
+  const a = document.createElement("a");
+  a.href = URL.createObjectURL(blob);
+  a.download = `${filename}.${ext}`;
+  a.click();
+  setTimeout(() => URL.revokeObjectURL(a.href), 1e4);
+}
+
+// src/core/webcam.ts
+async function asciifyWebcam(canvas, {
+  fontSize = 10,
+  style = "classic",
+  options = {},
+  liveOptions,
+  mirror = true,
+  constraints = { facingMode: "user" },
+  dpr: dprOverride
+} = {}) {
+  if (!navigator.mediaDevices?.getUserMedia) {
+    throw new Error("asciifyWebcam: getUserMedia is not supported in this browser.");
+  }
+  const stream = await navigator.mediaDevices.getUserMedia({ video: constraints });
+  const video = document.createElement("video");
+  video.srcObject = stream;
+  video.muted = true;
+  video.playsInline = true;
+  await new Promise((resolve, reject) => {
+    video.onloadedmetadata = () => resolve();
+    video.onerror = () => reject(new Error("asciifyWebcam: video stream failed to load."));
+    video.play().catch(reject);
+  });
+  const merged = {
+    ...DEFAULT_OPTIONS,
+    ...ART_STYLE_PRESETS[style],
+    ...options,
+    fontSize
   };
-  const encodeGif = async (frames) => {
-    return new Promise((resolve, reject) => {
-      if (typeof GIF === "undefined") {
-        reject(new Error('[asciify recorder] gif.js not found. Add <script src="/gif.worker.js"> to your page.'));
-        return;
-      }
-      const gif = new GIF({
-        workers: 2,
-        quality,
-        workerScript: "/gif.worker.js"
-      });
-      let loaded = 0;
-      const total = frames.length;
-      frames.forEach((dataUrl) => {
-        const img = new Image();
-        img.onload = () => {
-          gif.addFrame(img, { delay: interval, copy: true });
-          loaded++;
-          if (loaded === total) gif.render();
-        };
-        img.src = dataUrl;
-      });
-      gif.on("finished", (blob) => {
-        const reader = new FileReader();
-        reader.onload = () => resolve(reader.result);
-        reader.readAsDataURL(blob);
-      });
-      gif.on("error", reject);
-    });
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("asciifyWebcam: could not get 2d context from canvas.");
+  const deviceRatio = dprOverride ?? (typeof window !== "undefined" ? window.devicePixelRatio : 1) ?? 1;
+  if (deviceRatio !== 1) {
+    ctx.scale(deviceRatio, deviceRatio);
+  }
+  let hoverPos = null;
+  const smoothHover = { x: 0.5, y: 0.5, intensity: 0 };
+  const onMouseMove = (e) => {
+    const rect = canvas.getBoundingClientRect();
+    hoverPos = {
+      x: (e.clientX - rect.left) / rect.width,
+      y: (e.clientY - rect.top) / rect.height
+    };
   };
-  const encodeWebP = async (frames, _fps) => {
-    if (typeof MediaRecorder === "undefined") {
-      throw new Error("[asciify recorder] MediaRecorder not available in this browser.");
-    }
-    const off = document.createElement("canvas");
-    if (frames.length === 0) return "";
-    const probe = new Image();
-    await new Promise((res) => {
-      probe.onload = () => res();
-      probe.src = frames[0];
-    });
-    off.width = probe.naturalWidth;
-    off.height = probe.naturalHeight;
-    const offCtx = off.getContext("2d");
-    const stream = off.captureStream(_fps);
-    const recorder = new MediaRecorder(stream, { mimeType: "video/webm;codecs=vp9" });
-    const chunks = [];
-    recorder.ondataavailable = (e) => chunks.push(e.data);
-    return new Promise((resolve, reject) => {
-      recorder.onstop = () => {
-        const blob = new Blob(chunks, { type: "video/webm" });
-        const reader = new FileReader();
-        reader.onload = () => resolve(reader.result);
-        reader.readAsDataURL(blob);
-      };
-      recorder.onerror = reject;
-      recorder.start();
-      let idx = 0;
-      const drawNext = () => {
-        if (idx >= frames.length) {
-          recorder.stop();
-          return;
-        }
-        const img = new Image();
-        img.onload = () => {
-          offCtx.drawImage(img, 0, 0);
-          idx++;
-          setTimeout(drawNext, interval);
-        };
-        img.src = frames[idx];
-      };
-      drawNext();
-    });
+  const onMouseLeave = () => {
+    hoverPos = null;
   };
-  return {
-    get isRecording() {
-      return recording;
-    },
-    get frameCount() {
-      return blobs.length;
-    },
-    start() {
-      if (recording) return;
-      blobs.length = 0;
-      recording = true;
-      timerId = window.setInterval(captureFrame, interval);
-    },
-    async stop() {
-      if (!recording) return "";
-      recording = false;
-      clearInterval(timerId);
-      const frames = blobs.slice();
-      if (format === "png-sequence") {
-        return JSON.stringify(frames);
+  if (merged.hoverStrength > 0) {
+    canvas.addEventListener("mousemove", onMouseMove);
+    canvas.addEventListener("mouseleave", onMouseLeave);
+  }
+  let cancelled = false;
+  let animId;
+  const startTime = performance.now();
+  const tick = (timestamp) => {
+    if (cancelled) return;
+    if (video.readyState >= video.HAVE_CURRENT_DATA) {
+      const displayW = canvas.width / deviceRatio;
+      const displayH = canvas.height / deviceRatio;
+      const elapsed = (timestamp - startTime) / 1e3;
+      const frameOptions = liveOptions ? { ...merged, ...liveOptions() } : merged;
+      const wantsHover = frameOptions.hoverStrength > 0;
+      if (wantsHover) {
+        canvas.addEventListener("mousemove", onMouseMove);
+        canvas.addEventListener("mouseleave", onMouseLeave);
+      } else {
+        canvas.removeEventListener("mousemove", onMouseMove);
+        canvas.removeEventListener("mouseleave", onMouseLeave);
+      }
+      const { frame } = imageToAsciiFrame(video, frameOptions, displayW, displayH);
+      if (hoverPos) {
+        const dx = hoverPos.x - smoothHover.x;
+        const dy = hoverPos.y - smoothHover.y;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        const speed = Math.min(0.25, 0.06 + dist * 0.8);
+        smoothHover.x += dx * speed;
+        smoothHover.y += dy * speed;
+        smoothHover.intensity += (1 - smoothHover.intensity) * 0.12;
+      } else {
+        smoothHover.intensity *= 0.965;
+        if (smoothHover.intensity < 3e-3) smoothHover.intensity = 0;
       }
-      if (format === "webp") {
-        return encodeWebP(frames, fps);
+      const hoverArg = smoothHover.intensity > 3e-3 ? { x: smoothHover.x, y: smoothHover.y, intensity: smoothHover.intensity } : null;
+      if (mirror) {
+        ctx.save();
+        ctx.scale(-1, 1);
+        ctx.translate(-displayW, 0);
+        renderFrameToCanvas(ctx, frame, frameOptions, displayW, displayH, elapsed, hoverArg);
+        ctx.restore();
+      } else {
+        renderFrameToCanvas(ctx, frame, frameOptions, displayW, displayH, elapsed, hoverArg);
       }
-      return encodeGif(frames);
     }
+    animId = requestAnimationFrame(tick);
+  };
+  animId = requestAnimationFrame(tick);
+  return () => {
+    cancelled = true;
+    cancelAnimationFrame(animId);
+    canvas.removeEventListener("mousemove", onMouseMove);
+    canvas.removeEventListener("mouseleave", onMouseLeave);
+    stream.getTracks().forEach((t) => t.stop());
+    video.srcObject = null;
   };
-}
-async function recordAndDownload(canvas, durationMs, options = {}) {
-  const { filename = "asciify-recording", ...recOpts } = options;
-  const recorder = createRecorder(canvas, recOpts);
-  recorder.start();
-  await new Promise((res) => setTimeout(res, durationMs));
-  const dataUrl = await recorder.stop();
-  const ext = options.format === "webp" ? "webm" : options.format === "png-sequence" ? "json" : "gif";
-  const a = document.createElement("a");
-  a.href = dataUrl;
-  a.download = `${filename}.${ext}`;
-  a.click();
 }
 
-export { ART_STYLE_PRESETS, CHARSETS, DEFAULT_OPTIONS, HOVER_PRESETS, PALETTE_THEMES, asciiBackground, asciiText, asciiTextAnsi, asciify, asciifyGif, asciifyVideo, buildTextFrame, createRecorder, gifToAsciiFrames, imageToAsciiFrame, mountWaveBackground, recordAndDownload, renderAuroraBackground, renderCircuitBackground, renderDnaBackground, renderFireBackground, renderFrameToCanvas, renderGridBackground, renderMorphBackground, renderNoiseBackground, renderPulseBackground, renderRainBackground, renderSilkBackground, renderStarsBackground, renderTerrainBackground, renderTextBackground, renderVoidBackground, renderWaveBackground, videoToAsciiFrames };
+export { ART_STYLE_PRESETS, CHARSETS, DEFAULT_OPTIONS, HOVER_PRESETS, PALETTE_THEMES, asciiBackground, asciiText, asciiTextAnsi, asciify, asciifyGif, asciifyVideo, asciifyWebcam, buildTextFrame, captureSnapshot, gifToAsciiFrames, imageToAsciiFrame, mountWaveBackground, renderAuroraBackground, renderCircuitBackground, renderDnaBackground, renderFireBackground, renderFrameToCanvas, renderGridBackground, renderMorphBackground, renderNoiseBackground, renderPulseBackground, renderRainBackground, renderSilkBackground, renderStarsBackground, renderTerrainBackground, renderTextBackground, renderVoidBackground, renderWaveBackground, snapshotAndDownload, videoToAsciiFrames };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map