Render a Claude Design animation to MP4 or transparent ProRes
Ready nowHeadless Chrome renders an Animation.html plus scene.jsx frame-perfect to MP4 or transparent ProRes, with green-screen fill and auto-stripping of full-bleed backdrops, ready for Resolve.
Kit
No separate kit. The playbook is self-contained.
You need
| Account | Why | Free or paid | Plan |
|---|---|---|---|
| Node.js 24 (npm, npx) | Runs Claude Code, the Vercel CLI, HyperFrames renders, Playwright, the MCP servers and every serverless function locally. | Free | Free. Node 24 LTS (the Brain MCP server and Vercel functions target Node 24). |
| Playwright + headless Chrome (and Safari for the final check) | Renders pages to PNG for visual QA, drives the dashboard verification protocol, captures library stills, renders HTML titles and animations offline. | Free | Free. Google Chrome installed for headless screenshots; Playwright installs its own Chromium and WebKit. |
| ffmpeg + ffprobe | Every cut, mux, loudness pass, proxy, contact sheet and platform encode. The delivery encoder uses h264_videotoolbox on Apple Silicon. | Free | Free (Homebrew build includes VideoToolbox). |
What you bring
- Your animation folder, when you render one
The steps
- Create the renderer and the skill
- Confirm the three files and the intent
- Render
- Verify the written file, not the flags
- Place it on your timeline and check both edges
Get the full playbook
Part of: Install your video editing suite