Hyperframes takes a different path in video rendering frameworks by making HTML the core authoring primitive instead of React. This choice is far from trivial: it directly aligns with how AI coding agents understand and generate content, eliminating layers of abstraction and build steps that traditionally bog down video composition workflows.
What hyperframes is and how it works
Hyperframes is an open-source video rendering framework that uses HTML, CSS, and GSAP for creating compositions. Unlike frameworks like Remotion that rely on React components, Hyperframes compositions are plain HTML files enriched with data attributes. This design means no build step is needed — you write or generate HTML directly.
Under the hood, the rendering pipeline uses headless Chrome controlled via Puppeteer to render frames deterministically. These frames are then encoded into video with FFmpeg. This approach guarantees frame-accurate, deterministic output, an essential feature for professional video generation.
The repo is written in TypeScript and designed to integrate tightly with AI coding agents such as Claude Code, Cursor, Gemini CLI, and Codex. It ships a set of skills/plugins that teach these agents how to author valid video compositions using GSAP timelines, Tailwind v4 styles, and adapter animations like Lottie and Three.js.
A key architectural element is the Frame Adapter pattern, which abstracts different animation runtimes behind a common interface. This lets you plug in GSAP, Lottie, CSS animations, Three.js, Anime.js, or even native Web Animations API seamlessly.
Hyperframes also provides 50+ composable blocks, reusable HTML snippets with configurable animations and styles, enabling faster composition development.
Currently, the system is designed for single-machine use only; there’s no distributed rendering support yet, which limits scalability for large batch jobs.
Why hyperframes stands out technically
The choice to use HTML as the native composition format is the most distinguishing aspect of Hyperframes. AI agents understand HTML out of the box, so teaching them a new DSL or React component model is unnecessary. This drastically improves the developer experience when generating video compositions programmatically.
The CLI is designed to be non-interactive by default, perfectly fitting into AI agent workflows where commands must run unattended. The skill/plugin system integrates deeply with popular AI coding agents, making it possible to invoke composition generation and animation assistance directly from the agent’s environment.
The rendering pipeline’s use of headless Chrome and Puppeteer, rather than a custom renderer or React DOM, provides a fully-fledged browser environment. This means CSS, SVG, WebGL, and all modern web platform features are available without approximation.
The Frame Adapter pattern is a well-thought abstraction that lets Hyperframes support multiple animation runtimes without coupling the core engine to any specific library. This approach gives flexibility but comes with the tradeoff of added complexity in adapter maintenance.
GSAP is used as the default animation engine, leveraging its seekable timeline for precise control. Unlike Remotion’s library-clock animations, Hyperframes uses wall-clock animation semantics, which can be more intuitive for certain real-time scenarios.
The codebase is surprisingly clean given the complexity, with a clear separation between composition authoring, animation runtime adapters, and rendering orchestration.
Tradeoffs include the lack of distributed rendering, which can be a bottleneck for very large projects. Also, relying on Puppeteer and headless Chrome means the runtime footprint is heavier than purely native solutions, and may not be suitable for environments with strict resource constraints.
Quick start with AI coding agents
Hyperframes is designed to be used with AI coding agents that can install and invoke its skills. Here’s the recommended way to get started:
npx skills add heygen-com/hyperframes
This command installs the Hyperframes skills into your AI agent environment. These skills teach the agent how to:
- Author valid HTML video compositions with GSAP timelines
- Use Tailwind v4 styles at runtime in the browser
- Access adapter skills for animation runtimes like Anime.js, CSS animations, Lottie, Three.js, and Web Animations API
For Claude Design users, there is a specific guide in docs/guides/claude-design-hyperframes.md that helps produce first drafts of compositions.
Codex users can add the Hyperframes plugin directly from the OpenAI Codex plugin marketplace:
codex plugin marketplace add heygen-com/hyperframes --sparse .codex-plugin --sparse skills --sparse assets
For Cursor users, the skills are packaged as a Cursor plugin installable from the marketplace or sideloaded by cloning the repo and loading it as an unpacked plugin.
Once installed, you can prompt your agent with commands prefixed with /hyperframes to start creating video compositions interactively or programmatically.
verdict
Hyperframes is a niche but clever tool that bets on HTML as the native format for video composition, optimized for AI agent workflows. If you’re building AI-driven video generation pipelines or want a no-build-step, web-native approach to video rendering, it’s worth a close look.
The project’s integration with multiple AI coding agents through a skill/plugin system is a standout feature, enabling a very modern, agent-first developer experience. The Frame Adapter pattern and deterministic rendering pipeline deliver flexibility and precision.
However, if your use case requires distributed rendering or extremely lightweight runtimes, Hyperframes may not be a fit yet. The reliance on headless Chrome and Puppeteer adds overhead, and the single-machine scope limits scalability.
Overall, Hyperframes offers a fresh take on video rendering that’s particularly relevant for teams invested in AI coding agents and web-native technologies. Its code quality and architectural choices reflect a pragmatic, well-structured approach rather than hype. Worth exploring if you want to build video workflows that AI can generate and control directly.
Related Articles
- Flowise: visual low-code AI agent builder with a modular TypeScript monorepo — Flowise offers a visual drag-and-drop low-code platform to build AI agents and LLM apps, with a Node.js backend and Reac
- CopilotKit: Building dynamic agentic UIs with the AG-UI protocol — CopilotKit introduces the AG-UI Protocol, enabling AI agents to dynamically render and update UI components in React app
→ GitHub Repo: heygen-com/hyperframes ⭐ 14,154 · TypeScript