Buttery 4K product demos with Playwright (no Screen Studio)
Those silky product demos all over Threads and X are usually made with Screen Studio. Great tool, but manual, and macOS-only. I wanted something scriptable.
What
A Playwright setup that auto-records a scripted browser walkthrough as a clean, native-4K, cinematic demo video, re-runnable with one command every time the site changes.
Why it matters
Manual screen recording doesn't scale and isn't repeatable. A scripted recorder means every product update gets fresh demos in minutes, in both 9:16 and 16:9, for free, no subscription, no re-shoot.
Who it's for
Developers and makers who ship product demos for landing pages, Threads/X, or Product Hunt and don't want to re-record by hand every time.
When & where
Any time the UI changes, or you need launch content. Run the script, get updated demos. It lives in the repo next to the code it demos.
How
The parts that matter:
- Native 4K, not upscaled. Playwright records at the CSS viewport size. Record at a true 4K viewport, then apply a base CSS
zoomso the framing looks right while pixels stay native 4K. - Never motion-interpolate screen recordings. ffmpeg's
minterpolatemelts sharp scrolling text into smeared frames, it looks broken. Clean 30fps with smooth CSS easing beats a glitchy fake 60. - Zoom the content, not the page. Transforming
<html>shoves fixed elements (modals) off-screen. Transform a wrapper like<main>around the viewport centre, with slow easing. - One command. Wrap record → encode in a single
make-demo.shthat outputs both aspect ratios.
The takeaway
You don't need a paid app for good demos. You need a deliberate script, a true-4K capture, and the discipline to not fake the framerate.
Building an AI agent?
I'm packaging how I ship them into one kit. Early access:
AI Agent Starter Kit →