wizz-method 1.0.2 → 1.1.0

package/src/skills-lib/huashu-design/scripts/render-video-seek.js

@@ -0,0 +1,238 @@
+#!/usr/bin/env node
+/**
+ * HTML animation → MP4 via deterministic frame-by-frame SEEK (Playwright + ffmpeg).
+ *
+ * 这是 render-video.js（Playwright recordVideo）的逐帧替代渲染器。技术内核借鉴
+ * HeyGen HyperFrames（Apache 2.0）的「冻结时钟 + seek 到时间戳截图」思路，但不引入
+ * 任何第三方包——只用本 skill 已有的 playwright + ffmpeg，runtime 中立。
+ *
+ * 相比 render-video.js 解决的三个死结（见 references/video-export.md §「seek 渲染」）：
+ *   1. 帧率不再被 Chromium headless compositor 锁死 25fps —— --fps 原生任意帧率
+ *   2. 不再需要 convert-formats.sh 的 minterpolate 事后插帧（有 ghosting + macOS
+ *      QuickTime 兼容 bug，见 animation-pitfalls §14）—— 每帧都是真实 seek 画面
+ *   3. 不录屏 → 无开头黑帧 → 不需要 --trim / --fontwait / __ready 偏移那套逻辑
+ *   额外：seek 到时间戳截图，同输入同输出 deterministic（recordVideo 是实时录制非确定性）
+ *
+ * 前提：动画必须走 Stage 时钟（assets/animations.jsx 的 <Stage> 或 narration_stage.jsx
+ * 的 <NarrationStage>），它们会响应 window.__seekRender 冻结自驱时钟、并暴露
+ * window.__seek(t)。纯 CSS @keyframes / Lottie / 非 Stage 驱动的动画不吃 __seek，
+ * 这类请继续用 render-video.js。
+ *
+ * Requires: global playwright (`npm install -g playwright`), ffmpeg on PATH.
+ *
+ * Usage:
+ *   NODE_PATH=$(npm root -g) node render-video-seek.js <html-file> \
+ *     [--duration=30] [--fps=60] [--width=1920] [--height=1080] \
+ *     [--concurrency=4] [--settle=2] [--keep-chrome]
+ *
+ * Output: next to the HTML file, same basename with .mp4 suffix.
+ */
+
+const { chromium } = require('playwright');
+const path = require('path');
+const fs = require('fs');
+const { spawnSync } = require('child_process');
+
+function arg(name, def) {
+  const p = process.argv.find(a => a.startsWith('--' + name + '='));
+  return p ? p.slice(name.length + 3) : def;
+}
+function hasFlag(name) {
+  return process.argv.includes('--' + name);
+}
+
+const HTML_FILE = process.argv[2];
+if (!HTML_FILE || HTML_FILE.startsWith('--')) {
+  console.error('Usage: node render-video-seek.js <html-file>');
+  console.error('Example: NODE_PATH=$(npm root -g) node render-video-seek.js my-animation.html --fps=60');
+  process.exit(1);
+}
+
+const DURATION    = parseFloat(arg('duration', '30'));
+const FPS         = parseFloat(arg('fps', '60'));      // 原生任意帧率，默认真 60fps
+const WIDTH       = parseInt(arg('width', '1920'));
+const HEIGHT      = parseInt(arg('height', '1080'));
+const CONCURRENCY = Math.max(1, parseInt(arg('concurrency', '4')));  // 并行 worker 数（每个一个 page）
+const SETTLE      = Math.max(1, parseInt(arg('settle', '2')));        // seek 后等几个 rAF 再截图
+const READY_TIMEOUT = parseFloat(arg('readytimeout', '8'));
+const KEEP_CHROME = hasFlag('keep-chrome');
+
+const HTML_ABS = path.resolve(HTML_FILE);
+const BASENAME = path.basename(HTML_FILE, path.extname(HTML_FILE));
+const DIR      = path.dirname(HTML_ABS);
+const TMP_DIR  = path.join(DIR, '.seek-tmp-' + Date.now() + '-' + process.pid);
+const MP4_OUT  = path.join(DIR, BASENAME + '.mp4');
+
+// 与 render-video.js 完全一致的 chrome 隐藏规则（保证两条链路出片外观一致）
+const HIDE_CHROME_CSS = `
+  .no-record,
+  .progress, .progress-bar,
+  .counter, .tCur,
+  .phases, .phase-label, .phase,
+  .replay, button.replay,
+  .masthead, .kicker, .title,
+  .footer,
+  [data-role="chrome"], [data-record="hidden"] {
+    display: none !important;
+  }
+`;
+
+const TOTAL_FRAMES = Math.round(FPS * DURATION);
+
+console.log(`▸ Seek-rendering: ${HTML_FILE}`);
+console.log(`  size: ${WIDTH}x${HEIGHT} · ${FPS}fps · duration: ${DURATION}s · frames: ${TOTAL_FRAMES} · workers: ${CONCURRENCY}`);
+console.log(`  output: ${MP4_OUT}`);
+
+// 在 page 上下文里运行：等 SETTLE 个 rAF（让 React/Babel commit + 布局稳定后再截图）
+async function waitRaf(page, n) {
+  await page.evaluate((count) => new Promise(resolve => {
+    let i = 0;
+    const step = () => { i++; (i >= count) ? resolve() : requestAnimationFrame(step); };
+    requestAnimationFrame(step);
+  }), n);
+}
+
+// 一个 worker：开一个 page，goto，等 __seek 就绪，渲染分配给它的帧
+async function renderFrames(context, url, frames) {
+  const page = await context.newPage();
+  await page.goto(url, { waitUntil: 'load', timeout: 60000 });
+
+  // Stage / NarrationStage 在 __seekRender 模式下会暴露 window.__seek 并冻结自驱时钟
+  await page.waitForFunction(
+    () => window.__ready === true && typeof window.__seek === 'function',
+    { timeout: READY_TIMEOUT * 1000 },
+  );
+
+  for (const f of frames) {
+    const t = f / FPS;
+    await page.evaluate((tt) => window.__seek(tt), t);
+    await waitRaf(page, SETTLE);
+    await page.screenshot({
+      path: path.join(TMP_DIR, 'frame-' + String(f).padStart(6, '0') + '.png'),
+      clip: { x: 0, y: 0, width: WIDTH, height: HEIGHT },
+    });
+  }
+  await page.close();
+}
+
+(async () => {
+  fs.mkdirSync(TMP_DIR, { recursive: true });
+
+  const browser = await chromium.launch();
+  const url = 'file://' + HTML_ABS;
+
+  const context = await browser.newContext({
+    viewport: { width: WIDTH, height: HEIGHT },
+    deviceScaleFactor: 1,
+  });
+
+  // 关键信号：__seekRender 让 Stage / NarrationStage 冻结 wall-clock rAF，改由外部 __seek 推帧
+  // __recording 沿用，让 Stage 强制 loop=false（复用既有约定）
+  await context.addInitScript(() => {
+    window.__recording = true;
+    window.__seekRender = true;
+  });
+
+  if (!KEEP_CHROME) {
+    // 与 render-video.js 同款 chrome 隐藏（CSS + 固定栏启发式）
+    await context.addInitScript(css => {
+      const HIDE_MARK = 'data-video-hidden';
+      function injectStyle() {
+        const style = document.createElement('style');
+        style.setAttribute('data-inject', 'render-video-chrome-hide');
+        style.textContent = css;
+        (document.head || document.documentElement).appendChild(style);
+      }
+      function hideChromeBars() {
+        const vh = window.innerHeight;
+        document.querySelectorAll('div, nav, header, footer, section, aside')
+          .forEach(el => {
+            if (el.hasAttribute(HIDE_MARK)) return;
+            if (el.dataset.recordKeep === 'true') return;
+            const s = getComputedStyle(el);
+            if (s.position !== 'fixed' && s.position !== 'sticky') return;
+            const r = el.getBoundingClientRect();
+            if (r.height > vh * 0.25) return;
+            const atBottom = r.bottom >= vh - 30;
+            const atTop = r.top <= 30 && r.height < 80;
+            if (!atBottom && !atTop) return;
+            const txt = el.textContent || '';
+            const hasBtn = !!el.querySelector('button, [role="button"]');
+            const hasCtrls = /[⏸▶⏮⏭↻↺↩↪]|\d+\.\d+\s*s/.test(txt);
+            if (hasBtn || hasCtrls) {
+              el.style.setProperty('display', 'none', 'important');
+              el.setAttribute(HIDE_MARK, '1');
+            }
+          });
+      }
+      const start = () => {
+        injectStyle();
+        hideChromeBars();
+        const obs = new MutationObserver(hideChromeBars);
+        obs.observe(document.body, { childList: true, subtree: true });
+        setTimeout(() => obs.disconnect(), 6000);
+      };
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', start, { once: true });
+      } else {
+        start();
+      }
+    }, HIDE_CHROME_CSS);
+  }
+
+  // 把帧 round-robin 分给 CONCURRENCY 个 worker（每个 page 独立 window，seek 互不干扰）
+  const buckets = Array.from({ length: CONCURRENCY }, () => []);
+  for (let f = 0; f < TOTAL_FRAMES; f++) buckets[f % CONCURRENCY].push(f);
+
+  console.log(`▸ Capturing ${TOTAL_FRAMES} frames across ${CONCURRENCY} workers…`);
+  try {
+    await Promise.all(buckets.map(b => b.length ? renderFrames(context, url, b) : Promise.resolve()));
+  } catch (e) {
+    const msg = String(e && e.message || e);
+    if (/__seek|__ready/.test(msg)) {
+      console.error('');
+      console.error('✗ 动画没有暴露 window.__seek（或未就绪）。');
+      console.error('  seek 渲染只支持走 Stage 时钟的动画（assets/animations.jsx 的 <Stage>');
+      console.error('  或 narration_stage.jsx 的 <NarrationStage>）。纯 CSS @keyframes / Lottie /');
+      console.error('  手写非 Stage 动画请改用 render-video.js。');
+      console.error('');
+    }
+    await browser.close();
+    fs.rmSync(TMP_DIR, { recursive: true, force: true });
+    console.error(msg.slice(0, 500));
+    process.exit(1);
+  }
+
+  await browser.close();
+
+  const pngCount = fs.readdirSync(TMP_DIR).filter(f => f.endsWith('.png')).length;
+  if (pngCount === 0) {
+    console.error('✗ 没有截到任何帧');
+    process.exit(1);
+  }
+  console.log(`▸ Captured ${pngCount}/${TOTAL_FRAMES} frames. Encoding H.264…`);
+
+  // PNG 序列 → MP4。无 trim（本来就没黑帧），输入输出帧率都设 FPS。
+  const ffmpeg = spawnSync('ffmpeg', [
+    '-y',
+    '-framerate', String(FPS),
+    '-i', path.join(TMP_DIR, 'frame-%06d.png'),
+    '-c:v', 'libx264',
+    '-pix_fmt', 'yuv420p',
+    '-crf', '18',
+    '-preset', 'medium',
+    '-r', String(FPS),
+    '-movflags', '+faststart',
+    MP4_OUT,
+  ], { stdio: ['ignore', 'ignore', 'pipe'] });
+
+  if (ffmpeg.status !== 0) {
+    console.error('✗ ffmpeg failed:\n' + ffmpeg.stderr.toString().slice(-2000));
+    process.exit(1);
+  }
+
+  fs.rmSync(TMP_DIR, { recursive: true, force: true });
+
+  const mp4Size = (fs.statSync(MP4_OUT).size / 1024 / 1024).toFixed(1);
+  console.log(`✓ Done: ${MP4_OUT} (${mp4Size} MB · ${FPS}fps native)`);
+})();

