@t3lnet/sceneforge 1.0.22 → 1.0.23

package/README.md

@@ -119,15 +119,13 @@ npx sceneforge split --demo my-demo --crf 15
 
 ## Viewport Settings (Recording)
 
-Control output video resolution and content zoom:
+Control output video resolution:
 
 ```bash
 --viewport <WxH|preset>      # Video resolution (default: 1440x900)
                              # Presets: 720p, 1080p, 1440p, 4k
 --width <px>                 # Video width
 --height <px>                # Video height
---zoom <percent>             # Content zoom: 100, 150, 200 (default: 100)
-                             # Makes UI elements appear larger
 ```
 
 **Examples:**
@@ -136,13 +134,10 @@ Control output video resolution and content zoom:
 # Record at 1080p
 npx sceneforge record --definition demo.yaml --base-url http://localhost:5173 --viewport 1080p
 
-# Record at 1080p with zoomed content (UI appears 1.5x larger)
-npx sceneforge record --definition demo.yaml --base-url http://localhost:5173 \
-  --viewport 1080p --zoom 150
+# Record at 4K
+npx sceneforge record --definition demo.yaml --base-url http://localhost:5173 --viewport 4k
 ```
 
-**How zoom works:** `--viewport 1080p --zoom 150` records a 1920x1080 video where content appears 1.5x larger (browser viewport is actually 1280x720, scaled up to 1080p).
-
 ## Output Dimensions (Video Processing)
 
 Control final video resolution with support for different platforms and aspect ratios:
@@ -179,7 +174,7 @@ npx sceneforge concat --demo my-demo --output-size square
 
 # Full pipeline with all video options
 npx sceneforge pipeline --demo my-demo --base-url http://localhost:5173 \
-  --viewport 1080p --zoom 150 \
+  --viewport 1080p \
   --output-size 1080p \
   --quality high
 ```

package/cli/commands/add-audio-to-steps.js

