clipwise 0.4.1 → 0.5.0

package/dist/cli/index.js

@@ -11,7 +11,7 @@ var __export = (target, all) => {
 
 // src/script/types.ts
 import { z } from "zod";
-var SafeSelectorSchema, NavigateActionSchema, ClickActionSchema, TypeActionSchema, ScrollActionSchema, WaitActionSchema, HoverActionSchema, ScreenshotActionSchema, WaitForSelectorActionSchema, WaitForNavigationActionSchema, WaitForURLActionSchema, WaitForFunctionActionSchema, WaitForResponseActionSchema, StepActionSchema, AutoZoomConfigSchema, ZoomEffectSchema, CursorEffectSchema, BackgroundSchema, DeviceFrameSchema, SpeedRampConfigSchema, KeystrokeConfigSchema, WatermarkConfigSchema, EffectsConfigSchema, OutputConfigSchema, StepSchema, ScenarioSchema;
+var SafeSelectorSchema, NavigateActionSchema, ClickActionSchema, TypeActionSchema, ScrollActionSchema, WaitActionSchema, HoverActionSchema, ScreenshotActionSchema, WaitForSelectorActionSchema, WaitForNavigationActionSchema, WaitForURLActionSchema, WaitForFunctionActionSchema, WaitForResponseActionSchema, StepActionSchema, ZoomIntensitySchema, AutoZoomConfigSchema, ZoomEffectSchema, CursorEffectSchema, BackgroundSchema, DeviceFrameSchema, SpeedRampConfigSchema, KeystrokeConfigSchema, WatermarkConfigSchema, EffectsConfigSchema, OutputConfigSchema, StepSchema, ScenarioSchema;
 var init_types = __esm({
   "src/script/types.ts"() {
     "use strict";
@@ -101,15 +101,32 @@ var init_types = __esm({
       WaitForFunctionActionSchema,
       WaitForResponseActionSchema
     ]);
+    ZoomIntensitySchema = z.enum([
+      "subtle",
+      "light",
+      "moderate",
+      "strong",
+      "dramatic"
+    ]);
     AutoZoomConfigSchema = z.object({
       followCursor: z.boolean().default(true),
-      maxScale: z.number().min(1).max(5).default(2),
+      /** @deprecated Use `intensity` on the parent zoom config instead. */
+      maxScale: z.number().min(1).max(5).default(1.35),
       transitionDuration: z.number().default(400),
       padding: z.number().default(200)
     });
     ZoomEffectSchema = z.object({
       enabled: z.boolean().default(true),
-      scale: z.number().min(1).max(5).default(1.8),
+      /**
+       * Numeric zoom scale (1.0 = no zoom).  Overridden by `intensity` when set.
+       * Default lowered from 1.8 → 1.35 to match "moderate" intensity.
+       */
+      scale: z.number().min(1).max(5).default(1.35),
+      /**
+       * Intensity preset — overrides `scale` when set.
+       * Calibrated against Loom (light≈1.25x) and Camtasia (moderate≈1.35x).
+       */
+      intensity: ZoomIntensitySchema.optional(),
       duration: z.number().default(600),
       easing: z.enum(["ease-in-out", "ease-in", "ease-out", "linear"]).default("ease-in-out"),
       autoZoom: AutoZoomConfigSchema.default({})
@@ -150,6 +167,17 @@ var init_types = __esm({
     });
     KeystrokeConfigSchema = z.object({
       enabled: z.boolean().default(false),
+      /**
+       * Show regular typed text (alphabetic/numeric characters) in the HUD.
+       *
+       * Industry default is false — Screen Studio, KeyCastr, and ScreenFlow all
+       * hide regular typing by default, showing only modifier+key shortcuts.
+       * Typed content is already visible inside the focused input element, so
+       * displaying it again in the HUD is redundant and creates overflow issues.
+       *
+       * Set to true to display a 2-line rolling HUD that follows the typed text.
+       */
+      showTyping: z.boolean().default(false),
       position: z.enum(["bottom-center", "bottom-left", "bottom-right"]).default("bottom-center"),
       fontSize: z.number().default(18),
       backgroundColor: z.string().default("rgba(0, 0, 0, 0.75)"),
@@ -349,13 +377,17 @@ function interpolatePath(from, to, steps) {
   if (steps === 1) return [from, to];
   const dx = to.x - from.x;
   const dy = to.y - from.y;
+  const distance = Math.hypot(dx, dy);
+  const perpScale = Math.min(distance * 0.06, 30);
+  const normX = distance > 0 ? dy / distance * perpScale : 0;
+  const normY = distance > 0 ? -dx / distance * perpScale : 0;
   const cp1 = {
-    x: from.x + dx * 0.25 + dy * 0.1,
-    y: from.y + dy * 0.25 - dx * 0.1
+    x: from.x + dx * 0.25 + normX,
+    y: from.y + dy * 0.25 + normY
   };
   const cp2 = {
-    x: from.x + dx * 0.75 - dy * 0.1,
-    y: from.y + dy * 0.75 + dx * 0.1
+    x: from.x + dx * 0.75 - normX,
+    y: from.y + dy * 0.75 - normY
   };
   const points = [];
   for (let i = 0; i <= steps; i++) {
@@ -394,12 +426,9 @@ var CLICK_EFFECT_DURATION_MS = 500;
 var REPAINT_INTERVAL_MS = 25;
 var ACTION_GAP_MS = 30;
 var CURSOR_SPEED_PRESETS = {
-  fast: { steps: 10, delay: 22 },
-  // ~220ms, ~9 frames captured
-  normal: { steps: 14, delay: 25 },
-  // ~350ms, ~14 frames captured
-  slow: { steps: 20, delay: 25 }
-  // ~500ms, ~20 frames captured
+  fast: { pixelsPerStep: 22, stepDelayMs: 22, minSteps: 8, maxSteps: 35 },
+  normal: { pixelsPerStep: 16, stepDelayMs: 26, minSteps: 10, maxSteps: 45 },
+  slow: { pixelsPerStep: 12, stepDelayMs: 32, minSteps: 12, maxSteps: 55 }
 };
 var FrameChannel = class {
   buffer = [];
@@ -439,6 +468,9 @@ var ClipwiseRecorder = class {
   cursorTimeline = [];
   clickTimeline = [];
   keystrokeTimeline = [];
+  /** Incremented at the start of each `type` action so the HUD can render
+   *  each input field's text on a separate line. */
+  keystrokeSessionId = 0;
   currentStepIndex = 0;
   cursorPosition = { x: 0, y: 0 };
   viewport = { width: 1280, height: 800 };
@@ -476,6 +508,7 @@ var ClipwiseRecorder = class {
     this.cursorTimeline = [];
     this.clickTimeline = [];
     this.keystrokeTimeline = [];
+    this.keystrokeSessionId = 0;
     this.currentStepIndex = 0;
     this.cursorPosition = { x: 0, y: 0 };
     this.isCapturing = false;
@@ -718,6 +751,34 @@ var ClipwiseRecorder = class {
       keystrokes: frameKeystrokes.length > 0 ? frameKeystrokes : void 0
     };
   }
+  /**
+   * Force a unique DOM repaint visible in the top scanlines of the captured PNG.
+   *
+   * Uses a 1×1 px fixed-position element at z-index MAX, sitting above ALL
+   * overlays including modals (position:fixed;z-index:100;backdrop-filter:blur).
+   * Alternates background between #000001 and #000100 — two colors that are
+   * visually indistinguishable (1/255 difference in R or G channel against a
+   * dark page) but produce distinct PNG byte sequences, defeating dedup.
+   *
+   * This replaces the previous `document.documentElement.style.outline` approach
+   * which failed whenever a full-viewport fixed overlay (e.g. modal backdrop)
+   * was composited on top of the outline, making y=0 PNG bytes identical across
+   * frames and causing dedup to collapse all modal-typing frames into one.
+   */
+  async forceRepaint(t) {
+    if (!this.page) return;
+    await this.page.evaluate((toggle) => {
+      let el = document.getElementById("__cw_rf__");
+      if (!el) {
+        el = document.createElement("div");
+        el.id = "__cw_rf__";
+        el.style.cssText = "position:fixed;top:0;left:0;width:1px;height:1px;z-index:2147483647;pointer-events:none";
+        (document.body ?? document.documentElement).appendChild(el);
+      }
+      el.style.background = toggle ? "#000001" : "#000100";
+    }, t).catch(() => {
+    });
+  }
   /**
    * Wait for a given duration while forcing periodic repaints
    * so CDP screencast keeps sending frames even on static pages.
@@ -727,10 +788,7 @@ var ClipwiseRecorder = class {
     const endTime = Date.now() + durationMs;
     let toggle = false;
     while (Date.now() < endTime && this.isCapturing) {
-      await this.page.evaluate((t) => {
-        document.documentElement.style.outline = t ? "0.001px solid transparent" : "none";
-      }, toggle).catch(() => {
-      });
+      await this.forceRepaint(toggle);
       toggle = !toggle;
       const remaining = endTime - Date.now();
       if (remaining > 0) {
@@ -807,40 +865,57 @@ var ClipwiseRecorder = class {
           timestamp: Date.now()
         });
         await this.page.click(action.selector);
+        this.keystrokeSessionId++;
+        const currentSessionId = this.keystrokeSessionId;
+        let typeRepaintToggle = false;
         for (const char of action.text) {
-          await this.page.keyboard.type(char, { delay: action.delay });
+          await this.page.keyboard.type(char);
+          typeRepaintToggle = !typeRepaintToggle;
+          await this.forceRepaint(typeRepaintToggle);
           this.keystrokeTimeline.push({
             key: char,
-            timestamp: Date.now()
+            timestamp: Date.now(),
+            sessionId: currentSessionId
           });
+          await new Promise((resolve2) => setTimeout(resolve2, action.delay));
         }
         break;
       }
       case "scroll": {
         const scrollTarget = action.selector ? await getElementCenter(this.page, action.selector, action.timeout) : null;
-        await this.page.evaluate(
-          ({ x, y, smooth, selector }) => {
-            const target = selector ? document.querySelector(selector) : window;
-            if (target) {
-              const options = {
-                left: x,
-                top: y,
-                behavior: smooth ? "smooth" : "instant"
-              };
-              if (target === window) {
-                window.scrollBy(options);
-              } else {
-                target.scrollBy(options);
-              }
-            }
-          },
-          {
-            x: action.x,
-            y: action.y,
-            smooth: action.smooth,
-            selector: action.selector ?? null
+        const scrollDistance = Math.abs(action.y) + Math.abs(action.x);
+        if (action.smooth && scrollDistance > 0) {
+          const scrollSteps = Math.max(12, Math.round(scrollDistance / 25));
+          const yStep = action.y / scrollSteps;
+          const xStep = action.x / scrollSteps;
+          for (let s = 0; s < scrollSteps; s++) {
+            await this.page.evaluate(
+              ({ dy, dx, sel }) => {
+                const el = sel ? document.querySelector(sel) : window;
+                if (!el) return;
+                const opts = { left: dx, top: dy, behavior: "instant" };
+                if (el === window) window.scrollBy(opts);
+                else el.scrollBy(opts);
+              },
+              { dy: yStep, dx: xStep, sel: action.selector ?? null }
+            );
+            await new Promise((resolve2) => setTimeout(resolve2, 30));
           }
-        );
+          await this.waitWithRepaints(150);
+        } else {
+          await this.page.evaluate(
+            ({ x, y, selector }) => {
+              const target = selector ? document.querySelector(selector) : window;
+              if (target) {
+                const options = { left: x, top: y, behavior: "instant" };
+                if (target === window) window.scrollBy(options);
+                else target.scrollBy(options);
+              }
+            },
+            { x: action.x, y: action.y, selector: action.selector ?? null }
+          );
+          await this.waitWithRepaints(100);
+        }
         if (scrollTarget) {
           this.cursorPosition = scrollTarget;
           this.cursorTimeline.push({
@@ -848,10 +923,7 @@ var ClipwiseRecorder = class {
             timestamp: Date.now()
           });
         }
-        const scrollDistance = Math.abs(action.y) + Math.abs(action.x);
-        const scrollWait = action.smooth ? Math.max(600, Math.round(scrollDistance * 0.8)) : 100;
-        await this.waitWithRepaints(scrollWait);
-        await this.waitWithRepaints(150);
+        await this.waitWithRepaints(120);
         break;
       }
       case "wait": {
@@ -903,25 +975,86 @@ var ClipwiseRecorder = class {
     await this.waitWithRepaints(ACTION_GAP_MS);
   }
   /**
-   * Move cursor smoothly from current position to target using
-   * manual step-by-step movement with delays between each step.
-   * Speed is controlled by the cursor.speed preset (fast/normal/slow).
+   * Suppress all CSS transitions and animations on the page during cursor
+   * movement.  Hover-state transitions (background, transform, box-shadow,
+   * etc.) on elements the cursor passes over generate CSS-animation-driven
+   * CDP frames that arrive asynchronously relative to our cursor step
+   * intervals.  Those extra frames are timestamped when they're ACK-drained,
+   * which can be many milliseconds after the actual cursor moved — causing
+   * interpolateCursorAt() to map them to a newer cursor position while the
+   * screenshot still shows older content → visible stutter.
+   *
+   * Suppressing transitions during movement eliminates these extra frames
+   * entirely regardless of which elements the path crosses.  Transitions are
+   * restored immediately after arrival, so hover effects on the final target
+   * element still appear during the subsequent holdDuration.
+   */
+  async suppressTransitions() {
+    if (!this.page) return;
+    await this.page.evaluate(() => {
+      if (document.getElementById("__cw_notrans__")) return;
+      const s = document.createElement("style");
+      s.id = "__cw_notrans__";
+      s.textContent = "*{transition-duration:0s!important;transition-delay:0s!important}";
+      (document.head ?? document.documentElement).appendChild(s);
+    }).catch(() => {
+    });
+  }
+  async restoreTransitions() {
+    if (!this.page) return;
+    await this.page.evaluate(() => {
+      document.getElementById("__cw_notrans__")?.remove();
+    }).catch(() => {
+    });
+  }
+  /**
+   * Move cursor smoothly from current position to target.
+   *
+   * Key design decisions:
+   *  1. Adaptive step count — proportional to travel distance so short and
+   *     long movements feel equally paced (pixelsPerStep controls speed).
+   *  2. Forced repaint per step — moving the mouse in headless Chrome does NOT
+   *     visually change the screenshot (the cursor is rendered in post-processing).
+   *     Without a forced repaint, dedup collapses every intermediate frame into
+   *     the first one, making the cursor appear to teleport.
+   *  3. Transition suppression — CSS transitions on hovered elements generate
+   *     asynchronous CDP frames that desync cursor position from screenshot
+   *     content.  All transitions are suppressed for the duration of movement
+   *     and restored on arrival (see suppressTransitions / restoreTransitions).
+   *  4. Capped bezier curve — perpendicular offset is capped at 30 px regardless
+   *     of distance, preventing a visible arc on long-distance movements.
    */
   async moveCursorSmooth(target) {
     if (!this.page) return;
-    const { steps, delay } = CURSOR_SPEED_PRESETS[this.cursorSpeed];
+    const preset = CURSOR_SPEED_PRESETS[this.cursorSpeed];
     const from = { ...this.cursorPosition };
+    const distance = Math.hypot(target.x - from.x, target.y - from.y);
+    if (distance < 2) {
+      this.cursorPosition = { ...target };
+      return;
+    }
+    const steps = Math.round(
+      Math.min(Math.max(distance / preset.pixelsPerStep, preset.minSteps), preset.maxSteps)
+    );
     const path = interpolatePath(from, target, steps);
-    for (const point of path) {
-      await this.page.mouse.move(point.x, point.y);
-      this.cursorTimeline.push({
-        position: { x: point.x, y: point.y },
-        timestamp: Date.now()
-      });
-      await new Promise((resolve2) => setTimeout(resolve2, delay));
+    let repaintToggle = false;
+    await this.suppressTransitions();
+    try {
+      for (const point of path) {
+        await this.page.mouse.move(point.x, point.y);
+        repaintToggle = !repaintToggle;
+        await this.forceRepaint(repaintToggle);
+        this.cursorTimeline.push({
+          position: { x: point.x, y: point.y },
+          timestamp: Date.now()
+        });
+        await new Promise((resolve2) => setTimeout(resolve2, preset.stepDelayMs));
+      }
+    } finally {
+      await this.restoreTransitions();
     }
     this.cursorPosition = { ...target };
-    await this.waitWithRepaints(100);
+    await this.waitWithRepaints(80);
   }
   /**
    * Build CapturedFrame array from raw screencast frames,
@@ -1340,8 +1473,11 @@ async function renderCursor(frameBuffer, position, config, frameWidth, frameHeig
   const size = Math.round(config.size * dpr);
   const cursorSvg = buildCursorSvg(size, config.color);
   const cursorBuffer = Buffer.from(cursorSvg);
-  const left = Math.max(0, Math.min(Math.round(position.x * dpr), frameWidth - 1));
-  const top = Math.max(0, Math.min(Math.round(position.y * dpr), frameHeight - 1));
+  const tipOffsetX = Math.round(4 / 24 * size);
+  const px = Math.round(position.x * dpr);
+  const py = Math.round(position.y * dpr);
+  const left = Math.max(0, Math.min(px - tipOffsetX, frameWidth - size));
+  const top = Math.max(0, Math.min(py, frameHeight - size));
   return sharp2(frameBuffer).composite([{ input: cursorBuffer, left, top }]).png().toBuffer();
 }
 async function renderClickEffect(frameBuffer, position, config, progress, frameWidth, frameHeight, dpr = 1) {
@@ -1403,6 +1539,17 @@ async function renderCursorTrail(frameBuffer, positions, config, frameWidth, fra
 
 // src/effects/zoom.ts
 import sharp3 from "sharp";
+var ZOOM_INTENSITY_SCALES = {
+  subtle: 1.15,
+  light: 1.25,
+  moderate: 1.35,
+  strong: 1.5,
+  dramatic: 1.8
+};
+function resolveZoomScale(scale, intensity) {
+  if (intensity !== void 0) return ZOOM_INTENSITY_SCALES[intensity];
+  return scale;
+}
 async function applyZoom(frameBuffer, focusPoint, scale, frameWidth, frameHeight) {
   if (scale <= 1) return frameBuffer;
   const cropWidth = Math.round(frameWidth / scale);
@@ -1549,30 +1696,55 @@ async function applyBackground(frameBuffer, config, outputWidth, outputHeight) {
 
 // src/effects/keystroke.ts
 import sharp5 from "sharp";
+function escapeXml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function buildSessions(keystrokes) {
+  const hasSessionIds = keystrokes.some((k) => k.sessionId !== void 0);
+  if (!hasSessionIds) {
+    const text = keystrokes.map((k) => k.key).join("");
+    return text.length > 0 ? [text] : [];
+  }
+  const map = /* @__PURE__ */ new Map();
+  for (const k of keystrokes) {
+    const sid = k.sessionId ?? 0;
+    map.set(sid, (map.get(sid) ?? "") + k.key);
+  }
+  return Array.from(map.entries()).sort(([a], [b]) => a - b).map(([, text]) => text).filter((t) => t.length > 0);
+}
 async function renderKeystrokeHud(frameBuffer, keystrokes, frameTimestamp, config, frameWidth, frameHeight, dpr = 1) {
   if (!config.enabled || keystrokes.length === 0) return frameBuffer;
-  const recentKeys = keystrokes.filter(
-    (k) => frameTimestamp - k.timestamp < config.fadeAfter
-  );
-  if (recentKeys.length === 0) return frameBuffer;
-  const displayText = recentKeys.map((k) => k.key).join("");
-  if (displayText.length === 0) return frameBuffer;
+  if (!config.showTyping) return frameBuffer;
+  const lastKeystroke = keystrokes[keystrokes.length - 1];
+  const age = frameTimestamp - lastKeystroke.timestamp;
+  if (age >= config.fadeAfter) return frameBuffer;
+  const fadeStart = config.fadeAfter * 0.6;
+  const globalOpacity = age > fadeStart ? Math.max(0, 1 - (age - fadeStart) / (config.fadeAfter - fadeStart)) : 1;
+  if (globalOpacity <= 0) return frameBuffer;
+  const allSessions = buildSessions(keystrokes);
+  if (allSessions.length === 0) return frameBuffer;
+  const sessions = allSessions.slice(-3);
+  const lineCount = sessions.length;
   const fontSize = config.fontSize * dpr;
   const padding = config.padding * dpr;
-  const charWidth = fontSize * 0.62;
-  const textWidth = Math.ceil(displayText.length * charWidth);
   const hudPadH = padding * 2;
-  const hudPadV = padding * 1.5;
-  const hudWidth = Math.min(textWidth + hudPadH * 2, frameWidth - 40 * dpr);
-  const hudHeight = Math.ceil(fontSize + hudPadV * 2);
-  const newest = recentKeys[recentKeys.length - 1];
-  const age = frameTimestamp - newest.timestamp;
-  const fadeStart = config.fadeAfter * 0.6;
-  const opacity = age > fadeStart ? Math.max(0, 1 - (age - fadeStart) / (config.fadeAfter - fadeStart)) : 1;
-  if (opacity <= 0) return frameBuffer;
+  const hudPadV = padding * 1.4;
+  const lineGap = Math.round(fontSize * 0.45);
+  const charWidth = fontSize * 0.615;
+  const maxHudWidth = frameWidth - 60 * dpr;
+  const maxCharsPerLine = Math.max(10, Math.floor((maxHudWidth - hudPadH * 2) / charWidth));
+  const lines = sessions.map(
+    (text) => text.length > maxCharsPerLine ? text.slice(-maxCharsPerLine) : text
+  );
+  const maxLineLen = Math.max(...lines.map((l) => l.length));
+  const hudWidth = Math.min(
+    Math.ceil(maxLineLen * charWidth) + hudPadH * 2,
+    maxHudWidth
+  );
+  const hudHeight = Math.ceil(fontSize * lineCount + lineGap * (lineCount - 1) + hudPadV * 2);
   const margin = 30 * dpr;
-  let hudX;
   const hudY = frameHeight - hudHeight - margin;
+  let hudX;
   switch (config.position) {
     case "bottom-left":
       hudX = margin;
@@ -1583,17 +1755,24 @@ async function renderKeystrokeHud(frameBuffer, keystrokes, frameTimestamp, confi
     case "bottom-center":
     default:
       hudX = Math.round((frameWidth - hudWidth) / 2);
-      break;
   }
-  const maxChars = Math.floor((hudWidth - hudPadH * 2) / charWidth);
-  const truncated = displayText.length > maxChars ? displayText.slice(-maxChars) : displayText;
-  const escaped = truncated.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  const LINE_OPACITY_FACTORS = [0.45, 0.7, 1];
+  const opacityFactors = LINE_OPACITY_FACTORS.slice(-lineCount);
+  const rx = (8 * dpr).toFixed(1);
+  const boxOp = (globalOpacity * 0.92).toFixed(3);
+  const textX = hudX + hudPadH;
+  const baselineY = hudY + hudPadV + fontSize * 0.82;
+  const textElements = lines.map((line, i) => {
+    const op = (globalOpacity * opacityFactors[i]).toFixed(3);
+    const lineY = baselineY + i * (fontSize + lineGap);
+    return `<text x="${textX}" y="${lineY}"
+          font-family="monospace, Menlo, Consolas" font-size="${fontSize}"
+          fill="${config.textColor}" opacity="${op}">${escapeXml(line)}</text>`;
+  }).join("\n    ");
   const hudSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="${frameWidth}" height="${frameHeight}" shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
     <rect x="${hudX}" y="${hudY}" width="${hudWidth}" height="${hudHeight}"
-          rx="${8 * dpr}" ry="${8 * dpr}" fill="${config.backgroundColor}" opacity="${opacity.toFixed(3)}" />
-    <text x="${hudX + hudPadH}" y="${hudY + hudPadV + fontSize * 0.75}"
-          font-family="monospace, Menlo, Consolas" font-size="${fontSize}"
-          fill="${config.textColor}" opacity="${opacity.toFixed(3)}">${escaped}</text>
+          rx="${rx}" ry="${rx}" fill="${config.backgroundColor}" opacity="${boxOp}" />
+    ${textElements}
   </svg>`;
   return sharp5(frameBuffer).composite([{ input: Buffer.from(hudSvg), left: 0, top: 0 }]).png().toBuffer();
 }
@@ -1667,6 +1846,11 @@ async function composeFrame(frame, effects, output, context) {
     clickProgress: context?.clickProgress ?? null,
     cursorTrail: context?.cursorTrail ?? []
   };
+  const frameOffset = getFrameOffset(effects.deviceFrame, dpr);
+  const withFrameOffset = (pos) => ({
+    x: pos.x + frameOffset.left / Math.max(1, dpr),
+    y: pos.y + frameOffset.top / Math.max(1, dpr)
+  });
   if (effects.deviceFrame.enabled) {
     const sl2 = ctx.staticLayers;
     if (sl2?.browserChromePng && effects.deviceFrame.type === "browser") {
@@ -1687,7 +1871,7 @@ async function composeFrame(frame, effects, output, context) {
   if (effects.cursor.enabled && effects.cursor.highlight && frame.cursorPosition) {
     buffer = await renderCursorHighlight(
       buffer,
-      frame.cursorPosition,
+      withFrameOffset(frame.cursorPosition),
       effects.cursor,
       width,
       height,
@@ -1697,7 +1881,7 @@ async function composeFrame(frame, effects, output, context) {
   if (effects.cursor.enabled && effects.cursor.trail && ctx.cursorTrail.length >= 2) {
     buffer = await renderCursorTrail(
       buffer,
-      ctx.cursorTrail,
+      ctx.cursorTrail.map(withFrameOffset),
       effects.cursor,
       width,
       height,
@@ -1707,7 +1891,7 @@ async function composeFrame(frame, effects, output, context) {
   if (effects.cursor.enabled && frame.cursorPosition) {
     buffer = await renderCursor(
       buffer,
-      frame.cursorPosition,
+      withFrameOffset(frame.cursorPosition),
       effects.cursor,
       width,
       height,
@@ -1718,7 +1902,7 @@ async function composeFrame(frame, effects, output, context) {
     const progress = ctx.clickProgress ?? frame.clickProgress ?? 0.5;
     buffer = await renderClickEffect(
       buffer,
-      frame.clickPosition,
+      withFrameOffset(frame.clickPosition),
       effects.cursor,
       progress,
       width,
@@ -1726,6 +1910,16 @@ async function composeFrame(frame, effects, output, context) {
       dpr
     );
   }
+  const scale = ctx.zoomScale;
+  if (effects.zoom.enabled && scale > 1) {
+    const rawFocus = frame.clickPosition ?? frame.cursorPosition ?? { x: frame.viewport.width / 2, y: frame.viewport.height / 2 };
+    const offset = getFrameOffset(effects.deviceFrame, dpr);
+    const focusPoint = {
+      x: rawFocus.x * dpr + offset.left,
+      y: rawFocus.y * dpr + offset.top
+    };
+    buffer = await applyZoom(buffer, focusPoint, scale, width, height);
+  }
   if (effects.keystroke.enabled && frame.keystrokes) {
     buffer = await renderKeystrokeHud(
       buffer,
@@ -1737,16 +1931,6 @@ async function composeFrame(frame, effects, output, context) {
       dpr
     );
   }
-  const scale = ctx.zoomScale;
-  if (effects.zoom.enabled && scale > 1) {
-    const rawFocus = frame.clickPosition ?? frame.cursorPosition ?? { x: frame.viewport.width / 2, y: frame.viewport.height / 2 };
-    const offset = getFrameOffset(effects.deviceFrame, dpr);
-    const focusPoint = {
-      x: rawFocus.x * dpr + offset.left,
-      y: rawFocus.y * dpr + offset.top
-    };
-    buffer = await applyZoom(buffer, focusPoint, scale, width, height);
-  }
   const sl = ctx.staticLayers;
   if (sl) {
     const padding = effects.background.padding;
@@ -1965,6 +2149,10 @@ var CanvasRenderer = class {
       this.output.fps * (this.effects.zoom.duration / 1e3)
     );
     const clickLookup = this.effects.zoom.enabled ? buildZoomClickLookup(frames) : [];
+    const effectiveScale = resolveZoomScale(
+      this.effects.zoom.scale,
+      this.effects.zoom.intensity
+    );
     for (let i = 0; i < frames.length; i++) {
       const frame = frames[i];
       let zoomScale = 1;
@@ -1972,7 +2160,7 @@ var CanvasRenderer = class {
         zoomScale = calculateAdaptiveZoomFromLookup(
           clickLookup,
           i,
-          this.effects.zoom.scale,
+          effectiveScale,
           transitionFrames
         );
       }
@@ -2088,6 +2276,10 @@ var CanvasRenderer = class {
     let nextToDispatch = 0;
     let nextToYield = 0;
     const canDispatch = (i) => i < frames.length && (sourceComplete || frames.length > i + transitionFrames);
+    const effectiveScale = resolveZoomScale(
+      this.effects.zoom.scale,
+      this.effects.zoom.intensity
+    );
     const computeContext = (i) => {
       const frame = frames[i];
       let zoomScale = 1;
@@ -2098,7 +2290,7 @@ var CanvasRenderer = class {
           frames.slice(lo, hi + 1),
           lo,
           i,
-          this.effects.zoom.scale,
+          effectiveScale,
           transitionFrames
         );
       }