voila-recorder 0.4.0

package/overlay.js

@@ -0,0 +1,157 @@
+// In-page overlay: synthetic cursor, click ripple, eased scrolling.
+// Injected via addInitScript (every navigation) and page.evaluate (idempotent).
+
+const OVERLAY_SOURCE = `(() => {
+  if (window.__voila) return;
+
+  const CURSOR_SVG = '<svg width="26" height="30" viewBox="0 0 26 30" xmlns="http://www.w3.org/2000/svg">' +
+    '<path d="M3 1.5 L3 24 L8.7 18.8 L12.6 27.6 L16.4 25.9 L12.5 17.2 L20 16.6 Z" ' +
+    'fill="#1b1b1f" stroke="#ffffff" stroke-width="1.7" stroke-linejoin="round"/></svg>';
+
+  const ease = t => (t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2);
+
+  let cursorEl = null;
+  let cur = { x: -60, y: -60 };
+
+  function install() {
+    if (cursorEl && document.documentElement.contains(cursorEl)) return;
+    cursorEl = document.createElement('div');
+    cursorEl.id = '__voila_cursor';
+    cursorEl.innerHTML = CURSOR_SVG;
+    Object.assign(cursorEl.style, {
+      position: 'fixed', left: '0', top: '0', zIndex: '2147483647',
+      pointerEvents: 'none', filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.35))',
+      transform: 'translate3d(' + cur.x + 'px,' + cur.y + 'px,0)'
+    });
+    (document.body || document.documentElement).appendChild(cursorEl);
+  }
+
+  function render() {
+    if (cursorEl) cursorEl.style.transform = 'translate3d(' + cur.x + 'px,' + cur.y + 'px,0)';
+  }
+
+  window.__voila = {
+    jump(x, y) { cur = { x, y }; install(); render(); },
+
+    moveTo(x, y, dur) {
+      install();
+      return new Promise(res => {
+        const sx = cur.x, sy = cur.y, t0 = performance.now();
+        const step = now => {
+          const p = Math.min(1, (now - t0) / dur), e = ease(p);
+          cur = { x: sx + (x - sx) * e, y: sy + (y - sy) * e };
+          render();
+          if (p < 1) requestAnimationFrame(step); else res();
+        };
+        requestAnimationFrame(step);
+      });
+    },
+
+    ripple() {
+      install();
+      const ring = (size, delay, width, color) => {
+        const r = document.createElement('div');
+        Object.assign(r.style, {
+          position: 'fixed', left: (cur.x - size / 2) + 'px', top: (cur.y - size / 2) + 'px',
+          width: size + 'px', height: size + 'px', borderRadius: '50%',
+          border: width + 'px solid ' + color, zIndex: '2147483646',
+          pointerEvents: 'none', opacity: '0'
+        });
+        (document.body || document.documentElement).appendChild(r);
+        r.animate(
+          [{ transform: 'scale(0.35)', opacity: 0.95 }, { transform: 'scale(1.9)', opacity: 0 }],
+          { duration: 700, delay, easing: 'cubic-bezier(.2,.7,.3,1)' }
+        ).onfinish = () => r.remove();
+      };
+      ring(58, 0, 3.5, 'rgba(255,255,255,0.95)');
+      ring(58, 130, 3, 'rgba(110,165,255,0.9)');
+    },
+
+    press() {
+      install();
+      const svg = cursorEl.firstElementChild;
+      if (!svg) return;
+      svg.style.transformOrigin = '6px 4px';
+      svg.animate(
+        [{ transform: 'scale(1)' }, { transform: 'scale(0.76)' }, { transform: 'scale(1)' }],
+        { duration: 280, easing: 'ease-out' }
+      );
+    },
+
+    highlight(x, y, w, h) {
+      const pad = 6;
+      const el = document.createElement('div');
+      Object.assign(el.style, {
+        position: 'fixed', left: (x - pad) + 'px', top: (y - pad) + 'px',
+        width: (w + pad * 2) + 'px', height: (h + pad * 2) + 'px',
+        border: '2.5px solid rgba(110,165,255,0.95)', borderRadius: '10px',
+        boxShadow: '0 0 0 5px rgba(110,165,255,0.18)',
+        zIndex: '2147483645', pointerEvents: 'none', opacity: '0'
+      });
+      (document.body || document.documentElement).appendChild(el);
+      el.animate(
+        [{ opacity: 0, transform: 'scale(1.06)' }, { opacity: 1, transform: 'scale(1)', offset: 0.25 },
+         { opacity: 1, transform: 'scale(1)', offset: 0.75 }, { opacity: 0, transform: 'scale(1)' }],
+        { duration: 1200, easing: 'ease-out' }
+      ).onfinish = () => el.remove();
+    },
+
+    slide(o) {
+      install();
+      const esc = s => (s || '').replace(/[<>&"]/g, c => ({ '<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;' }[c]));
+      const accent = /^#[0-9a-fA-F]{3,8}$/.test(o.accent || '') ? o.accent : '#d97d43';
+      const titleWords = esc(o.title).split(' ');
+      const words = titleWords.map((w, i) =>
+        '<span style="display:inline-block;opacity:0;transform:translateY(36px);' +
+        'animation:__vRise .65s cubic-bezier(.16,1,.3,1) ' + (0.15 + i * 0.09).toFixed(2) + 's forwards">' + w + '</span>'
+      ).join(' ');
+      const after = (0.15 + titleWords.length * 0.09);
+      const el = document.createElement('div');
+      el.style.cssText = 'position:fixed;inset:0;z-index:2147483645;display:flex;flex-direction:column;' +
+        'align-items:center;justify-content:center;opacity:0;transition:opacity .45s ease;' +
+        'background:linear-gradient(135deg,#0d0d12 0%,#161119 55%,#0f0f16 100%)';
+      el.innerHTML =
+        '<style>@keyframes __vRise{to{opacity:1;transform:translateY(0)}}@keyframes __vBar{to{transform:scaleX(1)}}</style>' +
+        '<div style="font:700 62px/1.15 -apple-system,Helvetica,Arial,sans-serif;color:#f4f2ec;text-align:center;max-width:82%;letter-spacing:-0.02em">' + words + '</div>' +
+        '<div style="width:86px;height:4px;border-radius:2px;background:' + accent + ';transform:scaleX(0);' +
+        'animation:__vBar .5s ease ' + (after + 0.2).toFixed(2) + 's forwards;margin:28px 0 18px"></div>' +
+        (o.subtitle
+          ? '<div style="font:400 26px/1.45 -apple-system,Helvetica,Arial,sans-serif;color:#b9b5c0;opacity:0;transform:translateY(20px);' +
+            'animation:__vRise .6s ease ' + (after + 0.35).toFixed(2) + 's forwards;text-align:center;max-width:70%">' + esc(o.subtitle) + '</div>'
+          : '');
+      document.documentElement.appendChild(el);
+      if (cursorEl) cursorEl.style.opacity = '0';
+      return new Promise(res => {
+        requestAnimationFrame(() => { el.style.opacity = '1'; });
+        setTimeout(() => {
+          el.style.opacity = '0';
+          setTimeout(() => {
+            el.remove();
+            if (cursorEl) cursorEl.style.opacity = '1';
+            res();
+          }, 500);
+        }, o.ms || 3200);
+      });
+    },
+
+    scrollToY(y, dur) {
+      return new Promise(res => {
+        const sy = window.scrollY, t0 = performance.now();
+        const step = now => {
+          const p = Math.min(1, (now - t0) / dur);
+          window.scrollTo(0, sy + (y - sy) * ease(p));
+          if (p < 1) requestAnimationFrame(step); else res();
+        };
+        requestAnimationFrame(step);
+      });
+    }
+  };
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', install);
+  } else {
+    install();
+  }
+})();`;
+
+module.exports = { OVERLAY_SOURCE };

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "voila-recorder",
+  "version": "0.4.0",
+  "description": "Permission-free product demo recorder: URL in, narrated auto-zoomed MP4 out — with the recipe embedded in the video. Agent-native (MCP), fully on-device.",
+  "license": "MIT",
+  "main": "pipeline.js",
+  "bin": {
+    "voila": "./cli.js"
+  },
+  "files": [
+    "cli.js", "server.js", "mcp.js", "pipeline.js", "recorder.js", "tour.js",
+    "overlay.js", "render.js", "audio.js", "review.js", "public/", "skills/",
+    "AGENTS.md", "README.md", "RECIPE.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/anzal1/voila.git"
+  },
+  "homepage": "https://voila.anzalabidi.dev",
+  "author": "Anzal Abidi (https://anzalabidi.dev)",
+  "engines": {
+    "node": ">=20"
+  },
+  "scripts": {
+    "start": "node server.js",
+    "test:record": "node test.js"
+  },
+  "keywords": ["demo", "screen-recording", "playwright", "mcp", "agent", "tts", "product-demo", "demos-as-code"],
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.30.0",
+    "express": "^4.19.2",
+    "ffmpeg-static": "^5.2.0",
+    "js-yaml": "^4.1.0",
+    "kokoro-js": "^1.2.1",
+    "playwright": "^1.48.0",
+    "sharp": "^0.33.5"
+  }
+}