@@ -5,10 +5,7 @@ import { getFlagValue, hasFlag } from "../utils/args.js";
 import { getOutputPaths, resolveRoot, readJson } from "../utils/paths.js";
 import { sanitizeFileSegment } from "../utils/sanitize.js";
 import {
-  getVideoEncodingArgs,
-  parseQualityArgs,
-  getQualityHelpText,
-  logQualitySettings,
+  getIntermediateEncodingArgs,
 } from "../utils/quality.js";
 import {
   parseOutputDimensions,
@@ -21,6 +18,9 @@ function printHelp() {
   console.log(`
 Add audio to individual video step clips
 
+Uses lossless encoding for intermediate files to preserve quality.
+Final compression is applied only at the concat step.
+
 Usage:
   sceneforge add-audio [options]
 
@@ -31,7 +31,6 @@ Options:
   --root <path>         Project root (defaults to cwd)
   --output-dir <path>   Output directory (defaults to e2e/output or output)
   --help, -h            Show this help message
-${getQualityHelpText()}
 ${getOutputDimensionsHelpText()}
 
 Output:
@@ -39,9 +38,8 @@ Output:
 
 Examples:
   sceneforge add-audio --demo create-quote
-  sceneforge add-audio --demo create-quote --quality high
   sceneforge add-audio --demo create-quote --output-size 1080p
-  sceneforge add-audio --all --codec libx265
+  sceneforge add-audio --all
 `);
 }
 
@@ -55,11 +53,12 @@ function buildScaleFilter(outputDimensions) {
   return `scale=${width}:${height}:force_original_aspect_ratio=decrease,pad=${width}:${height}:(ow-iw)/2:(oh-ih)/2:black`;
 }
 
-async function addAudioToStep(videoPath, audioPath, outputPath, padding, nextVideoPath, qualityOptions = {}, outputDimensions = null) {
+async function addAudioToStep(videoPath, audioPath, outputPath, padding, nextVideoPath, outputDimensions = null) {
   const videoDuration = await getMediaDuration(videoPath);
   const audioDuration = await getMediaDuration(audioPath);
   const targetDuration = audioDuration + padding;
-  const encodingArgs = getVideoEncodingArgs(qualityOptions);
+  // Use lossless encoding for intermediate files to prevent generation loss
+  const encodingArgs = getIntermediateEncodingArgs({ includeAudio: true });
   const scaleFilter = buildScaleFilter(outputDimensions);
 
   if (targetDuration <= videoDuration) {
@@ -142,9 +141,9 @@ async function addAudioToStep(videoPath, audioPath, outputPath, padding, nextVid
   ]);
 }
 
-async function processDemo(demoName, paths, padding, qualityOptions = {}, outputDimensions = null) {
-  console.log(`\n[audio] Processing: ${demoName}\n`);
-  logQualitySettings(qualityOptions, "[audio]");
+async function processDemo(demoName, paths, padding, outputDimensions = null) {
+  console.log(`\n[audio] Processing: ${demoName}`);
+  console.log("[audio] Using lossless encoding for intermediate files");
   logOutputDimensions(outputDimensions, "[audio]");
 
   const stepsManifestPath = path.join(paths.videosDir, demoName, "steps-manifest.json");
@@ -231,7 +230,7 @@ async function processDemo(demoName, paths, padding, qualityOptions = {}, output
     );
 
     try {
-      await addAudioToStep(step.videoFile, audioSegment.audioFile, outputPath, padding, nextVideoPath, qualityOptions, outputDimensions);
+      await addAudioToStep(step.videoFile, audioSegment.audioFile, outputPath, padding, nextVideoPath, outputDimensions);
       outputFiles.push(outputPath);
     } catch (error) {
       console.error(`[audio]   ${paddedIndex}. ${step.stepId}: ✗ Failed to process`);
@@ -264,7 +263,7 @@ async function processDemo(demoName, paths, padding, qualityOptions = {}, output
   console.log(`[audio]   Output: ${path.join(paths.videosDir, demoName)}`);
 }
 
-async function processAll(paths, padding, qualityOptions = {}, outputDimensions = null) {
+async function processAll(paths, padding, outputDimensions = null) {
   console.log("\n[audio] Processing all demos...\n");
 
   try {
@@ -295,7 +294,7 @@ async function processAll(paths, padding, qualityOptions = {}, outputDimensions
     console.log(`[audio] Found ${demosToProcess.length} demo(s) to process\n`);
 
     for (const demo of demosToProcess) {
-      await processDemo(demo, paths, padding, qualityOptions, outputDimensions);
+      await processDemo(demo, paths, padding, outputDimensions);
     }
 
     await fs.rm(paths.tempDir, { recursive: true, force: true });
@@ -328,17 +327,16 @@ export async function runAddAudioCommand(argv) {
 
   const rootDir = resolveRoot(root);
   const paths = await getOutputPaths(rootDir, outputDir);
-  const qualityOptions = parseQualityArgs(args, getFlagValue, hasFlag);
   const outputDimensions = parseOutputDimensions(args, getFlagValue);
 
   if (demo) {
-    await processDemo(demo, paths, padding, qualityOptions, outputDimensions);
+    await processDemo(demo, paths, padding, outputDimensions);
     await fs.rm(paths.tempDir, { recursive: true, force: true });
     return;
   }
 
   if (all) {
-    await processAll(paths, padding, qualityOptions, outputDimensions);
+    await processAll(paths, padding, outputDimensions);
     return;
   }
 

package/cli/commands/pipeline.js

@@ -207,8 +207,6 @@ export async function runPipelineCommand(argv) {
   const viewport = getFlagValue(args, "--viewport");
   const viewportWidth = getFlagValue(args, "--width");
   const viewportHeight = getFlagValue(args, "--height");
-  const zoom = getFlagValue(args, "--zoom");
-  const deviceScaleFactor = getFlagValue(args, "--device-scale-factor");
 
   // Output dimension options (for video processing)
   const outputSize = getFlagValue(args, "--output-size");
@@ -261,13 +259,11 @@ export async function runPipelineCommand(argv) {
       if (crf) console.log(`  - CRF: ${crf}`);
       if (codec) console.log(`  - Codec: ${codec}`);
     }
-    if (viewport || viewportWidth || viewportHeight || zoom || deviceScaleFactor) {
+    if (viewport || viewportWidth || viewportHeight) {
       console.log("\nViewport options:");
       if (viewport) console.log(`  - Viewport: ${viewport}`);
       if (viewportWidth) console.log(`  - Width: ${viewportWidth}`);
       if (viewportHeight) console.log(`  - Height: ${viewportHeight}`);
-      if (zoom) console.log(`  - Zoom: ${zoom}%`);
-      if (deviceScaleFactor) console.log(`  - Device scale factor: ${deviceScaleFactor}`);
     }
     if (outputSize || outputWidth || outputHeight) {
       console.log("\nOutput dimension options:");
@@ -334,8 +330,9 @@ export async function runPipelineCommand(argv) {
     outputDimensionArgs.push("--output-height", outputHeight);
   }
 
+  // Split and add-audio use lossless encoding for intermediates (no quality args needed)
   await runStep("split", plan.split, () =>
-    runSplitVideoCommand(["--demo", demoName, ...sharedArgs, ...qualityArgs, ...outputDimensionArgs])
+    runSplitVideoCommand(["--demo", demoName, ...sharedArgs, ...outputDimensionArgs])
   );
 
   const voiceArgs = ["--demo", demoName, ...sharedArgs];
@@ -347,13 +344,14 @@ export async function runPipelineCommand(argv) {
   }
   await runStep("voiceover", plan.voiceover, () => runGenerateVoiceoverCommand(voiceArgs));
 
-  const audioArgs = ["--demo", demoName, ...sharedArgs, ...qualityArgs, ...outputDimensionArgs];
+  // Add-audio uses lossless encoding for intermediates (no quality args needed)
+  const audioArgs = ["--demo", demoName, ...sharedArgs, ...outputDimensionArgs];
   if (padding) {
     audioArgs.push("--padding", padding);
   }
   await runStep("add-audio", plan.addAudio, () => runAddAudioCommand(audioArgs));
 
-  // Build concat args with media options and quality settings
+  // Concat applies final compression - quality args are used here
   const concatArgs = ["--demo", demoName, ...sharedArgs, ...qualityArgs, ...outputDimensionArgs];
   if (intro) {
     concatArgs.push("--intro", intro);

package/cli/commands/record-demo.js

@@ -17,7 +17,6 @@ import {
 import { getMediaDuration } from "../utils/media.js";
 import {
   parseViewportArgs,
-  parseDeviceScaleFactor,
   getViewportHelpText,
 } from "../utils/dimensions.js";
 
@@ -49,7 +48,7 @@ ${getViewportHelpText()}
 Examples:
   sceneforge record --definition demo-definitions/create-quote.yaml --base-url http://localhost:5173
   sceneforge record --demo create-quote --definitions-dir examples --base-url http://localhost:5173
-  sceneforge record --demo create-quote --base-url http://localhost:5173 --viewport 1920x1080 --zoom 150
+  sceneforge record --demo create-quote --base-url http://localhost:5173 --viewport 1920x1080
 `);
 }
 
@@ -213,21 +212,8 @@ export async function runRecordDemoCommand(argv) {
   await ensureDir(outputPaths.videosDir);
 
   const viewport = parseViewportArgs(args, getFlagValue);
-  const zoomFactor = parseDeviceScaleFactor(args, getFlagValue);
-
-  // To achieve "zoom", we use CSS zoom to make content appear larger.
-  // The viewport stays at the requested size, and we inject CSS zoom after page load.
-  // Example: --viewport 4k --zoom 200 means:
-  //   - Viewport is 3840x2160 (4K)
-  //   - CSS zoom: 2 makes content appear 2x larger
-  //   - User sees the equivalent of 1920x1080 content filling the 4K frame
-
-  // Log what's happening
-  if (zoomFactor !== 1) {
-    console.log(`[record] Viewport: ${viewport.width}x${viewport.height} with ${Math.round(zoomFactor * 100)}% CSS zoom`);
-  } else {
-    console.log(`[record] Viewport: ${viewport.width}x${viewport.height}`);
-  }
+
+  console.log(`[record] Viewport: ${viewport.width}x${viewport.height}`);
 
   const recordDir = path.join(outputPaths.videosDir, ".recordings", definition.name);
   if (!noVideo) {
@@ -252,32 +238,12 @@ export async function runRecordDemoCommand(argv) {
   });
 
   const page = await context.newPage();
-
-  // Apply CSS zoom if requested (must be done before navigation to affect all content)
-  if (zoomFactor !== 1) {
-    await page.addInitScript((zoom) => {
-      document.addEventListener('DOMContentLoaded', () => {
-        document.documentElement.style.zoom = String(zoom);
-      });
-      // Also set immediately in case DOMContentLoaded already fired
-      if (document.documentElement) {
-        document.documentElement.style.zoom = String(zoom);
-      }
-    }, zoomFactor);
-  }
-
   const video = page.video();
   const videoRecordingStartTime = Date.now();
   const startUrl = resolveStartUrl(startPath, baseUrl);
 
   if (startUrl) {
     await page.goto(startUrl, { waitUntil: "networkidle" });
-    // Ensure zoom is applied after navigation
-    if (zoomFactor !== 1) {
-      await page.evaluate((zoom) => {
-        document.documentElement.style.zoom = String(zoom);
-      }, zoomFactor);
-    }
   }
   const result = await runDemo(
     definition,

package/cli/commands/split-video.js

@@ -5,10 +5,7 @@ import { getOutputPaths, readJson, resolveRoot } from "../utils/paths.js";
 import { getFlagValue, hasFlag } from "../utils/args.js";
 import { sanitizeFileSegment } from "../utils/sanitize.js";
 import {
-  getVideoEncodingArgs,
-  parseQualityArgs,
-  getQualityHelpText,
-  logQualitySettings,
+  getIntermediateEncodingArgs,
 } from "../utils/quality.js";
 import {
   parseOutputDimensions,
@@ -21,6 +18,9 @@ function printHelp() {
   console.log(`
 Split recorded demo video into per-step clips
 
+Uses lossless encoding for intermediate files to preserve quality.
+Final compression is applied only at the concat step.
+
 Usage:
   sceneforge split [options]
 
@@ -30,13 +30,10 @@ Options:
   --root <path>         Project root (defaults to cwd)
   --output-dir <path>   Output directory (defaults to e2e/output or output)
   --help, -h            Show this help message
-${getQualityHelpText()}
 ${getOutputDimensionsHelpText()}
 
 Examples:
   sceneforge split --demo create-quote
-  sceneforge split --demo create-quote --quality high
-  sceneforge split --demo create-quote --crf 15 --codec libx265
   sceneforge split --demo create-quote --output-size 1080p
   sceneforge split --all
 `);
@@ -71,9 +68,9 @@ async function findVideoFile(demoName, videosDir, testResultsDir) {
   return null;
 }
 
-async function splitDemo(demoName, paths, qualityOptions = {}, outputDimensions = null) {
-  console.log(`\n[split] Processing: ${demoName}\n`);
-  logQualitySettings(qualityOptions, "[split]");
+async function splitDemo(demoName, paths, outputDimensions = null) {
+  console.log(`\n[split] Processing: ${demoName}`);
+  console.log("[split] Using lossless encoding for intermediate files");
   logOutputDimensions(outputDimensions, "[split]");
 
   const scriptPath = path.join(paths.scriptsDir, `${demoName}.json`);
@@ -135,7 +132,8 @@ async function splitDemo(demoName, paths, qualityOptions = {}, outputDimensions
     );
 
     try {
-      const encodingArgs = getVideoEncodingArgs({ ...qualityOptions, includeAudio: false });
+      // Use lossless encoding for intermediate files to prevent generation loss
+      const encodingArgs = getIntermediateEncodingArgs({ includeAudio: false });
       const scaleArgs = getScaleFilterArgs(outputDimensions);
       await runFFmpeg([
         "-y",
@@ -192,7 +190,7 @@ async function splitDemo(demoName, paths, qualityOptions = {}, outputDimensions
   console.log(`[split]   Manifest: ${manifestPath}`);
 }
 
-async function splitAll(paths, qualityOptions = {}, outputDimensions = null) {
+async function splitAll(paths, outputDimensions = null) {
   console.log("\n[split] Processing all demos...\n");
 
   try {
@@ -210,7 +208,7 @@ async function splitAll(paths, qualityOptions = {}, outputDimensions = null) {
 
     for (const file of scriptFiles) {
       const demoName = path.basename(file, ".json");
-      await splitDemo(demoName, paths, qualityOptions, outputDimensions);
+      await splitDemo(demoName, paths, outputDimensions);
     }
 
     console.log("\n[split] All demos processed!");
@@ -240,16 +238,15 @@ export async function runSplitVideoCommand(argv) {
 
   const rootDir = resolveRoot(root);
   const paths = await getOutputPaths(rootDir, outputDir);
-  const qualityOptions = parseQualityArgs(args, getFlagValue, hasFlag);
   const outputDimensions = parseOutputDimensions(args, getFlagValue);
 
   if (demo) {
-    await splitDemo(demo, paths, qualityOptions, outputDimensions);
+    await splitDemo(demo, paths, outputDimensions);
     return;
   }
 
   if (all) {
-    await splitAll(paths, qualityOptions, outputDimensions);
+    await splitAll(paths, outputDimensions);
     return;
   }
 

package/cli/utils/dimensions.js

@@ -3,7 +3,6 @@
  *
  * Browser Viewport:
  * - Controls the browser window size during recording
- * - Supports device scale factor (zoom) for high-DPI capture
  *
  * Output Dimensions:
  * - Controls the final video resolution after processing
@@ -35,7 +34,6 @@ export const OUTPUT_PRESETS = {
 };
 
 export const DEFAULT_VIEWPORT = { width: 1440, height: 900 };
-export const DEFAULT_DEVICE_SCALE_FACTOR = 1;
 
 /**
  * Parse a dimension string like "1920x1080" or a preset name like "1080p"
@@ -85,35 +83,6 @@ export function parseViewportArgs(args, getFlagValue) {
   return parseDimensions(viewportValue, VIEWPORT_PRESETS, DEFAULT_VIEWPORT);
 }
 
-/**
- * Parse device scale factor (zoom) from CLI arguments
- * @param {string[]} args - CLI arguments
- * @param {Function} getFlagValue - Function to get flag values
- * @returns {number} Device scale factor (1 = 100%, 1.5 = 150%, 2 = 200%)
- */
-export function parseDeviceScaleFactor(args, getFlagValue) {
-  const zoomValue = getFlagValue(args, "--zoom");
-  const scaleValue = getFlagValue(args, "--device-scale-factor");
-
-  // --zoom takes a percentage (100, 150, 200)
-  if (zoomValue !== null && zoomValue !== undefined) {
-    const zoom = Number(zoomValue);
-    if (Number.isFinite(zoom) && zoom > 0) {
-      return zoom / 100; // Convert percentage to scale factor
-    }
-  }
-
-  // --device-scale-factor takes the actual scale (1, 1.5, 2)
-  if (scaleValue !== null && scaleValue !== undefined) {
-    const scale = Number(scaleValue);
-    if (Number.isFinite(scale) && scale > 0) {
-      return scale;
-    }
-  }
-
-  return DEFAULT_DEVICE_SCALE_FACTOR;
-}
-
 /**
  * Parse output dimensions from CLI arguments
  * @param {string[]} args - CLI arguments
@@ -192,11 +161,7 @@ Viewport Options (Recording):
                            Presets: 720p, 1080p, 1440p, 4k
                            Example: --viewport 1920x1080 or --viewport 1080p
   --width <px>             Video width (overrides --viewport)
-  --height <px>            Video height (overrides --viewport)
-  --zoom <percent>         Content zoom level: 100, 150, 200 (default: 100)
-                           Makes UI elements appear larger in the video
-                           Example: --viewport 1080p --zoom 150 records at
-                           1920x1080 with content appearing 1.5x larger`;
+  --height <px>            Video height (overrides --viewport)`;
 }
 
 /**
@@ -217,28 +182,6 @@ Output Dimensions:
                               If not specified, keeps original recording dimensions`;
 }
 
-/**
- * Log viewport settings being used
- * @param {Object} viewport - { width, height }
- * @param {number} deviceScaleFactor - Scale factor
- * @param {string} prefix - Log prefix
- */
-export function logViewportSettings(viewport, deviceScaleFactor, prefix = "") {
-  const zoomPercent = Math.round(deviceScaleFactor * 100);
-  console.log(
-    `${prefix} Viewport: ${viewport.width}x${viewport.height} @ ${zoomPercent}% zoom`
-  );
-  if (deviceScaleFactor !== 1) {
-    const effectiveRes = {
-      width: Math.round(viewport.width * deviceScaleFactor),
-      height: Math.round(viewport.height * deviceScaleFactor),
-    };
-    console.log(
-      `${prefix} Effective capture resolution: ${effectiveRes.width}x${effectiveRes.height}`
-    );
-  }
-}
-
 /**
  * Log output dimension settings
  * @param {Object|null} dimensions - { width, height } or null

package/cli/utils/quality.js

@@ -47,6 +47,12 @@ export const DEFAULT_QUALITY = "medium";
 export const DEFAULT_AUDIO_CODEC = "aac";
 export const DEFAULT_AUDIO_BITRATE = "192k";
 
+// Lossless encoding for intermediate files to prevent generation loss
+// CRF 0 = mathematically lossless for x264/x265
+// Using "ultrafast" preset since these are temporary files and encoding speed matters
+export const INTERMEDIATE_CRF = 0;
+export const INTERMEDIATE_PRESET = "ultrafast";
+
 /**
  * Get video encoding arguments for FFmpeg
  * @param {Object} options
@@ -78,6 +84,36 @@ export function getVideoEncodingArgs(options = {}) {
   return args;
 }
 
+/**
+ * Get lossless encoding arguments for intermediate files.
+ * Uses CRF 0 (lossless) to prevent generation loss during multi-step processing.
+ * Final compression should be applied only at the last step (concat).
+ *
+ * @param {Object} options
+ * @param {string} [options.codec] - Video codec: libx264, libx265 (default: libx264)
+ * @param {boolean} [options.includeAudio] - Include audio encoding args
+ * @returns {string[]} FFmpeg arguments for lossless intermediate encoding
+ */
+export function getIntermediateEncodingArgs(options = {}) {
+  const {
+    codec = DEFAULT_CODEC,
+    includeAudio = true,
+  } = options;
+
+  const args = [
+    "-c:v", codec,
+    "-preset", INTERMEDIATE_PRESET,
+    "-crf", String(INTERMEDIATE_CRF),
+  ];
+
+  if (includeAudio) {
+    // Use high-quality audio for intermediates too
+    args.push("-c:a", DEFAULT_AUDIO_CODEC, "-b:a", DEFAULT_AUDIO_BITRATE);
+  }
+
+  return args;
+}
+
 /**
  * Parse quality-related CLI arguments
  * @param {string[]} args - CLI arguments

package/context/templates/base/cli-reference.md

@@ -28,7 +28,6 @@ sceneforge record --definition <path> [options]
 | `--viewport` | Target video resolution (preset or WxH, default: 1440x900) |
 | `--width` | Video width (overrides --viewport) |
 | `--height` | Video height (overrides --viewport) |
-| `--zoom` | Content zoom level: 100, 150, 200 (default: 100) - makes UI larger |
 
 **Viewport Presets:** 720p (1280x720), 1080p (1920x1080), 1440p (2560x1440), 4k (3840x2160)
 
@@ -46,8 +45,8 @@ sceneforge record -d demo.yaml -b http://localhost:3000 --storage ./auth.json
 # Record at 1080p resolution
 sceneforge record -d demo.yaml -b http://localhost:3000 --viewport 1080p
 
-# Record at 1080p with zoomed content (UI appears 1.5x larger)
-sceneforge record -d demo.yaml -b http://localhost:3000 --viewport 1080p --zoom 150
+# Record at 4K resolution
+sceneforge record -d demo.yaml -b http://localhost:3000 --viewport 4k
 ```
 
 ### setup
@@ -94,7 +93,6 @@ sceneforge pipeline --definition <path> [options]
 | `--crf` | Override CRF value |
 | `--codec` | Video codec: libx264, libx265 |
 | `--viewport` | Target video resolution (preset or WxH) |
-| `--zoom` | Content zoom level: 100, 150, 200 (makes UI larger) |
 | `--output-size` | Final output dimensions (preset or WxH) |
 | `--output-width` | Output width (-1 for auto) |
 | `--output-height` | Output height (-1 for auto) |
@@ -116,9 +114,9 @@ sceneforge pipeline -d demo.yaml -b http://localhost:3000 --quality high --outpu
 # TikTok/YouTube Shorts format
 sceneforge pipeline -d demo.yaml -b http://localhost:3000 --output-size tiktok --quality high
 
-# Full options: viewport + zoom + output scaling
+# Full options: viewport + output scaling
 sceneforge pipeline -d demo.yaml -b http://localhost:3000 \
-  --viewport 1080p --zoom 150 \
+  --viewport 1080p \
   --output-size 1080p \
   --quality high
 ```
@@ -364,7 +362,7 @@ sceneforge split --demo my-demo --crf 15
 
 ## Viewport Settings
 
-Control output video resolution and content zoom during recording.
+Control output video resolution during recording.
 
 ### CLI Flags (record, pipeline)
 
@@ -372,7 +370,6 @@ Control output video resolution and content zoom during recording.
 --viewport <WxH|preset>      # Target video resolution (default: 1440x900)
 --width <px>                 # Video width (overrides --viewport)
 --height <px>                # Video height (overrides --viewport)
---zoom <percent>             # Content zoom: 100, 150, 200 (default: 100)
 ```
 
 ### Viewport Presets
@@ -384,16 +381,6 @@ Control output video resolution and content zoom during recording.
 | `1440p` | 2560x1440 |
 | `4k` | 3840x2160 |
 
-### How Zoom Works
-
-- `--viewport` sets the output video resolution (e.g., 1920x1080 for 1080p)
-- `--zoom` makes UI elements appear larger by using a smaller browser viewport
-- Example: `--viewport 1080p --zoom 150` records a 1920x1080 video
-  - Actual browser viewport: 1280x720 (1920/1.5 x 1080/1.5)
-  - Output video: 1920x1080
-  - Result: Content appears 1.5x larger/zoomed
-- Useful for demos where UI elements need to be more visible and readable
-
 ## Output Dimensions
 
 Control final video resolution after processing. Supports landscape, portrait, and square formats.
@@ -443,7 +430,7 @@ sceneforge concat --demo my-demo --output-size square
 
 # Full pipeline with all options
 sceneforge pipeline -d demo.yaml -b http://localhost:3000 \
-  --viewport 1080p --zoom 150 \
+  --viewport 1080p \
   --output-size 1080p \
   --quality high
 ```

package/dist/templates/base/cli-reference.md

@@ -28,7 +28,6 @@ sceneforge record --definition <path> [options]
 | `--viewport` | Target video resolution (preset or WxH, default: 1440x900) |
 | `--width` | Video width (overrides --viewport) |
 | `--height` | Video height (overrides --viewport) |
-| `--zoom` | Content zoom level: 100, 150, 200 (default: 100) - makes UI larger |
 
 **Viewport Presets:** 720p (1280x720), 1080p (1920x1080), 1440p (2560x1440), 4k (3840x2160)
 
@@ -46,8 +45,8 @@ sceneforge record -d demo.yaml -b http://localhost:3000 --storage ./auth.json
 # Record at 1080p resolution
 sceneforge record -d demo.yaml -b http://localhost:3000 --viewport 1080p
 
-# Record at 1080p with zoomed content (UI appears 1.5x larger)
-sceneforge record -d demo.yaml -b http://localhost:3000 --viewport 1080p --zoom 150
+# Record at 4K resolution
+sceneforge record -d demo.yaml -b http://localhost:3000 --viewport 4k
 ```
 
 ### setup
@@ -94,7 +93,6 @@ sceneforge pipeline --definition <path> [options]
 | `--crf` | Override CRF value |
 | `--codec` | Video codec: libx264, libx265 |
 | `--viewport` | Target video resolution (preset or WxH) |
-| `--zoom` | Content zoom level: 100, 150, 200 (makes UI larger) |
 | `--output-size` | Final output dimensions (preset or WxH) |
 | `--output-width` | Output width (-1 for auto) |
 | `--output-height` | Output height (-1 for auto) |
@@ -116,9 +114,9 @@ sceneforge pipeline -d demo.yaml -b http://localhost:3000 --quality high --outpu
 # TikTok/YouTube Shorts format
 sceneforge pipeline -d demo.yaml -b http://localhost:3000 --output-size tiktok --quality high
 
-# Full options: viewport + zoom + output scaling
+# Full options: viewport + output scaling
 sceneforge pipeline -d demo.yaml -b http://localhost:3000 \
-  --viewport 1080p --zoom 150 \
+  --viewport 1080p \
   --output-size 1080p \
   --quality high
 ```
@@ -364,7 +362,7 @@ sceneforge split --demo my-demo --crf 15
 
 ## Viewport Settings
 
-Control output video resolution and content zoom during recording.
+Control output video resolution during recording.
 
 ### CLI Flags (record, pipeline)
 
@@ -372,7 +370,6 @@ Control output video resolution and content zoom during recording.
 --viewport <WxH|preset>      # Target video resolution (default: 1440x900)
 --width <px>                 # Video width (overrides --viewport)
 --height <px>                # Video height (overrides --viewport)
---zoom <percent>             # Content zoom: 100, 150, 200 (default: 100)
 ```
 
 ### Viewport Presets
@@ -384,16 +381,6 @@ Control output video resolution and content zoom during recording.
 | `1440p` | 2560x1440 |
 | `4k` | 3840x2160 |
 
-### How Zoom Works
-
-- `--viewport` sets the output video resolution (e.g., 1920x1080 for 1080p)
-- `--zoom` makes UI elements appear larger by using a smaller browser viewport
-- Example: `--viewport 1080p --zoom 150` records a 1920x1080 video
-  - Actual browser viewport: 1280x720 (1920/1.5 x 1080/1.5)
-  - Output video: 1920x1080
-  - Result: Content appears 1.5x larger/zoomed
-- Useful for demos where UI elements need to be more visible and readable
-
 ## Output Dimensions
 
 Control final video resolution after processing. Supports landscape, portrait, and square formats.
@@ -443,7 +430,7 @@ sceneforge concat --demo my-demo --output-size square
 
 # Full pipeline with all options
 sceneforge pipeline -d demo.yaml -b http://localhost:3000 \
-  --viewport 1080p --zoom 150 \
+  --viewport 1080p \
   --output-size 1080p \
   --quality high
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@t3lnet/sceneforge",
-  "version": "1.0.22",
+  "version": "1.0.23",
   "description": "SceneForge runner and generation utilities for YAML-driven demos",
   "license": "MIT",
   "author": "T3LNET",