How to convert Claude HTML/CSS animation to video

Table of contents

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 — 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:

BASH
brew install htmlrec ffmpeg

The workflow

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

BASH
hrec render animation.html -o out.mp4

That's it. By default you get a 1280×720, 30fps, 5-second MP4.

3. Adjust if needed

Custom resolution and duration:

BASH
hrec render animation.html -o out.mp4 --width 1920 --height 1080 --duration 3 --fps 60

Need transparency (for overlaying on other footage)?

BASH
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.

Example

Here's a minimal animation Claude might generate:

HTML
<!DOCTYPE html>
<html>
<head>
    <style>
    body { margin: 0; background: #000; display: grid; place-items: center; height: 100vh; }
    .logo {
        font-family: sans-serif;
        font-size: 64px;
        colour: #fff;
        opacity: 0;
        transform: translateY(20px);
        animation: appear 1s ease forwards;
    }
    @keyframes appear {
        to { opacity: 1; transform: translateY(0); }
    }
    </style>
</head>
<body>
    <div class="logo">dsplce</div>
</body>
</html>

Render it:

BASH
hrec render animation.html -o logo.mp4 --duration 2

Clean MP4, no screen recording, no lag, no manual trimming.

The whole point of htmlrec is to remove the friction between "Claude gave me an animation" and "I have a video file I can actually use." One command, done.

If you're generating HTML assets regularly — ad creatives, onboarding animations, motion graphics for social — this becomes part of your pipeline rather than a manual step every time.

Source and docs: github.com/dsplce-co/htmlrec

How to convert a Claude animation to MP4

BASH
hrec render animation.html -o out.mp4

MP4 is the safest choice for most use cases — universally supported, small file size, plays everywhere. No extra flags needed.

How to convert a Claude animation to WebM

BASH
hrec render animation.html -o out.webm

WebM is a good fit if you're embedding the animation on the web. Smaller than MP4 at comparable quality, and natively supported in all modern browsers.

How to convert a Claude animation to transparent video

BASH
hrec render animation.html -o out.mov --transparent

MOV with ProRes 4444 is the most reliable format for transparency — virtually every video editor (Premiere, After Effects, Final Cut) handles it without issues.

WebM also supports an alpha channel:

BASH
hrec render animation.html -o out.webm --transparent

But in practice, a lot of editing software either doesn't support WebM at all, or silently drops the alpha channel when importing it. If you're taking the file into a video editor, stick with MOV.

Still, if you're embedding the animation directly on a web page rather than taking it into an editor, transparent WebM is perfect — browsers handle it natively and the file size is a fraction of MOV.

Table of contents
Privacy Policy

® dsplce.co 2026

Get in touch