package/src/skills-lib/huashu-design/scripts/render-video.js

@@ -0,0 +1,289 @@
+#!/usr/bin/env node
+/**
+ * HTML animation → MP4 via Playwright recordVideo + ffmpeg.
+ *
+ * Requires: global playwright (`npm install -g playwright`), ffmpeg on PATH.
+ *
+ * Usage:
+ *   NODE_PATH=$(npm root -g) node render-video.js <html-file> \
+ *     [--duration=30] [--width=1920] [--height=1080] \
+ *     [--trim=<seconds>] [--fontwait=1.5] [--readytimeout=8] \
+ *     [--keep-chrome]
+ *
+ * Design:
+ *   1. Warmup context (no record) — caches fonts/assets, closes cleanly
+ *   2. Record context (fresh, recordVideo ON) — WebM starts writing at
+ *      context creation. Babel-standalone compile + React mount +
+ *      fonts.ready can take 1.5-3s, during which WebM writes black frames.
+ *      We measure this by waiting for window.__ready (set by animations.jsx
+ *      Stage component after first paint), then trim exactly that offset.
+ *   3. addInitScript injects CSS hiding "chrome" elements (progress bar,
+ *      replay button, masthead, footer, etc.) that are fine for human
+ *      debugging but shouldn't appear in exported video.
+ *
+ * Animation-ready signal:
+ *   Set `window.__ready = true` in your HTML after first paint. This tells
+ *   the recorder "animation has started rendering — treat now as t=0".
+ *   If you use animations.jsx, Stage does this automatically. Otherwise
+ *   add: `document.fonts.ready.then(() => requestAnimationFrame(() => { window.__ready = true }));`
+ *   after your first render call.
+ *
+ *   Without __ready, falls back to --fontwait=1.5s (may leave 1-2s of black
+ *   at the start). Pass --trim=<seconds> to override manually.
+ *
+ * Chrome elements hidden by default (all common class names + `.no-record`
+ * convention). Pass --keep-chrome to disable this and see raw HTML.
+ *
+ * Output: next to the HTML file, same basename with .mp4 suffix.
+ */
+
+const { chromium } = require('playwright');
+const path = require('path');
+const fs = require('fs');
+const { spawnSync } = require('child_process');
+
+function arg(name, def) {
+  const p = process.argv.find(a => a.startsWith('--' + name + '='));
+  return p ? p.slice(name.length + 3) : def;
+}
+function hasFlag(name) {
+  return process.argv.includes('--' + name);
+}
+
+const HTML_FILE = process.argv[2];
+if (!HTML_FILE || HTML_FILE.startsWith('--')) {
+  console.error('Usage: node render-video.js <html-file>');
+  console.error('Example: NODE_PATH=$(npm root -g) node render-video.js my-animation.html');
+  process.exit(1);
+}
+
+const DURATION  = parseFloat(arg('duration', '30'));
+const WIDTH     = parseInt(arg('width', '1920'));
+const HEIGHT    = parseInt(arg('height', '1080'));
+const TRIM_OVERRIDE = arg('trim', null);              // manual override (seconds). If unset, auto-detected.
+const FONT_WAIT = parseFloat(arg('fontwait', '1.5')); // fallback when no __ready signal
+const READY_TIMEOUT = parseFloat(arg('readytimeout', '8'));
+const KEEP_CHROME = hasFlag('keep-chrome');
+
+const HTML_ABS = path.resolve(HTML_FILE);
+const BASENAME = path.basename(HTML_FILE, path.extname(HTML_FILE));
+const DIR      = path.dirname(HTML_ABS);
+const TMP_DIR  = path.join(DIR, '.video-tmp-' + Date.now() + '-' + process.pid);
+const MP4_OUT  = path.join(DIR, BASENAME + '.mp4');
+
+// CSS to hide "chrome" elements during recording.
+// Covers class-name conventions seen across skill-built animations,
+// plus a `.no-record` explicit opt-out class.
+const HIDE_CHROME_CSS = `
+  .no-record,
+  .progress, .progress-bar,
+  .counter, .tCur,
+  .phases, .phase-label, .phase,
+  .replay, button.replay,
+  .masthead, .kicker, .title,
+  .footer,
+  [data-role="chrome"], [data-record="hidden"] {
+    display: none !important;
+  }
+`;
+
+console.log(`▸ Rendering: ${HTML_FILE}`);
+console.log(`  size: ${WIDTH}x${HEIGHT} · duration: ${DURATION}s · hide-chrome: ${!KEEP_CHROME}`);
+console.log(`  output: ${MP4_OUT}`);
+
+(async () => {
+  fs.mkdirSync(TMP_DIR, { recursive: true });
+
+  const browser = await chromium.launch();
+  const url = 'file://' + HTML_ABS;
+
+  // ── Phase 1: WARMUP (no recording, caches fonts/assets) ─────────────
+  console.log('▸ Warmup (caching fonts)…');
+  const warmupCtx = await browser.newContext({
+    viewport: { width: WIDTH, height: HEIGHT },
+  });
+  const warmupPage = await warmupCtx.newPage();
+  // 'load' not 'networkidle' — unpkg/Google Fonts can keep connections alive
+  // past our 30s budget even after all critical resources are in. __ready
+  // flag + FONT_WAIT handle animation-readiness properly.
+  await warmupPage.goto(url, { waitUntil: 'load', timeout: 60000 });
+  await warmupPage.waitForTimeout(FONT_WAIT * 1000);
+  await warmupCtx.close();
+
+  // ── Phase 2: RECORD (fresh context, animation from t=0) ─────────────
+  console.log('▸ Recording (clean start)…');
+  const recordCtx = await browser.newContext({
+    viewport: { width: WIDTH, height: HEIGHT },
+    deviceScaleFactor: 1,
+    recordVideo: {
+      dir: TMP_DIR,
+      size: { width: WIDTH, height: HEIGHT },
+    },
+  });
+
+  // Tell the page it's being recorded — animations.jsx Stage reads this
+  // and forces loop=false so the export ends on the final frame instead of
+  // capturing the start of the next cycle. Hand-written Stage components
+  // should also honor this signal (see animation-pitfalls.md §13).
+  await recordCtx.addInitScript(() => { window.__recording = true; });
+
+  // Inject CSS + JS heuristic to hide "chrome" elements.
+  // Two layers:
+  //   A. CSS selectors for common class-name conventions (cheap)
+  //   B. JS heuristic for fixed-position bars containing buttons or time
+  //      readouts (catches inline-styled chrome like <Stage> controls)
+  // Persists across reloads via addInitScript.
+  if (!KEEP_CHROME) {
+    await recordCtx.addInitScript(css => {
+      const HIDE_MARK = 'data-video-hidden';
+
+      function injectStyle() {
+        const style = document.createElement('style');
+        style.setAttribute('data-inject', 'render-video-chrome-hide');
+        style.textContent = css;
+        (document.head || document.documentElement).appendChild(style);
+      }
+
+      function hideChromeBars() {
+        const vh = window.innerHeight;
+        document.querySelectorAll('div, nav, header, footer, section, aside')
+          .forEach(el => {
+            if (el.hasAttribute(HIDE_MARK)) return;
+            if (el.dataset.recordKeep === 'true') return;
+            const s = getComputedStyle(el);
+            if (s.position !== 'fixed' && s.position !== 'sticky') return;
+            const r = el.getBoundingClientRect();
+            // Only skinny bars (not full-screen overlays)
+            if (r.height > vh * 0.25) return;
+            const atBottom = r.bottom >= vh - 30;
+            const atTop = r.top <= 30 && r.height < 80;
+            if (!atBottom && !atTop) return;
+            // Chrome-like: contains button or scrubber/time glyphs
+            const txt = el.textContent || '';
+            const hasBtn = !!el.querySelector('button, [role="button"]');
+            const hasCtrls = /[⏸▶⏮⏭↻↺↩↪]|\d+\.\d+\s*s/.test(txt);
+            if (hasBtn || hasCtrls) {
+              el.style.setProperty('display', 'none', 'important');
+              el.setAttribute(HIDE_MARK, '1');
+            }
+          });
+      }
+
+      const start = () => {
+        injectStyle();
+        hideChromeBars();
+        // Re-run as React/Vue commits DOM changes
+        const obs = new MutationObserver(hideChromeBars);
+        obs.observe(document.body, { childList: true, subtree: true });
+        setTimeout(() => obs.disconnect(), 6000);
+      };
+
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', start, { once: true });
+      } else {
+        start();
+      }
+    }, HIDE_CHROME_CSS);
+  }
+
+  // Record context opens page. The WebM starts writing the moment the
+  // context is created — so we track T0 here and measure how many seconds
+  // elapse before the animation is actually ready (Babel compile + React
+  // mount + fonts.ready). That elapsed time = exact trim offset.
+  const T0 = Date.now();
+  const page = await recordCtx.newPage();
+  await page.goto(url, { waitUntil: 'load', timeout: 60000 });
+
+  // Wait for animation ready signal. Stage component (animations.jsx) sets
+  // window.__ready = true on its first rAF after mount + fonts.ready.
+  // Fallback: if HTML doesn't set __ready within READY_TIMEOUT, use fontwait.
+  let animationStartSec;
+  const hasReady = await page.waitForFunction(
+    () => window.__ready === true,
+    { timeout: READY_TIMEOUT * 1000 },
+  ).then(() => true).catch(() => false);
+
+  if (hasReady) {
+    // 第二道防线：主动把动画 time 归零——对付 HTML 不严格遵守 starter tick 模板
+    // 的情况（例如 lastTick 用 performance.now() 导致字体加载时间被算进首帧 dt）
+    // 详见 references/animation-pitfalls.md §12
+    const seekCorrected = await page.evaluate(() => {
+      if (typeof window.__seek === 'function') {
+        window.__seek(0);
+        return true;
+      }
+      return false;
+    });
+    if (seekCorrected) {
+      // 等两个 rAF 让 seek 生效并渲染出 t=0 的画面
+      await page.evaluate(() => new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r))));
+    }
+    animationStartSec = (Date.now() - T0) / 1000;
+    console.log(`▸ Ready at ${animationStartSec.toFixed(2)}s (from window.__ready${seekCorrected ? ' + __seek(0) correction' : ''})`);
+  } else {
+    await page.waitForTimeout(FONT_WAIT * 1000);
+    animationStartSec = (Date.now() - T0) / 1000;
+    // Fallback offset is unreliable: animation may have started in raf loop
+    // already, so trim could land mid-cycle. Add 0.5s safety margin (see
+    // animation-pitfalls.md §13). Loud warning so user knows to fix the HTML.
+    console.log('');
+    console.log(`  ⚠️  WARNING: window.__ready signal not detected within ${READY_TIMEOUT}s`);
+    console.log(`     Recording will use fallback trim of ${animationStartSec.toFixed(2)}s + 0.5s safety margin.`);
+    console.log(`     This is UNRELIABLE — your video may start mid-animation or skip frames.`);
+    console.log('');
+    console.log(`     FIX: in your HTML's animation tick (or rAF first frame), add:`);
+    console.log(`        window.__ready = true;`);
+    console.log(`     animations.jsx-based HTML does this automatically. If you wrote your`);
+    console.log(`     own Stage, see references/animation-pitfalls.md §12 for the pattern.`);
+    console.log('');
+  }
+
+  // Now let the animation play out its full duration
+  await page.waitForTimeout(DURATION * 1000 + 300);
+
+  await page.close();
+  await recordCtx.close();
+  await browser.close();
+
+  const webmFiles = fs.readdirSync(TMP_DIR).filter(f => f.endsWith('.webm'));
+  if (webmFiles.length === 0) {
+    console.error('✗ No webm produced');
+    process.exit(1);
+  }
+  const webmPath = path.join(TMP_DIR, webmFiles[0]);
+  console.log(`▸ WebM: ${(fs.statSync(webmPath).size / 1024 / 1024).toFixed(1)} MB`);
+
+  // Resolve final trim offset:
+  //   - manual --trim=X       → use X (explicit user override)
+  //   - hasReady              → animationStartSec + 0.05s (Babel-commit nudge)
+  //   - fallback (no __ready) → animationStartSec + 0.5s safety margin (raf
+  //                             loop may have started running already; without
+  //                             this we'd capture mid-cycle frames)
+  const resolvedTrim = TRIM_OVERRIDE !== null
+    ? parseFloat(TRIM_OVERRIDE)
+    : animationStartSec + (hasReady ? 0.05 : 0.5);
+
+  console.log(`▸ ffmpeg: trim=${resolvedTrim.toFixed(2)}s${TRIM_OVERRIDE !== null ? ' (manual)' : ' (auto)'}, encode H.264…`);
+  const ffmpeg = spawnSync('ffmpeg', [
+    '-y',
+    '-ss', String(resolvedTrim),
+    '-i', webmPath,
+    '-t', String(DURATION),
+    '-c:v', 'libx264',
+    '-pix_fmt', 'yuv420p',
+    '-crf', '18',
+    '-preset', 'medium',
+    '-movflags', '+faststart',
+    MP4_OUT,
+  ], { stdio: ['ignore', 'ignore', 'pipe'] });
+
+  if (ffmpeg.status !== 0) {
+    console.error('✗ ffmpeg failed:\n' + ffmpeg.stderr.toString().slice(-2000));
+    process.exit(1);
+  }
+
+  fs.rmSync(TMP_DIR, { recursive: true, force: true });
+
+  const mp4Size = (fs.statSync(MP4_OUT).size / 1024 / 1024).toFixed(1);
+  console.log(`✓ Done: ${MP4_OUT} (${mp4Size} MB)`);
+})();