@bendyline/squisq-video-react 1.2.1 → 2.0.0

package/dist/index.js

@@ -10,7 +10,7 @@ import { useState, useRef as useRef2, useCallback as useCallback2, useEffect } f
 import { resolveDimensions, computeAudioTimeline, QUALITY_PRESETS } from "@bendyline/squisq-video";
 
 // src/mainThreadEncoder.ts
-import { bitrateForQuality } from "@bendyline/squisq-video";
+import { bitrateForQuality, validateVideoExportOptions } from "@bendyline/squisq-video";
 function supportsWebCodecs() {
   return typeof VideoEncoder !== "undefined" && typeof VideoFrame !== "undefined";
 }
@@ -30,16 +30,12 @@ async function supportsWebCodecsH264(config) {
   }
 }
 function createEncoder(config) {
+  validateVideoExportOptions(config);
   if (!supportsWebCodecs()) {
     throw new Error(
       "WebCodecs is not available in this browser. Video export requires Chrome 94+, Edge 94+, or another Chromium-based browser."
     );
   }
-  if (!config.fps || config.fps <= 0 || !config.width || !config.height) {
-    throw new Error(
-      `Invalid encoder config: fps=${config.fps}, width=${config.width}, height=${config.height}`
-    );
-  }
   const muxer = createMp4Muxer({
     width: config.width,
     height: config.height,
@@ -69,10 +65,10 @@ function createEncoder(config) {
     framerate: config.fps
   });
   return {
-    encodeFrame(bitmap, frameIndex) {
+    async encodeFrame(bitmap, frameIndex) {
       if (closed) {
         bitmap.close();
-        return;
+        throw new Error("Encoder already closed");
       }
       const timestamp = Math.round(frameIndex * frameDuration);
       const frame = new VideoFrame(bitmap, { timestamp });
@@ -103,21 +99,20 @@ function createEncoder(config) {
 }
 
 // src/workerEncoder.ts
+import { validateVideoExportOptions as validateVideoExportOptions2 } from "@bendyline/squisq-video";
 function createWorkerEncoder(config) {
-  if (!config.fps || config.fps <= 0 || !config.width || !config.height) {
-    throw new Error(
-      `Invalid encoder config: fps=${config.fps}, width=${config.width}, height=${config.height}`
-    );
-  }
+  validateVideoExportOptions2(config);
   const worker = new Worker(new URL("./workers/encode.worker.js", import.meta.url), {
     type: "module"
   });
-  let closed = false;
+  let state = "open";
   let fatalError = null;
   let finalizeResolve = null;
   let finalizeReject = null;
   let readyResolve = null;
   let readyReject = null;
+  let readySettled = false;
+  const frameWaiters = /* @__PURE__ */ new Map();
   const ready = new Promise((resolve, reject) => {
     readyResolve = resolve;
     readyReject = reject;
@@ -126,14 +121,23 @@ function createWorkerEncoder(config) {
   function post(msg, transfer) {
     worker.postMessage(msg, transfer ?? []);
   }
+  const currentState = () => state;
   worker.onmessage = (event) => {
     const msg = event.data;
     switch (msg.type) {
       case "capabilities":
+        readySettled = true;
         readyResolve?.(msg.backend);
         readyResolve = readyReject = null;
         break;
+      case "frame-complete": {
+        const waiter = frameWaiters.get(msg.frameIndex);
+        waiter?.resolve();
+        frameWaiters.delete(msg.frameIndex);
+        break;
+      }
       case "complete":
+        state = "closed";
         finalizeResolve?.(msg.data);
         finalizeResolve = finalizeReject = null;
         worker.terminate();
@@ -141,8 +145,12 @@ function createWorkerEncoder(config) {
       case "error": {
         const err = new Error(msg.message);
         fatalError = err;
+        state = "closed";
+        readySettled = true;
         readyReject?.(err);
         finalizeReject?.(err);
+        for (const waiter of frameWaiters.values()) waiter.reject(err);
+        frameWaiters.clear();
         readyResolve = readyReject = null;
         finalizeResolve = finalizeReject = null;
         worker.terminate();
@@ -153,8 +161,12 @@ function createWorkerEncoder(config) {
   worker.onerror = (event) => {
     const err = new Error(event.message || "Worker error");
     fatalError = err;
+    state = "closed";
+    readySettled = true;
     readyReject?.(err);
     finalizeReject?.(err);
+    for (const waiter of frameWaiters.values()) waiter.reject(err);
+    frameWaiters.clear();
     readyResolve = readyReject = null;
     finalizeResolve = finalizeReject = null;
     worker.terminate();
@@ -164,22 +176,39 @@ function createWorkerEncoder(config) {
     width: config.width,
     height: config.height,
     fps: config.fps,
-    quality: config.quality
+    quality: config.quality,
+    ...config.ffmpegWasm ? { ffmpegWasm: config.ffmpegWasm } : {}
   });
   return {
     ready,
     encodeFrame(bitmap, frameIndex) {
-      if (closed || fatalError) {
+      if (state !== "open" || fatalError) {
         bitmap.close();
-        return;
+        return Promise.reject(fatalError ?? new Error("Encoder is not accepting frames"));
       }
+      if (frameWaiters.has(frameIndex)) {
+        bitmap.close();
+        return Promise.reject(new Error(`Frame ${frameIndex} was submitted more than once`));
+      }
+      let resolveFrame;
+      let rejectFrame;
+      const promise = new Promise((resolve, reject) => {
+        resolveFrame = resolve;
+        rejectFrame = reject;
+      });
+      frameWaiters.set(frameIndex, { promise, resolve: resolveFrame, reject: rejectFrame });
       const timestamp = Math.round(frameIndex * frameDuration);
       post({ type: "frame", bitmap, frameIndex, timestamp }, [bitmap]);
+      return promise;
     },
     async finalize() {
-      if (closed) throw new Error("Encoder already closed");
+      if (state !== "open") throw new Error("Encoder already closed or finalizing");
       if (fatalError) throw fatalError;
-      closed = true;
+      state = "finalizing";
+      await Promise.all(Array.from(frameWaiters.values(), (waiter) => waiter.promise));
+      if (currentState() === "closed") {
+        throw fatalError ?? new Error("Encoder closed during finalization");
+      }
       return new Promise((resolve, reject) => {
         finalizeResolve = resolve;
         finalizeReject = reject;
@@ -187,8 +216,18 @@ function createWorkerEncoder(config) {
       });
     },
     close() {
-      if (closed) return;
-      closed = true;
+      if (state === "closed") return;
+      state = "closed";
+      const err = new Error("Encoder closed");
+      if (!readySettled) {
+        readySettled = true;
+        readyReject?.(err);
+      }
+      finalizeReject?.(err);
+      for (const waiter of frameWaiters.values()) waiter.reject(err);
+      frameWaiters.clear();
+      readyResolve = readyReject = null;
+      finalizeResolve = finalizeReject = null;
       post({ type: "cancel" });
       worker.terminate();
     }
@@ -196,6 +235,9 @@ function createWorkerEncoder(config) {
 }
 
 // src/audioTrack.ts
+import {
+  ffmpegAudioMuxArgs
+} from "@bendyline/squisq-video";
 var EXPORT_AUDIO_SAMPLE_RATE = 48e3;
 var EXPORT_AUDIO_CHANNELS = 2;
 var REASON_NO_AAC_NO_SAB = "This browser cannot encode AAC audio (WebCodecs AudioEncoder unavailable) and the ffmpeg.wasm fallback requires cross-origin isolation (SharedArrayBuffer).";
@@ -339,27 +381,29 @@ function audioBufferToWav(buffer) {
   }
   return new Uint8Array(out);
 }
-async function muxAudioWithFfmpegWasm(videoMp4, wav, audioBitrate) {
+async function muxAudioWithFfmpegWasm(videoMp4, wav, audioBitrate, loadConfig) {
   const { FFmpeg } = await import("@ffmpeg/ffmpeg");
   const ffmpeg = new FFmpeg();
-  await ffmpeg.load();
   try {
+    await ffmpeg.load({
+      ...loadConfig,
+      classWorkerURL: loadConfig?.classWorkerURL ?? new URL("./workers/ffmpeg.class-worker.js", import.meta.url).href
+    });
     await ffmpeg.writeFile("video.mp4", videoMp4);
     await ffmpeg.writeFile("audio.wav", wav);
-    await ffmpeg.exec([
+    const exitCode = await ffmpeg.exec([
       "-i",
       "video.mp4",
       "-i",
       "audio.wav",
       "-c:v",
       "copy",
-      "-c:a",
-      "aac",
-      "-b:a",
-      String(audioBitrate),
-      "-shortest",
+      ...ffmpegAudioMuxArgs(audioBitrate),
       "out.mp4"
     ]);
+    if (exitCode !== 0) {
+      throw new Error(`ffmpeg.wasm audio mux failed with exit code ${exitCode}`);
+    }
     const data = await ffmpeg.readFile("out.mp4");
     return data instanceof Uint8Array ? data : new TextEncoder().encode(data);
   } finally {
@@ -367,6 +411,58 @@ async function muxAudioWithFfmpegWasm(videoMp4, wav, audioBitrate) {
   }
 }
 
+// src/gifTranscode.ts
+import {
+  ffmpegGifOutputArgs
+} from "@bendyline/squisq-video";
+function buildGifFfmpegArgs(options) {
+  return ["-y", "-i", "video.mp4", ...ffmpegGifOutputArgs(options), "out.gif"];
+}
+async function transcodeMp4ToGifWithFfmpegWasm(videoMp4, options, loadConfig, signal) {
+  if (videoMp4.byteLength === 0) {
+    throw new Error("Cannot create an animated GIF from an empty MP4.");
+  }
+  if (signal?.aborted) {
+    throw new DOMException("Animated GIF export was cancelled.", "AbortError");
+  }
+  const args = buildGifFfmpegArgs(options);
+  const { FFmpeg } = await import("@ffmpeg/ffmpeg");
+  const ffmpeg = new FFmpeg();
+  let terminated = false;
+  const terminate = () => {
+    if (terminated) return;
+    terminated = true;
+    ffmpeg.terminate();
+  };
+  const handleAbort = () => terminate();
+  signal?.addEventListener("abort", handleAbort, { once: true });
+  try {
+    await ffmpeg.load({
+      ...loadConfig,
+      classWorkerURL: loadConfig?.classWorkerURL ?? new URL("./workers/ffmpeg.class-worker.js", import.meta.url).href
+    });
+    if (signal?.aborted) {
+      throw new DOMException("Animated GIF export was cancelled.", "AbortError");
+    }
+    await ffmpeg.writeFile("video.mp4", videoMp4);
+    if (signal?.aborted) {
+      throw new DOMException("Animated GIF export was cancelled.", "AbortError");
+    }
+    const exitCode = await ffmpeg.exec(args);
+    if (signal?.aborted) {
+      throw new DOMException("Animated GIF export was cancelled.", "AbortError");
+    }
+    if (exitCode !== 0) {
+      throw new Error(`ffmpeg.wasm GIF transcode failed with exit code ${exitCode}`);
+    }
+    const data = await ffmpeg.readFile("out.gif");
+    return data instanceof Uint8Array ? data : new TextEncoder().encode(data);
+  } finally {
+    signal?.removeEventListener("abort", handleAbort);
+    terminate();
+  }
+}
+
 // src/hooks/useFrameCapture.ts
 import { createElement } from "react";
 import { createRoot } from "react-dom/client";
@@ -425,6 +521,7 @@ function createInlineProvider(images) {
 function useFrameCapture() {
   const containerRef = useRef(null);
   const rootRef = useRef(null);
+  const renderAPIRef = useRef(null);
   const dimensionsRef = useRef({ width: 1920, height: 1080 });
   const init = useCallback(
     async (doc, renderOptions, captionMode) => {
@@ -433,6 +530,7 @@ function useFrameCapture() {
         const oldContainer = containerRef.current;
         rootRef.current = null;
         containerRef.current = null;
+        renderAPIRef.current = null;
         await new Promise((resolve) => {
           setTimeout(() => {
             if (oldRoot) oldRoot.unmount();
@@ -443,6 +541,7 @@ function useFrameCapture() {
       }
       const width = renderOptions.width ?? 1920;
       const height = renderOptions.height ?? 1080;
+      const animationsEnabled = renderOptions.animationsEnabled ?? true;
       dimensionsRef.current = { width, height };
       const container = document.createElement("div");
       container.style.cssText = `position:fixed;left:0;top:0;width:${width}px;height:${height}px;opacity:0;pointer-events:none;z-index:-1;overflow:hidden;`;
@@ -457,15 +556,25 @@ function useFrameCapture() {
       rootRef.current = root;
       const captionsEnabled = captionMode !== void 0 && captionMode !== "off";
       const captionStyle = captionMode === "social" ? "social" : "standard";
+      let resolveRenderAPI;
+      const renderAPIReady = new Promise((resolve) => {
+        resolveRenderAPI = resolve;
+      });
       const playerElement = createElement(DocPlayer, {
         doc,
         basePath: ".",
         renderMode: true,
+        animationsEnabled,
         showControls: false,
         autoPlay: false,
         forceViewport: { width, height, name: "export" },
         captionsEnabled,
-        captionStyle
+        captionStyle,
+        onRenderAPIReady: (api) => {
+          if (containerRef.current !== container) return;
+          renderAPIRef.current = api;
+          if (api) resolveRenderAPI(api);
+        }
       });
       await new Promise((resolve) => setTimeout(resolve, 0));
       if (mediaProvider) {
@@ -475,9 +584,9 @@ function useFrameCapture() {
       }
       return new Promise((resolve, reject) => {
         const timeout = setTimeout(() => {
-          const w = window;
-          const hasSeek = typeof w.seekTo === "function";
-          const hasDur = typeof w.getDuration === "function";
+          const api = renderAPIRef.current;
+          const hasSeek = typeof api?.seekTo === "function";
+          const hasDur = typeof api?.getDuration === "function";
           const rootEl = containerRef.current?.querySelector("#squisq-capture-root");
           const hasPlayer = rootEl ? rootEl.querySelector(".doc-player") !== null : false;
           reject(
@@ -486,29 +595,22 @@ function useFrameCapture() {
             )
           );
         }, 15e3);
-        const checkApi = () => {
-          const w = window;
-          if (typeof w.getDuration === "function" && typeof w.seekTo === "function") {
-            clearTimeout(timeout);
-            const duration = w.getDuration();
-            resolve(duration);
-          } else {
-            requestAnimationFrame(checkApi);
-          }
-        };
-        setTimeout(checkApi, 500);
+        void renderAPIReady.then((api) => {
+          clearTimeout(timeout);
+          resolve(api.getDuration());
+        });
       });
     },
     []
   );
   const captureFrame = useCallback(async (time) => {
     const container = containerRef.current;
-    const w = window;
-    if (!container || typeof w.seekTo !== "function") {
+    const api = renderAPIRef.current;
+    if (!container || !api) {
       throw new Error("Frame capture not initialized \u2014 call init() first");
     }
     const { width, height } = dimensionsRef.current;
-    await w.seekTo(time);
+    await api.seekTo(time);
     await new Promise(
       (resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve()))
     );
@@ -537,6 +639,7 @@ function useFrameCapture() {
       containerRef.current.remove();
       containerRef.current = null;
     }
+    renderAPIRef.current = null;
   }, []);
   return useMemo(() => ({ init, captureFrame, destroy }), [init, captureFrame, destroy]);
 }
@@ -564,6 +667,7 @@ function useVideoExport() {
   const [progress, setProgress] = useState(0);
   const [phase, setPhase] = useState("");
   const [duration, setDuration] = useState(0);
+  const [outputFormat, setOutputFormat] = useState("mp4");
   const [backend, setBackend] = useState(null);
   const [downloadUrl, setDownloadUrl] = useState(null);
   const [fileSize, setFileSize] = useState(0);
@@ -573,6 +677,7 @@ function useVideoExport() {
   const [elapsed, setElapsed] = useState(0);
   const [estimatedRemaining, setEstimatedRemaining] = useState(0);
   const encoderRef = useRef2(null);
+  const gifAbortRef = useRef2(null);
   const cancelledRef = useRef2(false);
   const downloadUrlRef = useRef2(null);
   const startTimeRef = useRef2(0);
@@ -587,6 +692,7 @@ function useVideoExport() {
       if (encoderRef.current) {
         encoderRef.current.close();
       }
+      gifAbortRef.current?.abort();
       frameCapture.destroy();
     };
   }, [frameCapture]);
@@ -599,11 +705,14 @@ function useVideoExport() {
       encoderRef.current.close();
       encoderRef.current = null;
     }
+    gifAbortRef.current?.abort();
+    gifAbortRef.current = null;
     frameCapture.destroy();
     setState("idle");
     setProgress(0);
     setPhase("");
     setDuration(0);
+    setOutputFormat("mp4");
     setBackend(null);
     setDownloadUrl(null);
     setFileSize(0);
@@ -622,6 +731,8 @@ function useVideoExport() {
       encoderRef.current.close();
       encoderRef.current = null;
     }
+    gifAbortRef.current?.abort();
+    gifAbortRef.current = null;
     frameCapture.destroy();
     setState("idle");
     setProgress(0);
@@ -640,12 +751,27 @@ function useVideoExport() {
       setAudioSkippedReason(null);
       setError(null);
       const quality = config.quality ?? "normal";
-      const fps = config.fps ?? 30;
+      const effectiveOutputFormat = config.outputFormat ?? "mp4";
+      const fps = config.fps ?? (effectiveOutputFormat === "gif" ? 10 : 30);
       const orientation = config.orientation ?? "landscape";
-      const { width, height } = resolveDimensions({ orientation });
+      const animationsEnabled = config.animationsEnabled ?? effectiveOutputFormat === "mp4";
+      setOutputFormat(effectiveOutputFormat);
       try {
+        const gifDefaults = orientation === "portrait" ? { width: 540, height: 960 } : { width: 960, height: 540 };
+        const { width, height } = resolveDimensions({
+          orientation,
+          fps,
+          quality,
+          ...config.width !== void 0 ? { width: config.width } : effectiveOutputFormat === "gif" ? { width: gifDefaults.width } : {},
+          ...config.height !== void 0 ? { height: config.height } : effectiveOutputFormat === "gif" ? { height: gifDefaults.height } : {}
+        });
         const webCodecsAvailable = supportsWebCodecs();
         const sharedArrayBufferAvailable = typeof SharedArrayBuffer !== "undefined";
+        if (effectiveOutputFormat === "gif" && !sharedArrayBufferAvailable) {
+          throw new Error(
+            "Animated GIF export requires ffmpeg.wasm and SharedArrayBuffer (Cross-Origin-Isolation headers)."
+          );
+        }
         if (!webCodecsAvailable && !sharedArrayBufferAvailable) {
           throw new Error(
             "No video encoder available. WebCodecs requires Chrome 94+ / Edge 94+, and the ffmpeg.wasm fallback requires SharedArrayBuffer (Cross-Origin-Isolation headers)."
@@ -676,7 +802,7 @@ function useVideoExport() {
         }
         const docDuration = await frameCapture.init(
           doc,
-          { images, audio: config.audio, width, height },
+          { images, audio: config.audio, width, height, animationsEnabled },
           config.captionMode
         );
         if (cancelledRef.current) return;
@@ -688,7 +814,7 @@ function useVideoExport() {
         setProgress(5);
         const canUseWebCodecs = webCodecsAvailable && await supportsWebCodecsH264({ width, height, fps, quality });
         const audioBitrate = (QUALITY_PRESETS[quality] ?? QUALITY_PRESETS.normal).audioBitrate;
-        const timeline = computeAudioTimeline(doc, 0);
+        const timeline = effectiveOutputFormat === "mp4" ? computeAudioTimeline(doc, 0) : [];
         const aacSupported = timeline.length > 0 ? await supportsWebCodecsAac(EXPORT_AUDIO_SAMPLE_RATE, EXPORT_AUDIO_CHANNELS) : false;
         const tierDecision = selectAudioTier({
           hasClips: timeline.length > 0,
@@ -745,7 +871,13 @@ function useVideoExport() {
           });
           setBackend("webcodecs");
         } else if (sharedArrayBufferAvailable) {
-          const workerEncoder = createWorkerEncoder({ width, height, fps, quality });
+          const workerEncoder = createWorkerEncoder({
+            width,
+            height,
+            fps,
+            quality,
+            ffmpegWasm: config.ffmpegWasm
+          });
           encoder = workerEncoder;
           const selectedBackend = await workerEncoder.ready;
           setBackend(selectedBackend);
@@ -782,7 +914,7 @@ function useVideoExport() {
             bitmap.close();
             return;
           }
-          encoder.encodeFrame(bitmap, i);
+          await encoder.encodeFrame(bitmap, i);
         }
         if (cancelledRef.current) return;
         if (useInlineAudio && renderedAudio && encoder.addAudioChunk) {
@@ -801,17 +933,37 @@ function useVideoExport() {
           }
         }
         setState("encoding");
-        setPhase("Finalizing video\u2026");
+        setPhase(effectiveOutputFormat === "gif" ? "Finalizing GIF frames\u2026" : "Finalizing video\u2026");
         setProgress(95);
         let outputBytes = await encoder.finalize();
         encoderRef.current = null;
         if (cancelledRef.current) return;
-        if (useFfmpegAudio && renderedAudio) {
+        if (effectiveOutputFormat === "gif") {
+          setPhase("Generating GIF palette\u2026");
+          const videoOnly = outputBytes instanceof Uint8Array ? outputBytes : new Uint8Array(outputBytes);
+          const gifAbort = new AbortController();
+          gifAbortRef.current = gifAbort;
+          try {
+            outputBytes = await transcodeMp4ToGifWithFfmpegWasm(
+              videoOnly,
+              { width, height, loop: 0 },
+              config.ffmpegWasm,
+              gifAbort.signal
+            );
+          } finally {
+            if (gifAbortRef.current === gifAbort) gifAbortRef.current = null;
+          }
+        } else if (useFfmpegAudio && renderedAudio) {
           setPhase("Muxing audio\u2026");
           try {
             const wav = audioBufferToWav(renderedAudio);
             const videoOnly = outputBytes instanceof Uint8Array ? outputBytes : new Uint8Array(outputBytes);
-            outputBytes = await muxAudioWithFfmpegWasm(videoOnly, wav, audioBitrate);
+            outputBytes = await muxAudioWithFfmpegWasm(
+              videoOnly,
+              wav,
+              audioBitrate,
+              config.ffmpegWasm
+            );
             audioIncludedLocal = true;
           } catch (audioErr) {
             audioIncludedLocal = false;
@@ -820,13 +972,16 @@ function useVideoExport() {
         }
         if (cancelledRef.current) return;
         const finalBytes = outputBytes instanceof Uint8Array ? outputBytes.slice() : new Uint8Array(outputBytes);
-        const blob = new Blob([finalBytes], { type: "video/mp4" });
+        const mimeType = effectiveOutputFormat === "gif" ? "image/gif" : "video/mp4";
+        const blob = new Blob([finalBytes], { type: mimeType });
         const url = URL.createObjectURL(blob);
         downloadUrlRef.current = url;
         setDownloadUrl(url);
         setFileSize(finalBytes.byteLength);
         setAudioIncluded(audioIncludedLocal);
-        setAudioSkippedReason(audioIncludedLocal ? null : audioReasonLocal);
+        setAudioSkippedReason(
+          effectiveOutputFormat === "gif" || audioIncludedLocal ? null : audioReasonLocal
+        );
         setState("complete");
         setProgress(100);
         setPhase("Export complete");
@@ -844,6 +999,8 @@ function useVideoExport() {
           encoderRef.current.close();
           encoderRef.current = null;
         }
+        gifAbortRef.current?.abort();
+        gifAbortRef.current = null;
         frameCapture.destroy();
       }
     },
@@ -854,6 +1011,7 @@ function useVideoExport() {
     progress,
     phase,
     duration,
+    outputFormat,
     backend,
     downloadUrl,
     fileSize,
@@ -876,48 +1034,77 @@ function formatDuration(seconds) {
   const s = seconds % 60;
   return `${m}m ${s}s`;
 }
+function encoderLabel(outputFormat, backend) {
+  if (outputFormat === "gif") {
+    return backend === "webcodecs" ? "WebCodecs (H.264) \u2192 ffmpeg.wasm (GIF)" : "ffmpeg.wasm (H.264 \u2192 GIF)";
+  }
+  return backend === "webcodecs" ? "WebCodecs (H.264)" : "ffmpeg.wasm (H.264)";
+}
+var VIDEO_EXPORT_PALETTES = {
+  light: {
+    overlay: "rgba(0, 0, 0, 0.5)",
+    surface: "#FFFDF7",
+    control: "#ffffff",
+    border: "#c9b98a",
+    text: "#4a3c1f",
+    heading: "#2d2310",
+    label: "#5a4a2a",
+    muted: "#8a7a5a",
+    secondary: "#E8DFC6",
+    primary: "#8B6914",
+    primaryBorder: "#7a5c10",
+    success: "#2d6a10",
+    danger: "#a03020"
+  },
+  dark: {
+    overlay: "rgba(2, 6, 23, 0.72)",
+    surface: "#111827",
+    control: "#0f172a",
+    border: "#475569",
+    text: "#e5e7eb",
+    heading: "#f8fafc",
+    label: "#cbd5e1",
+    muted: "#94a3b8",
+    secondary: "#1e293b",
+    primary: "#9a7416",
+    primaryBorder: "#d1a73b",
+    success: "#86efac",
+    danger: "#fca5a5"
+  }
+};
 var overlayStyle = {
   position: "fixed",
   inset: 0,
-  background: "rgba(0, 0, 0, 0.5)",
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
   zIndex: 1e4
 };
 var modalStyle = {
-  background: "#FFFDF7",
-  border: "1px solid #c9b98a",
   borderRadius: 0,
   padding: "24px 28px",
   minWidth: 380,
   maxWidth: 480,
   boxShadow: "0 8px 32px rgba(0,0,0,0.18)",
-  fontFamily: "system-ui, -apple-system, sans-serif",
-  color: "#4a3c1f"
+  fontFamily: "system-ui, -apple-system, sans-serif"
 };
 var titleStyle = {
   margin: "0 0 16px 0",
   fontSize: 18,
-  fontWeight: 600,
-  color: "#2d2310"
+  fontWeight: 600
 };
 var labelStyle = {
   display: "block",
   fontSize: 13,
   fontWeight: 500,
-  marginBottom: 4,
-  color: "#5a4a2a"
+  marginBottom: 4
 };
 var selectStyle = {
   width: "100%",
   padding: "6px 8px",
   fontSize: 13,
   fontFamily: "inherit",
-  border: "1px solid #c9b98a",
   borderRadius: 0,
-  background: "#fff",
-  color: "#4a3c1f",
   marginBottom: 12
 };
 var btnPrimary = {
@@ -926,9 +1113,7 @@ var btnPrimary = {
   fontFamily: "inherit",
   fontWeight: 500,
   cursor: "pointer",
-  background: "#8B6914",
   color: "#fff",
-  border: "1px solid #7a5c10",
   borderRadius: 0
 };
 var btnSecondary = {
@@ -937,15 +1122,11 @@ var btnSecondary = {
   fontFamily: "inherit",
   fontWeight: 500,
   cursor: "pointer",
-  background: "#E8DFC6",
-  color: "#4a3c1f",
-  border: "1px solid #c9b98a",
   borderRadius: 0
 };
 var progressBarOuterStyle = {
   width: "100%",
   height: 8,
-  background: "#E8DFC6",
   borderRadius: 0,
   overflow: "hidden",
   marginBottom: 8
@@ -963,19 +1144,54 @@ function VideoExportModal({
   images,
   audio,
   defaultConfig,
+  colorScheme = "light",
   onClose
 }) {
+  const initialOutputFormat = defaultConfig?.outputFormat ?? "mp4";
+  const [outputFormat, setOutputFormat] = useState2(initialOutputFormat);
   const [quality, setQuality] = useState2(defaultConfig?.quality ?? "normal");
-  const [fps, setFps] = useState2(defaultConfig?.fps ?? 24);
+  const [fps, setFps] = useState2(defaultConfig?.fps ?? (initialOutputFormat === "gif" ? 10 : 24));
   const [orientation, setOrientation] = useState2(
     defaultConfig?.orientation ?? "landscape"
   );
   const [captionMode, setCaptionMode] = useState2(defaultConfig?.captionMode ?? "off");
+  const [animationsEnabled, setAnimationsEnabled] = useState2(
+    defaultConfig?.animationsEnabled ?? initialOutputFormat === "mp4"
+  );
+  const palette = VIDEO_EXPORT_PALETTES[colorScheme];
+  const themedModalStyle = {
+    ...modalStyle,
+    background: palette.surface,
+    border: `1px solid ${palette.border}`,
+    color: palette.text,
+    colorScheme
+  };
+  const themedTitleStyle = { ...titleStyle, color: palette.heading };
+  const themedLabelStyle = { ...labelStyle, color: palette.label };
+  const themedSelectStyle = {
+    ...selectStyle,
+    border: `1px solid ${palette.border}`,
+    background: palette.control,
+    color: palette.text,
+    colorScheme
+  };
+  const themedPrimaryButtonStyle = {
+    ...btnPrimary,
+    background: palette.primary,
+    border: `1px solid ${palette.primaryBorder}`
+  };
+  const themedSecondaryButtonStyle = {
+    ...btnSecondary,
+    background: palette.secondary,
+    color: palette.text,
+    border: `1px solid ${palette.border}`
+  };
   const exportHook = useVideoExport();
   const {
     state,
     progress,
     backend,
+    outputFormat: completedOutputFormat,
     downloadUrl,
     fileSize,
     audioIncluded,
@@ -987,10 +1203,22 @@ function VideoExportModal({
     cancel: cancelExport,
     reset: resetExport
   } = exportHook;
+  const handleOutputFormatChange = useCallback3((next) => {
+    setOutputFormat(next);
+    if (next === "gif") {
+      setFps(10);
+      setAnimationsEnabled(false);
+    } else {
+      setFps(24);
+      setAnimationsEnabled(true);
+    }
+  }, []);
   const handleExport = useCallback3(async () => {
     const config = {
       // defaultConfig is the base; explicit props/selections win over it.
       ...defaultConfig,
+      outputFormat,
+      animationsEnabled,
       quality,
       fps,
       orientation,
@@ -1004,6 +1232,8 @@ function VideoExportModal({
     await startExport(doc, config);
   }, [
     doc,
+    outputFormat,
+    animationsEnabled,
     quality,
     fps,
     orientation,
@@ -1020,11 +1250,11 @@ function VideoExportModal({
     const a = document.createElement("a");
     a.href = downloadUrl;
     const ts = (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
-    a.download = `document-${ts}.mp4`;
+    a.download = `document-${ts}.${completedOutputFormat}`;
     document.body.appendChild(a);
     a.click();
     document.body.removeChild(a);
-  }, [downloadUrl]);
+  }, [downloadUrl, completedOutputFormat]);
   const handleClose = useCallback3(() => {
     if (state === "capturing" || state === "encoding" || state === "preparing") {
       cancelExport();
@@ -1033,138 +1263,204 @@ function VideoExportModal({
     onClose();
   }, [state, cancelExport, resetExport, onClose]);
   const isExporting = state === "preparing" || state === "capturing" || state === "encoding";
-  return /* @__PURE__ */ jsx("div", { style: overlayStyle, onClick: handleClose, children: /* @__PURE__ */ jsxs("div", { style: modalStyle, onClick: (e) => e.stopPropagation(), children: [
-    /* @__PURE__ */ jsx("h2", { style: titleStyle, children: "Export Video" }),
-    state === "idle" && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("label", { style: labelStyle, children: "Quality" }),
-        /* @__PURE__ */ jsxs(
-          "select",
-          {
-            style: selectStyle,
-            value: quality,
-            onChange: (e) => setQuality(e.target.value),
-            children: [
-              /* @__PURE__ */ jsx("option", { value: "draft", children: "Draft \u2014 fast, lower quality" }),
-              /* @__PURE__ */ jsx("option", { value: "normal", children: "Normal \u2014 balanced" }),
-              /* @__PURE__ */ jsx("option", { value: "high", children: "High \u2014 best quality, slower" })
-            ]
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("label", { style: labelStyle, children: "Frame Rate" }),
-        /* @__PURE__ */ jsxs(
-          "select",
-          {
-            style: selectStyle,
-            value: fps,
-            onChange: (e) => setFps(Number(e.target.value)),
-            children: [
-              /* @__PURE__ */ jsx("option", { value: 15, children: "15 fps \u2014 fast export" }),
-              /* @__PURE__ */ jsx("option", { value: 24, children: "24 fps \u2014 cinematic" }),
-              /* @__PURE__ */ jsx("option", { value: 30, children: "30 fps \u2014 smooth" })
-            ]
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("label", { style: labelStyle, children: "Orientation" }),
-        /* @__PURE__ */ jsxs(
-          "select",
-          {
-            style: selectStyle,
-            value: orientation,
-            onChange: (e) => setOrientation(e.target.value),
-            children: [
-              /* @__PURE__ */ jsx("option", { value: "landscape", children: "Landscape (1920 \xD7 1080)" }),
-              /* @__PURE__ */ jsx("option", { value: "portrait", children: "Portrait (1080 \xD7 1920)" })
-            ]
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("label", { style: labelStyle, children: "Captions" }),
-        /* @__PURE__ */ jsxs(
-          "select",
-          {
-            style: selectStyle,
-            value: captionMode,
-            onChange: (e) => setCaptionMode(e.target.value),
-            children: [
-              /* @__PURE__ */ jsx("option", { value: "off", children: "None" }),
-              /* @__PURE__ */ jsx("option", { value: "standard", children: "Standard (top bar)" }),
-              /* @__PURE__ */ jsx("option", { value: "social", children: "Social media (large words)" })
-            ]
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { style: footerStyle, children: [
-        /* @__PURE__ */ jsx("button", { style: btnSecondary, onClick: handleClose, children: "Cancel" }),
-        /* @__PURE__ */ jsx("button", { style: btnPrimary, onClick: handleExport, children: "Export Video" })
-      ] })
-    ] }),
-    isExporting && /* @__PURE__ */ jsxs(Fragment, { children: [
-      backend && /* @__PURE__ */ jsx("p", { style: { fontSize: 12, color: "#8a7a5a", margin: "0 0 8px 0" }, children: "Encoder: WebCodecs (H.264)" }),
-      /* @__PURE__ */ jsx("div", { style: progressBarOuterStyle, children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            width: `${progress}%`,
-            height: "100%",
-            background: "#8B6914",
-            transition: "width 0.3s ease"
-          }
-        }
-      ) }),
-      /* @__PURE__ */ jsxs("p", { style: { fontSize: 13, margin: "0 0 4px 0" }, children: [
-        progress,
-        "% complete"
-      ] }),
-      /* @__PURE__ */ jsxs("p", { style: { fontSize: 12, color: "#8a7a5a", margin: 0 }, children: [
-        formatDuration(elapsed),
-        " elapsed",
-        estimatedRemaining > 0 && ` \xB7 ~${formatDuration(estimatedRemaining)} remaining`
-      ] }),
-      /* @__PURE__ */ jsx("div", { style: footerStyle, children: /* @__PURE__ */ jsx("button", { style: btnSecondary, onClick: cancelExport, children: "Cancel" }) })
-    ] }),
-    state === "complete" && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("p", { style: { fontSize: 14, margin: "0 0 8px 0", color: "#2d6a10" }, children: "Export complete!" }),
-      /* @__PURE__ */ jsxs("p", { style: { fontSize: 13, color: "#5a4a2a", margin: "0 0 4px 0" }, children: [
-        "File size: ",
-        (fileSize / (1024 * 1024)).toFixed(1),
-        " MB"
-      ] }),
-      audioIncluded ? /* @__PURE__ */ jsx("p", { style: { fontSize: 12, color: "#2d6a10", margin: "0 0 4px 0" }, children: "Audio included \u2713" }) : /* @__PURE__ */ jsxs("p", { style: { fontSize: 12, color: "#8a7a5a", margin: "0 0 4px 0" }, children: [
-        "Video only",
-        audioSkippedReason ? ` \u2014 ${audioSkippedReason}` : ""
-      ] }),
-      backend && /* @__PURE__ */ jsx("p", { style: { fontSize: 12, color: "#8a7a5a", margin: "0 0 12px 0" }, children: "Encoded with WebCodecs (H.264)" }),
-      /* @__PURE__ */ jsxs("div", { style: footerStyle, children: [
-        /* @__PURE__ */ jsx("button", { style: btnSecondary, onClick: handleClose, children: "Close" }),
-        /* @__PURE__ */ jsx("button", { style: btnPrimary, onClick: handleDownload, children: "Download MP4" })
-      ] })
-    ] }),
-    state === "error" && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("p", { style: { fontSize: 14, margin: "0 0 8px 0", color: "#a03020" }, children: "Export failed" }),
-      /* @__PURE__ */ jsx(
-        "p",
-        {
-          style: {
-            fontSize: 13,
-            color: "#5a4a2a",
-            margin: "0 0 12px 0",
-            wordBreak: "break-word"
-          },
-          children: error
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { style: footerStyle, children: [
-        /* @__PURE__ */ jsx("button", { style: btnSecondary, onClick: handleClose, children: "Close" }),
-        /* @__PURE__ */ jsx("button", { style: btnPrimary, onClick: handleExport, children: "Retry" })
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: { ...overlayStyle, background: palette.overlay },
+      "data-color-scheme": colorScheme,
+      onClick: handleClose,
+      children: /* @__PURE__ */ jsxs("div", { style: themedModalStyle, onClick: (e) => e.stopPropagation(), children: [
+        /* @__PURE__ */ jsx("h2", { style: themedTitleStyle, children: outputFormat === "gif" ? "Export Animated GIF" : "Export Video" }),
+        state === "idle" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { style: themedLabelStyle, children: "Format" }),
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                "aria-label": "Format",
+                style: themedSelectStyle,
+                value: outputFormat,
+                onChange: (e) => handleOutputFormatChange(e.target.value),
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "mp4", children: "MP4 video" }),
+                  /* @__PURE__ */ jsx("option", { value: "gif", children: "Animated GIF" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { style: themedLabelStyle, children: "Quality" }),
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                "aria-label": "Quality",
+                style: themedSelectStyle,
+                value: quality,
+                onChange: (e) => setQuality(e.target.value),
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "draft", children: "Draft \u2014 fast, lower quality" }),
+                  /* @__PURE__ */ jsx("option", { value: "normal", children: "Normal \u2014 balanced" }),
+                  /* @__PURE__ */ jsx("option", { value: "high", children: "High \u2014 best quality, slower" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { style: themedLabelStyle, children: "Frame Rate" }),
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                "aria-label": "Frame Rate",
+                style: themedSelectStyle,
+                value: fps,
+                onChange: (e) => setFps(Number(e.target.value)),
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: 10, children: "10 fps \u2014 recommended for GIF" }),
+                  /* @__PURE__ */ jsx("option", { value: 15, children: "15 fps \u2014 fast export" }),
+                  /* @__PURE__ */ jsx("option", { value: 24, children: "24 fps \u2014 cinematic" }),
+                  /* @__PURE__ */ jsx("option", { value: 30, children: "30 fps \u2014 smooth" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { style: themedLabelStyle, children: "Orientation" }),
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                "aria-label": "Orientation",
+                style: themedSelectStyle,
+                value: orientation,
+                onChange: (e) => setOrientation(e.target.value),
+                children: [
+                  /* @__PURE__ */ jsxs("option", { value: "landscape", children: [
+                    "Landscape (",
+                    outputFormat === "gif" ? "960 \xD7 540" : "1920 \xD7 1080",
+                    ")"
+                  ] }),
+                  /* @__PURE__ */ jsxs("option", { value: "portrait", children: [
+                    "Portrait (",
+                    outputFormat === "gif" ? "540 \xD7 960" : "1080 \xD7 1920",
+                    ")"
+                  ] })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { style: themedLabelStyle, children: "Captions" }),
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                "aria-label": "Captions",
+                style: themedSelectStyle,
+                value: captionMode,
+                onChange: (e) => setCaptionMode(e.target.value),
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "off", children: "None" }),
+                  /* @__PURE__ */ jsx("option", { value: "standard", children: "Standard (top bar)" }),
+                  /* @__PURE__ */ jsx("option", { value: "social", children: "Social media (large words)" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { style: themedLabelStyle, children: "Animations & transitions" }),
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                "aria-label": "Animations and transitions",
+                style: themedSelectStyle,
+                value: animationsEnabled ? "enabled" : "disabled",
+                onChange: (e) => setAnimationsEnabled(e.target.value === "enabled"),
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "enabled", children: "Enabled" }),
+                  /* @__PURE__ */ jsx("option", { value: "disabled", children: "Disabled \u2014 smaller files" })
+                ]
+              }
+            ),
+            outputFormat === "gif" && animationsEnabled && /* @__PURE__ */ jsx("p", { style: { fontSize: 12, color: palette.muted, margin: "-6px 0 12px" }, children: "Disabling motion is recommended for much smaller GIFs." })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: footerStyle, children: [
+            /* @__PURE__ */ jsx("button", { style: themedSecondaryButtonStyle, onClick: handleClose, children: "Cancel" }),
+            /* @__PURE__ */ jsx("button", { style: themedPrimaryButtonStyle, onClick: handleExport, children: outputFormat === "gif" ? "Export GIF" : "Export Video" })
+          ] })
+        ] }),
+        isExporting && /* @__PURE__ */ jsxs(Fragment, { children: [
+          backend && /* @__PURE__ */ jsxs("p", { style: { fontSize: 12, color: palette.muted, margin: "0 0 8px 0" }, children: [
+            "Encoder: ",
+            encoderLabel(completedOutputFormat, backend)
+          ] }),
+          /* @__PURE__ */ jsx("div", { style: { ...progressBarOuterStyle, background: palette.secondary }, children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                width: `${progress}%`,
+                height: "100%",
+                background: palette.primary,
+                transition: "width 0.3s ease"
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("p", { style: { fontSize: 13, margin: "0 0 4px 0" }, children: [
+            progress,
+            "% complete"
+          ] }),
+          /* @__PURE__ */ jsxs("p", { style: { fontSize: 12, color: palette.muted, margin: 0 }, children: [
+            formatDuration(elapsed),
+            " elapsed",
+            estimatedRemaining > 0 && ` \xB7 ~${formatDuration(estimatedRemaining)} remaining`
+          ] }),
+          /* @__PURE__ */ jsx("div", { style: footerStyle, children: /* @__PURE__ */ jsx("button", { style: themedSecondaryButtonStyle, onClick: cancelExport, children: "Cancel" }) })
+        ] }),
+        state === "complete" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("p", { style: { fontSize: 14, margin: "0 0 8px 0", color: palette.success }, children: "Export complete!" }),
+          /* @__PURE__ */ jsxs("p", { style: { fontSize: 13, color: palette.label, margin: "0 0 4px 0" }, children: [
+            "File size: ",
+            (fileSize / (1024 * 1024)).toFixed(1),
+            " MB"
+          ] }),
+          completedOutputFormat === "gif" ? /* @__PURE__ */ jsx("p", { style: { fontSize: 12, color: palette.muted, margin: "0 0 4px 0" }, children: "Animated GIF does not include audio." }) : audioIncluded ? /* @__PURE__ */ jsx("p", { style: { fontSize: 12, color: palette.success, margin: "0 0 4px 0" }, children: "Audio included \u2713" }) : /* @__PURE__ */ jsxs("p", { style: { fontSize: 12, color: palette.muted, margin: "0 0 4px 0" }, children: [
+            "Video only",
+            audioSkippedReason ? ` \u2014 ${audioSkippedReason}` : ""
+          ] }),
+          backend && /* @__PURE__ */ jsxs("p", { style: { fontSize: 12, color: palette.muted, margin: "0 0 12px 0" }, children: [
+            "Encoded with ",
+            encoderLabel(completedOutputFormat, backend)
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: footerStyle, children: [
+            /* @__PURE__ */ jsx("button", { style: themedSecondaryButtonStyle, onClick: handleClose, children: "Close" }),
+            /* @__PURE__ */ jsxs("button", { style: themedPrimaryButtonStyle, onClick: handleDownload, children: [
+              "Download ",
+              completedOutputFormat.toUpperCase()
+            ] })
+          ] })
+        ] }),
+        state === "error" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("p", { style: { fontSize: 14, margin: "0 0 8px 0", color: palette.danger }, children: "Export failed" }),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              style: {
+                fontSize: 13,
+                color: palette.label,
+                margin: "0 0 12px 0",
+                wordBreak: "break-word"
+              },
+              children: error
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { style: footerStyle, children: [
+            /* @__PURE__ */ jsx("button", { style: themedSecondaryButtonStyle, onClick: handleClose, children: "Close" }),
+            /* @__PURE__ */ jsxs("button", { style: themedPrimaryButtonStyle, onClick: handleExport, children: [
+              "Retry ",
+              outputFormat === "gif" ? "GIF" : "video"
+            ] })
+          ] })
+        ] })
       ] })
-    ] })
-  ] }) });
+    }
+  );
 }
 
 // src/VideoExportButton.tsx
@@ -1178,15 +1474,17 @@ function VideoExportButton({
   images,
   audio,
   defaultConfig,
-  label = "Export Video",
+  colorScheme,
+  label,
   style,
   disabled
 }) {
   const [showModal, setShowModal] = useState3(false);
+  const resolvedLabel = label ?? (defaultConfig?.outputFormat === "gif" ? "Export GIF" : "Export Video");
   const handleOpen = useCallback4(() => setShowModal(true), []);
   const handleClose = useCallback4(() => setShowModal(false), []);
   return /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx2("button", { onClick: handleOpen, disabled, style, children: label }),
+    /* @__PURE__ */ jsx2("button", { onClick: handleOpen, disabled, style, children: resolvedLabel }),
     showModal && createPortal(
       /* @__PURE__ */ jsx2(
         VideoExportModal,
@@ -1197,6 +1495,7 @@ function VideoExportButton({
           images,
           audio,
           defaultConfig,
+          colorScheme,
           onClose: handleClose
         }
       ),