Why does my screen recording stutter?

The browser dropped frames while recording. Close other apps, lower the stage resolution, or switch to headless frame capture, which never drops frames because it doesn't play in real time.

Can Claude write the capture script for me?

Yes. Ask it to make the animation seekable and to write a Playwright capture script plus the FFmpeg command. Claude Code can run it for you.

Turn a Claude HTML animation into an MP4 (three ways)

1 · SCREEN RECORDING

Open the file in a browser, go full screen, and record. On macOS that's the built-in screen recorder; on Windows the Snipping Tool or Xbox Game Bar; anywhere, OBS. Then trim the start and end.

Size the browser window to the stage (1920×1080) or zoom until the stage fills the screen exactly.
Close other apps and hide notifications: dropped frames show as stutter.
Add a short delay or a "click to start" to the page so you can start recording before the animation begins.

Good enough for social posts. Not frame-accurate, and the length will drift by a few frames.

2 · HEADLESS FRAME CAPTURE

For an exact result, don't play the animation, step it. If Claude wrote the animation to be driven by a time value (ask it to: "expose a window.seek(t) function that renders the frame at time t"), a script can visit every frame in a headless browser and screenshot it.

// capture.mjs — needs: npm i playwright, and ffmpeg on PATH
import { chromium } from "playwright";
const fps = 30, seconds = 15;
const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1920, height: 1080 } });
await page.goto("file://" + process.cwd() + "/animation.html");
for (let i = 0; i < fps * seconds; i++) {
  await page.evaluate((t) => window.seek(t), i / fps);
  await page.screenshot({ path: `frames/${String(i).padStart(5, "0")}.png` });
}
await browser.close();

// then:
// ffmpeg -framerate 30 -i frames/%05d.png -c:v libx264 -pix_fmt yuv420p out.mp4

This is roughly what the rendering frameworks do internally, and it's what at least two creators in the index did by hand, using Playwright and FFmpeg. It's worth it when timing has to be exact, for example to match a voiceover.

3 · A RENDER FRAMEWORK

If you'll make more than one video, move the work into HyperFrames or Remotion and let the framework handle seeking, capture and encoding. You also get a live preview and agent skills that teach Claude the framework's conventions. See the setup guide.

ENCODING FOR SOCIAL

Use H.264 with -pix_fmt yuv420p; it plays everywhere, including X and older phones.
Add -movflags +faststart so the video starts playing before it has fully downloaded.
Text-heavy motion graphics compress badly at low bitrates; if type looks smeared, raise the quality with -crf 18.
For vertical platforms, build the stage at 1080×1920 from the start rather than cropping a landscape render.