package/pipeline.js

@@ -0,0 +1,91 @@
+// One entry point for the full record -> render -> narrate pipeline,
+// shared by the web server, CLI, and MCP server.
+
+const fs = require('fs');
+const path = require('path');
+const { spawn } = require('child_process');
+const ffmpegPath = require('ffmpeg-static');
+const { VoilaSession } = require('./recorder');
+const { render } = require('./render');
+const { addNarration, prepareNarration } = require('./audio');
+const { extractOutline } = require('./tour');
+
+// The recipe is the demo's source code: enough for any agent to recreate or
+// fork the video. Written as a sidecar (recipe.json) AND embedded in the
+// MP4's comment metadata, so the recipe travels with the shared file.
+function buildRecipe({ url, mode, steps, meta }) {
+  return {
+    tool: 'voila',
+    spec: 'voila-recipe/1',
+    url,
+    mode: steps ? 'steps' : mode,
+    steps: steps ? steps.map(s => Object.fromEntries(Object.entries(s).filter(([k]) => !k.startsWith('_')))) : null,
+    durationSec: Math.round((meta.tEnd - meta.tStart) / 1000),
+    segments: (meta.segments || []).map(s => ({
+      at: +((s.t - meta.tStart) / 1000).toFixed(2),
+      caption: s.caption,
+      narration: s.narration,
+    })),
+    howToRecreate: 'Run the steps against the url with voila (github.com/anzal1/voila) — voila_record(url, steps_yaml) via MCP, or `voila record <url> --steps <file>`.',
+  };
+}
+
+function embedRecipe(videoIn, videoOut, recipe) {
+  return new Promise((res, rej) => {
+    const ff = spawn(ffmpegPath, [
+      '-y', '-i', videoIn, '-c', 'copy', '-movflags', '+faststart',
+      '-metadata', `comment=voila-recipe:${JSON.stringify(recipe)}`,
+      videoOut,
+    ], { stdio: ['ignore', 'ignore', 'pipe'] });
+    let err = '';
+    ff.stderr.on('data', d => { err += d; if (err.length > 20000) err = err.slice(-10000); });
+    ff.on('close', code => (code === 0 ? res() : rej(new Error(`ffmpeg embed exited ${code}\n${err.slice(-1000)}`))));
+    ff.on('error', rej);
+  });
+}
+
+async function produceDemo(session, { url, mode = 'auto', steps = null, workDir, voice = null, narrate = true, onStatus = () => {} }) {
+  // Steps mode: synthesize narration BEFORE recording so segment pacing and
+  // caption lifetimes match the spoken clip durations exactly.
+  let prepared = null;
+  if (steps && narrate) {
+    const texts = steps.filter(s => s.narration).map(s => s.narration);
+    if (texts.length) {
+      try {
+        prepared = await prepareNarration(texts, path.join(workDir, 'tts'), voice, onStatus);
+        let i = 0;
+        for (const s of steps) if (s.narration) s._narrDurMs = prepared.clips[i++].durMs;
+      } catch (e) {
+        onStatus(`narration pre-synth failed: ${e.message.slice(0, 80)}`);
+      }
+    }
+  }
+
+  const meta = await session.record({ url, mode: steps ? 'steps' : mode, steps, workDir, onStatus });
+
+  const raw = path.join(workDir, 'raw.mp4');
+  const narrated = path.join(workDir, 'narrated.mp4');
+  const out = path.join(workDir, 'demo.mp4');
+  await render(meta, raw, { onStatus });
+
+  let narration = { narrated: false };
+  if (narrate) narration = await addNarration(meta, raw, narrated, { voice, prepared, onStatus });
+  else fs.copyFileSync(raw, narrated);
+
+  const recipe = buildRecipe({ url, mode, steps, meta });
+  fs.writeFileSync(path.join(workDir, 'recipe.json'), JSON.stringify(recipe, null, 2));
+  onStatus('embedding recipe');
+  await embedRecipe(narrated, out, recipe);
+
+  fs.rmSync(meta.framesDir, { recursive: true, force: true });
+  fs.rmSync(raw, { force: true });
+  fs.rmSync(narrated, { force: true });
+  return { video: out, recipe: path.join(workDir, 'recipe.json'), meta, narration };
+}
+
+async function outline(session, url) {
+  const page = await session.open(url);
+  return extractOutline(page);
+}
+
+module.exports = { produceDemo, outline };

