Member-only story
AGENTIC ENGINEERING
A Quick Guide to Hyperframes
Writing HTML to create videos
If you’ve ever needed to generate product launch videos, UI explainer reels, data visualizations, or automated social content, you’ve probably hit the same wall I hit… traditional video tools feel too alien and React-centric solutions like Remotion force an entire component architecture onto something that should just be a page.
HyperFrames takes a different approach. It treats video as a web-native problem. You author compositions as plain HTML + CSS + JavaScript (with GSAP, Lottie, CSS animations, Three.js, or any other seekable runtime). The framework then seeks frame-by-frame in headless Chrome and encodes a deterministic MP4 with FFmpeg.
I think it’s perfect for CI, agent pipelines, and batch rendering.
While creating videos with Hyperframes, HTML is the source of truth. Compositions are just files with data-* attributes. LLMs and agents already excel at generating HTML and HyperFrames leans into that. More on that later in this article.
The renderer captures each frame independently via Chrome’s beginFrame API. So, you don’t have to worry about dropped frames from slow machines.
