HTML/CSS Animation to Video (MP4): the Headless, Deterministic Way (incl. Claude) A developer has created htmlrec, a CLI tool that renders HTML/CSS animations to MP4 video frame by frame without screen recording. The tool controls the browser clock directly to capture each frame at an exact timestamp, eliminating the lag and non-deterministic results of screen recording. It works with any self-contained HTML/CSS animation, including those generated by AI tools like Claude, and supports custom resolution, duration, frame rate, and transparency. So you asked Claude to animate something. Maybe a logo, a loading screen, a data viz. It spat out a neat HTML file with CSS keyframes, everything looks crisp in the browser — and now you need it as an MP4. The obvious approach is screen recording. Open QuickTime or OBS, hit record, play the animation, stop, trim. Works, kind of. Except it's not frame-perfect. If your machine lags for half a second, that lag is baked into the video. The animation runs at whatever speed your CPU felt like that afternoon. Completely non-deterministic. And the moment you tweak something — wrong colour, timing off by 200ms — you're setting the whole thing up again, which is just tiring. Not to mention that every time you hit record you start at a slightly different frame, so swapping the asset in your video editor becomes a pain because nothing lines up the same way twice. There's a better way. You can use htmlrec https://crates.io/crates/htmlrec — a CLI tool that renders HTML animations to video frame by frame, without touching your screen. It controls the browser clock directly, so every frame is captured at exactly the right moment regardless of your machine's load. Pixel-perfect, every single time. Install it with: brew install dsplce-co/tap/htmlrec ffmpeg The reliable way to convert an HTML animation to video is to render it headlessly, frame by frame, instead of screen-recording it. Point a tool at your HTML file, let it drive the browser clock, and capture each frame at an exact timestamp: hrec render animation.html -o out.mp4 This works for any self-contained HTML/CSS animation — a logo reveal, a loading screen, a chart, or anything an LLM like Claude generated for you. The full step-by-step is below. 1. Get your animation from Claude skip if you already have an HTML animation Ask Claude for whatever you need. Something like: "Create an HTML/CSS animation of a logo appearing with a fade and slight upward motion, black background, 3 seconds" You'll get back a self-contained HTML file. Save it — let's call it animation.html . 2. Render it hrec render animation.html -o out.mp4 That's it. By default you get a 1280×720, 60fps, 5-second MP4. 3. Adjust if needed Custom resolution and duration: hrec render animation.html -o out.mp4 --width 1920 --height 1080 --duration 3 --fps 60 Need transparency for overlaying on other footage ? hrec render animation.html -o out.webm --transparent WebM with VP9 preserves the alpha channel. Works with .mov ProRes 4444 too if you're in a video editing pipeline. Here's a minimal animation Claude might generate: < DOCTYPE html