package/public/index.html

@@ -0,0 +1,117 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>voila</title>
+<style>
+  :root {
+    --bg: #101014; --card: #17171d; --border: #2a2a33;
+    --text: #f2f0ea; --muted: #9a97a0; --accent: #d97d43; --accent-hover: #e8905a;
+  }
+  * { box-sizing: border-box; margin: 0; }
+  body {
+    background: radial-gradient(1200px 600px at 50% -10%, #1d1a24, var(--bg));
+    color: var(--text); min-height: 100vh; display: grid; place-items: center;
+    font: 16px/1.5 -apple-system, "SF Pro Text", Inter, system-ui, sans-serif;
+  }
+  main { width: min(680px, 92vw); }
+  h1 { font-size: 2.1rem; letter-spacing: -0.02em; }
+  h1 span { color: var(--accent); }
+  p.tag { color: var(--muted); margin: 6px 0 28px; }
+  .card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
+  .row { display: flex; gap: 10px; }
+  input[type=url] {
+    flex: 1; background: #0d0d11; color: var(--text); border: 1px solid var(--border);
+    border-radius: 10px; padding: 13px 16px; font-size: 1rem; outline: none;
+  }
+  input[type=url]:focus { border-color: var(--accent); }
+  button {
+    border: 0; border-radius: 10px; padding: 13px 20px; font-size: 1rem; font-weight: 600;
+    cursor: pointer; transition: background .15s;
+  }
+  .primary { background: var(--accent); color: #16120d; }
+  .primary:hover { background: var(--accent-hover); }
+  .primary:disabled { opacity: .5; cursor: default; }
+  .ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }
+  .ghost:hover { color: var(--text); }
+  .hint { color: var(--muted); font-size: .85rem; margin-top: 14px; }
+  #status { margin-top: 18px; color: var(--muted); font-size: .95rem; min-height: 1.4em; }
+  #status.working::before {
+    content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 9px;
+    border: 2px solid var(--accent); border-top-color: transparent; border-radius: 50%;
+    animation: spin .8s linear infinite; vertical-align: -1px;
+  }
+  @keyframes spin { to { transform: rotate(360deg); } }
+  #result { margin-top: 20px; display: none; }
+  video { width: 100%; border-radius: 12px; border: 1px solid var(--border); }
+  a.dl { color: var(--accent); font-size: .9rem; }
+</style>
+</head>
+<body>
+<main>
+  <h1>voila<span>.</span></h1>
+  <p class="tag">Paste a URL. Get a crisp, auto-zoomed demo video. No screen-recording permission — ever.</p>
+  <div class="card">
+    <div class="row">
+      <input id="url" type="url" placeholder="https://yourproduct.com" spellcheck="false">
+      <button id="record" class="primary">⏺ Record demo</button>
+    </div>
+    <div class="row" style="margin-top:10px">
+      <button id="open" class="ghost">Open browser to sign in first</button>
+    </div>
+    <p class="hint">Needs a login? Click “Open browser”, sign in in the window that appears (your credentials stay in a local browser profile on this machine), then hit Record. Next time it’s truly one click.</p>
+    <div id="status"></div>
+    <div id="result">
+      <video id="video" controls autoplay muted loop></video>
+      <p style="margin-top:8px"><a id="dl" class="dl" download>Download MP4</a></p>
+    </div>
+  </div>
+</main>
+<script>
+const $ = id => document.getElementById(id);
+const status = (msg, working) => {
+  $('status').textContent = msg;
+  $('status').className = working ? 'working' : '';
+};
+
+$('open').onclick = async () => {
+  const url = $('url').value.trim();
+  if (!url) return status('Enter a URL first.');
+  status('Opening browser…', true);
+  const r = await fetch('/api/open', { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify({ url }) });
+  const j = await r.json();
+  status(j.message || j.error || 'Browser open.');
+};
+
+$('record').onclick = async () => {
+  const url = $('url').value.trim();
+  if (!url) return status('Enter a URL first.');
+  $('record').disabled = true;
+  $('result').style.display = 'none';
+  status('Starting…', true);
+  const r = await fetch('/api/record', { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify({ url }) });
+  if (!r.ok) {
+    const j = await r.json().catch(() => ({}));
+    status(j.error || 'Failed to start.');
+    $('record').disabled = false;
+    return;
+  }
+  const poll = setInterval(async () => {
+    const s = await (await fetch('/api/status')).json();
+    if (s.state === 'working') return status(s.detail + '…', true);
+    clearInterval(poll);
+    $('record').disabled = false;
+    if (s.state === 'done') {
+      status('Done — voila.');
+      $('video').src = s.video;
+      $('dl').href = s.video;
+      $('result').style.display = 'block';
+    } else {
+      status('Error: ' + s.detail);
+    }
+  }, 900);
+};
+</script>
+</body>
+</html>

