atypical-chai/motion-graphics-from-css-hyperframes

This project converts HTML and CSS animations into transparent video clips you can drop into any video editor as overlays. Normally, creating animated lower-thirds, chapter title cards, name tags, or intro graphics requires learning professional motion-graphics software. This tool lets you describe the animation as a plain web page with CSS keyframes, then it renders that page in a headless Chrome browser, captures every frame, and stitches the frames into a ProRes 4444 video file with a transparent background. The transparent background is the key feature. Because there is no white box or background color, when you place the clip over footage in Premiere Pro, DaVinci Resolve, or Final Cut, only the text or shape you animated is visible. Your video shows through behind it, exactly like a professional overlay. A verification step checks pixel by pixel that the transparency is real before handing you the file. Batch rendering is supported: you provide a JSON file containing a list of text values, and the tool renders one video clip for each entry. This is useful for producing a full set of chapter title cards or lower-thirds for an episode in a single pass. The workflow is organized around a reusable engine and separate project folders. You set the engine up once and keep your animation files, batch lists, and rendered videos under a project folder excluded from version control. A template library lets you save finalized clip designs as looping HTML previews that can be reused across projects. The repo also includes a prompt file for pasting into an AI assistant to generate animation HTML in the expected format. The tool depends on HeyGen HyperFrames for headless Chrome rendering and ffmpeg for video encoding. The render scripts are written in PowerShell, which means the setup is oriented toward Windows. The README covers a design-lab workflow for iterating on the look in a browser before committing to a render.