https://www.solosoft.dev/tags/gsap/Recent content in GSAP on SoloSoftHugoen-ushttps://www.solosoft.dev/post/hyperframes-video-framework-2026/Mon, 01 Jan 0001 00:00:00 +0000https://www.solosoft.dev/post/hyperframes-video-framework-2026/<p><strong>HyperFrames</strong> is an open-source video rendering framework by <a href="https://www.heygen.com">HeyGen</a> that lets you write videos as standard HTML, CSS, and JavaScript and render them to MP4, WebM, or MOV. Its tagline says it all: &ldquo;Write HTML. Render video. Built for agents.&rdquo;</p> <p>At version <a href="https://github.com/heygen-com/hyperframes">v0.4.11</a> (April 2026) and licensed under Apache 2.0, HyperFrames represents a fundamentally different approach to programmatic video creation — one built from the ground up for AI coding agents rather than human video editors.</p> <hr> <h2 id="table-of-contents">Table of Contents</h2> <ol> <li><a href="https://www.solosoft.dev/post/hyperframes-video-framework-2026/#what-makes-hyperframes-different">What Makes HyperFrames Different?</a></li> <li><a href="https://www.solosoft.dev/post/hyperframes-video-framework-2026/#how-it-works">How It Works</a></li> <li><a href="https://www.solosoft.dev/post/hyperframes-video-framework-2026/#quick-start">Quick Start</a></li> <li><a href="https://www.solosoft.dev/post/hyperframes-video-framework-2026/#built-for-ai-agents">Built for AI Agents</a></li> <li><a href="https://www.solosoft.dev/post/hyperframes-video-framework-2026/#design-system-presets">Design System Presets</a></li> <li><a href="https://www.solosoft.dev/post/hyperframes-video-framework-2026/#pre-built-components">Pre-Built Components</a></li> <li><a href="https://www.solosoft.dev/post/hyperframes-video-framework-2026/#the-rendering-pipeline">The Rendering Pipeline</a></li> <li><a href="https://www.solosoft.dev/post/hyperframes-video-framework-2026/#built-in-tts-and-captions">Built-In TTS and Captions</a></li> <li><a href="https://www.solosoft.dev/post/hyperframes-video-framework-2026/#website-capture">Website Capture</a></li> <li><a href="https://www.solosoft.dev/post/hyperframes-video-framework-2026/#frame-adapter-pattern">Frame Adapter Pattern</a></li> <li><a href="https://www.solosoft.dev/post/hyperframes-video-framework-2026/#deterministic-rendering">Deterministic Rendering</a></li> <li><a href="https://www.solosoft.dev/post/hyperframes-video-framework-2026/#current-limitations">Current Limitations</a></li> <li><a href="https://www.solosoft.dev/post/hyperframes-video-framework-2026/#getting-started">Getting Started</a></li> </ol> <hr> <h2 id="what-makes-hyperframes-different">What Makes HyperFrames Different?</h2> <p>Before HyperFrames, the standard approach to code-driven video was <a href="https://remotion.dev">Remotion</a>, which requires React (TSX) components and a full bundler pipeline. HyperFrames strips that away entirely:</p>