package/recorder.js

@@ -0,0 +1,171 @@
+// VoilaSession: owns a persistent Chromium profile (login survives restarts),
+// records the viewport via CDP screencast (no OS screen-recording permission),
+// and logs a cursor/zoom timeline the renderer replays for the zoom effect.
+
+const fs = require('fs');
+const path = require('path');
+const { chromium } = require('playwright');
+const { OVERLAY_SOURCE } = require('./overlay');
+const { autoTour, runSteps } = require('./tour');
+
+// Device presets: what viewport the demo is recorded at. Mobile emulates an
+// iPhone-class device (touch, mobile UA) so responsive sites render for real.
+// maxZoom keeps the zoom camera sane per screen size: a 1.5x zoom that looks
+// great on desktop crops words off a 390px phone viewport.
+const DEVICES = {
+  desktop: {
+    viewport: { width: 1280, height: 800 }, dpr: 2, isMobile: false, hasTouch: false, maxZoom: 3,
+  },
+  mobile: {
+    // maxZoom 1: mobile layouts are edge-to-edge, any horizontal crop cuts
+    // text — scrolling carries the motion instead.
+    viewport: { width: 390, height: 844 }, dpr: 3, isMobile: true, hasTouch: true, maxZoom: 1,
+    userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.5 Mobile/15E148 Safari/604.1',
+  },
+  tablet: {
+    viewport: { width: 834, height: 1112 }, dpr: 2, isMobile: true, hasTouch: true, maxZoom: 1.25,
+    userAgent: 'Mozilla/5.0 (iPad; CPU OS 17_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.5 Mobile/15E148 Safari/604.1',
+  },
+};
+
+const sleep = ms => new Promise(r => setTimeout(r, ms));
+
+class Timeline {
+  constructor() {
+    this.moves = [];
+    this.zooms = [];
+    this.segments = [];
+    this.warnings = [];
+    this.pos = { x: -60, y: -60 };
+    this.zoom = 1;
+  }
+  recordSegment(caption, narration, dur = null) {
+    this.segments.push({ t: Date.now(), caption: caption || null, narration: narration || null, dur });
+  }
+  recordMove(to, dur) {
+    this.moves.push({ t: Date.now(), from: { ...this.pos }, to: { ...to }, dur });
+    this.pos = { ...to };
+  }
+  recordZoom(level, dur) {
+    this.zooms.push({ t: Date.now(), from: this.zoom, to: level, dur });
+    this.zoom = level;
+  }
+}
+
+class VoilaSession {
+  constructor({ profileDir, headless = false, device = 'desktop' } = {}) {
+    this.profileDir = profileDir || path.join(__dirname, 'profile');
+    this.headless = headless;
+    this.device = DEVICES[device] ? device : 'desktop';
+    this.preset = DEVICES[this.device];
+    this.context = null;
+    this.page = null;
+  }
+
+  async open(url) {
+    if (!this.context) {
+      const launch = () => chromium.launchPersistentContext(this.profileDir, {
+        headless: this.headless,
+        viewport: this.preset.viewport,
+        deviceScaleFactor: this.preset.dpr,
+        isMobile: this.preset.isMobile,
+        hasTouch: this.preset.hasTouch,
+        ...(this.preset.userAgent ? { userAgent: this.preset.userAgent } : {}),
+        args: ['--hide-scrollbars'],
+      });
+      try {
+        this.context = await launch();
+      } catch (e) {
+        // Zero-install path: fetch Chromium on first use instead of making the
+        // user run `npx playwright install` themselves.
+        if (!/Executable doesn't exist|missing dependencies|browser.*not found/i.test(String(e.message))) throw e;
+        const { execFileSync } = require('child_process');
+        let cliPath;
+        try { cliPath = require.resolve('playwright/cli'); }
+        catch { cliPath = path.join(path.dirname(require.resolve('playwright/package.json')), 'cli.js'); }
+        execFileSync(process.execPath, [cliPath, 'install', 'chromium'], { stdio: 'pipe', timeout: 600000 });
+        this.context = await launch();
+      }
+      await this.context.addInitScript(OVERLAY_SOURCE);
+      this.context.on('close', () => { this.context = null; this.page = null; });
+    }
+    this.page = this.context.pages()[0] || await this.context.newPage();
+    this.page.on('close', () => { this.page = null; });
+    await this.page.goto(url, { waitUntil: 'domcontentloaded', timeout: 45000 });
+    await this.page.waitForLoadState('networkidle', { timeout: 8000 }).catch(() => {});
+    return this.page;
+  }
+
+  // Records a demo of `url` into workDir. Returns metadata for the renderer.
+  async record({ url, mode = 'auto', steps = null, workDir, onStatus = () => {} }) {
+    const framesDir = path.join(workDir, 'frames');
+    fs.mkdirSync(framesDir, { recursive: true });
+
+    onStatus('opening page');
+    const page = (this.page && !this.page.isClosed() && this.page.url().startsWith(new URL(url).origin))
+      ? this.page
+      : await this.open(url);
+    this.page = page;
+    await page.evaluate(OVERLAY_SOURCE);
+
+    const client = await this.context.newCDPSession(page);
+    const frames = [];
+    const writes = [];
+    let idx = 0;
+
+    client.on('Page.screencastFrame', ev => {
+      const file = `f${String(idx++).padStart(5, '0')}.jpg`;
+      const t = ev.metadata && ev.metadata.timestamp ? ev.metadata.timestamp * 1000 : Date.now();
+      writes.push(fs.promises.writeFile(path.join(framesDir, file), Buffer.from(ev.data, 'base64')));
+      frames.push({ t, file });
+      client.send('Page.screencastFrameAck', { sessionId: ev.sessionId }).catch(() => {});
+    });
+
+    await client.send('Page.startScreencast', {
+      format: 'jpeg',
+      quality: 88,
+      maxWidth: this.preset.viewport.width * this.preset.dpr,
+      maxHeight: this.preset.viewport.height * this.preset.dpr,
+      everyNthFrame: 1,
+    });
+
+    const tl = new Timeline();
+    const tStart = Date.now();
+
+    onStatus('recording tour');
+    const tourOpts = { sleep, maxZoom: this.preset.maxZoom || 3 };
+    try {
+      if (mode === 'steps' && steps) {
+        await runSteps(page, tl, steps, tourOpts);
+      } else {
+        await autoTour(page, tl, tourOpts);
+      }
+    } finally {
+      await sleep(500); // trailing frames
+      await client.send('Page.stopScreencast').catch(() => {});
+      await Promise.allSettled(writes);
+      await client.detach().catch(() => {});
+    }
+
+    const tEnd = Date.now();
+    const meta = {
+      tStart, tEnd,
+      viewport: this.preset.viewport, dpr: this.preset.dpr, device: this.device,
+      frames: frames.sort((a, b) => a.t - b.t),
+      moves: tl.moves, zooms: tl.zooms, segments: tl.segments,
+      warnings: tl.warnings || [],
+      framesDir,
+    };
+    fs.writeFileSync(path.join(workDir, 'meta.json'), JSON.stringify(meta));
+    onStatus('tour captured');
+    return meta;
+  }
+
+  async close() {
+    if (this.context) await this.context.close().catch(() => {});
+    this.context = null;
+    this.page = null;
+  }
+}
+
+module.exports = { VoilaSession, DEVICES };