dawoodtrumboo/claude-video-export

Claude Design and Claude Artifacts can produce animated visuals using React, but there is no built-in way to export those animations as proper video files. Screen recording produces inconsistent frame rates and captures browser chrome. This tool solves that: you give it a folder containing a Stage-based animation project, and it renders every frame in a headless browser at precise timing intervals, then encodes the result to a 4K 60fps MP4 using a bundled copy of ffmpeg. No system dependencies are required beyond Node.js. The process is deterministic because the animation must be written as a pure function of time, meaning each frame is produced by setting a specific time position rather than letting it play through. This guarantees no dropped frames regardless of how complex the animation is or how slow the rendering machine processes it. The tool auto-upgrades the project's animation file at serve time to add the export mode, so existing projects require no manual edits. There are two ways to run it. A drag-and-drop web interface starts at a local port, you drop your project folder, choose resolution and frame rate (4K at 60fps or 1080p at 30fps), and the MP4 downloads when rendering is done. A command-line mode handles the same task with flags for output file, resolution, frame rate, and number of parallel rendering workers. A bulk mode processes a folder full of projects and produces a separate MP4 for each, with a zip download option in the web interface. Adding audio is straightforward. Drop a file named voiceover, narration, or with "mix" in the name into the project folder, and the exporter muxes it into the output video during encoding. It does not call any text-to-speech service itself, it accepts audio from any source. If the audio track is longer than the animation, the last frame is held until it finishes. Setup requires cloning the repository, running npm install, and running a Playwright command to download the headless Chromium browser (about 500 megabytes).