Stitching together videos and adding overlays causes the rendered video to be stretched

[brian-t-allen]

Describe the bug

When stitching together multiple .mp4 videos and adding an overlay the video gets stretched and all attempts to avoid the stretching have failed.

Link to reproduction

https://github.com/brian-t-allen/hyperframes-render-bug

Steps to reproduce

1. Clone the repo above
2. cd repro
3. npm run render -- -o /tmp/hyperframes-stretch-repro.mp4 --fps 25 --quality draft --workers 2 --no-browser-gpu
4. Confirm the generated video stretches

Expected behavior

The rendered video should have overlays and background videos without stretching.

Actual behavior

The rendered video is stretched taller around the times the overlay is added or removed.

Environment

✓ Version          0.6.6 (latest)
  ✓ Node.js          v22.16.0 (darwin arm64)
  ✓ CPU              10 cores · Apple M4 @ 2400MHz
  ✗ Memory           32.0 GB total · 0.1 GB free
                     Low memory — renders may fail. Close other apps or increase RAM.
  ✓ Disk             15.0 GB free
  ✓ Environment      Native terminal
  ✓ FFmpeg           ffmpeg version 8.0.1 Copyright (c) 2000-2025 the FFmpeg developers
  ✓ FFprobe          ffprobe version 8.0.1 Copyright (c) 2007-2025 the FFmpeg developers
  ✓ Chrome           system: /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
  ✗ Docker           Not found
                     https://docs.docker.com/get-docker/
  ✗ Docker running   Not running
                     Start Docker Desktop or run: sudo systemctl start docker

Additional context

No response

[brian-t-allen]

Output of chrome://gpu:
about-gpu-2026-05-14T15-48-46-952Z.txt

Chrome version: 148.0.7778.168

macOS version: 26.4.1 (25E253)

Chip: M4

Reproducibility: The stretch happens at the same point each time

[brian-t-allen]

@miguel-heygen I ran my repro test with the changes in #838 and the stretching still happened

[miguel-heygen]

@brian-t-allen did you render the video using the CLI built in #838?

[brian-t-allen]

@miguel-heygen Yes. I rendered with the CLI built from the local checkout of PR #838 (checked out at ab533b3 fix(engine): preserve video frame replacement geometry), not the published npx hyperframes@0.6.6.

Then rendered with:
node /private/tmp/hyperframes-pr838/packages/cli/dist/cli.js render
-o /private/tmp/hyperframes-pr838-render.mp4
--fps 25 --quality draft --workers 2 --no-browser-gpu .

[brian-t-allen]

@miguel-heygen This solved the problem for me:

In packages/engine/src/services/screenshotService.ts change from this:

const clip = dpr > 1 ? { x: 0, y: 0, width: options.width, height: options.height, scale: dpr } : void 0;

to:

const clip = { x: 0, y: 0, width: options.width, height: options.height, scale: dpr };

[miguel-heygen]

@brian-t-allen good catch — incorporated your fix into this PR. The clip parameter is now always passed to Page.captureScreenshot regardless of dpr. Could you pull the updated branch and confirm the stretch is gone on your end?