Hyperframes
Write HTML. Render video. Built for agents.
What is Hyperframes?
Hyperframes is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to write html. render video. built for agents.
Write HTML. Render video. Built for agents.
This server falls under the Developer Tools category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- Write HTML. Render video. Built for agents.
Use Cases
Maintainer
Works with
Installation
Manual Installation
npx hyperframesConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use Hyperframes
HyperFrames is an open-source framework from HeyGen for turning HTML, CSS, seekable animations (GSAP, Lottie, Three.js, WAAPI), and media assets into deterministic MP4 videos by seeking through frames in headless Chrome and encoding with FFmpeg. It is specifically designed for AI coding agents, providing skills that teach agents the full video production loop — plan, write HTML, wire animations, add media, lint, preview, and render — through a single composition data model using data attributes for timing and tracks. Developers and content teams use HyperFrames to automate product launch videos, code walkthrough recordings, data visualization animations, social media content, and docs-to-video pipelines entirely from code.
Prerequisites
- Node.js 22 or later installed (required — earlier versions are not supported)
- FFmpeg installed and available in PATH for video encoding
- An MCP-compatible AI coding client such as Claude Code, Cursor, Gemini CLI, or Codex
- Chrome or Chromium available for the headless browser renderer
- Basic understanding of HTML, CSS, and JavaScript for authoring compositions
Verify Node.js 22+ and FFmpeg are installed
HyperFrames requires Node.js 22 or later and FFmpeg for rendering. Verify both are available before proceeding. If FFmpeg is not installed, get it from ffmpeg.org or via your package manager.
node --version # Must be 22 or later
ffmpeg -version # Must be installed
# Install FFmpeg if needed:
# macOS: brew install ffmpeg
# Ubuntu: sudo apt install ffmpegInitialize a new HyperFrames video project
Use the HyperFrames CLI to scaffold a new video project. This creates the directory structure, a starter HTML composition file, and the necessary configuration.
npx hyperframes init my-video
cd my-videoPreview your composition in the browser
Start the preview server to see your HTML composition with live reload. This lets you iterate on the design and timing in a real browser before committing to a full render, which can be slow.
npx hyperframes previewRender the composition to MP4
Once satisfied with the preview, render the composition to an MP4 file. The renderer seeks each frame in headless Chrome and encodes it with FFmpeg, producing a deterministic video — the same HTML input always produces the same output.
npx hyperframes renderAdd the HyperFrames MCP server to your AI client configuration
Configure the HyperFrames MCP server in your MCP client so AI coding agents can assist with writing compositions, adding catalog blocks, and orchestrating the full video production workflow.
Use catalog blocks for common video elements
Install ready-made animation blocks from the HyperFrames catalog. Blocks include shader transitions, social overlays, animated charts, and kinetic caption components that agents can assemble into complete videos.
npx hyperframes add flash-through-white
npx hyperframes add data-chart
npx hyperframes add instagram-followHyperframes Examples
Client configuration
Add this block to your claude_desktop_config.json under the mcpServers key to enable the HyperFrames MCP server.
{
"mcpServers": {
"hyperframes": {
"command": "npx",
"args": ["hyperframes"]
}
}
}Prompts to try
Once HyperFrames is connected to your AI coding agent, use these prompts to create videos from HTML compositions.
- "Using HyperFrames, create a 10-second product intro with a fade-in title and background video"
- "Build a 30-second animated data chart race video using the HyperFrames data-chart catalog block"
- "Create a social media video with kinetic captions and background music using GSAP animations"
- "Convert this markdown README into a 60-second explainer video using HyperFrames"Troubleshooting Hyperframes
Render fails with 'FFmpeg not found' or encoding errors
Ensure FFmpeg is installed and the 'ffmpeg' binary is in your system PATH. Test with 'ffmpeg -version' in a terminal. On macOS, install via 'brew install ffmpeg'. On Linux, use 'sudo apt install ffmpeg' or 'sudo yum install ffmpeg'. The PATH must be available to the npx process.
Preview server starts but animations are not seekable or play incorrectly
HyperFrames requires animations to be registered on the window.__timelines object and paused initially. Ensure your GSAP, Anime.js, or other animation timelines are created with paused: true and exposed via window.__timelines[compositionId]. Check the data-start and data-duration attributes on each .clip element.
Node.js version error on startup
HyperFrames requires Node.js 22 or later. Run 'node --version' to check your current version. Use nvm to switch: 'nvm install 22 && nvm use 22', or download Node.js 22 LTS directly from nodejs.org. The package.json engines field will also reject older versions during install.
Frequently Asked Questions about Hyperframes
What is Hyperframes?
Hyperframes is a Model Context Protocol (MCP) server that write html. render video. built for agents. It connects AI assistants to external tools and data sources through a standardized interface.
How do I install Hyperframes?
Follow the installation instructions on the Hyperframes GitHub repository. Clone the repo, install dependencies, and add the server config to your AI client.
Which AI clients work with Hyperframes?
Hyperframes works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is Hyperframes free to use?
Yes, Hyperframes is open source and available under the Apache-2.0 license. You can use it freely in both personal and commercial projects.
Hyperframes Alternatives — Similar Developer Tools Servers
Looking for alternatives to Hyperframes? Here are other popular developer tools servers you can use with Claude, Cursor, and VS Code.
Ecc
★ 188.2kThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
Javaguide
★ 155.8kJava 面试 & 后端通用面试指南，覆盖计算机基础、数据库、分布式、高并发、系统设计与 AI 应用开发
Gemini CLI
★ 104.5kA secure MCP server that wraps the Google Gemini CLI, allowing clients to query Gemini models using local OAuth sessions without requiring an API key. It provides tools for model interaction and diagnostics with built-in protection against command in
Awesome MCP Servers
★ 87.3k⭐ Curated list of Model Context Protocol (MCP) servers - tools that extend Claude Desktop, Cursor, Windsurf, and other MCP clients with custom capabilities.
MCP Servers
★ 86.0kModel Context Protocol Servers
CC Switch
★ 77.5kA cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Gemini CLI & Hermes Agent. Only official website: ccswitch.io
Browse More Developer Tools MCP Servers
Explore all developer tools servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.
Set Up Hyperframes in Your Editor
Choose your AI client for step-by-step setup instructions.
Quick Config Preview
Add this to your claude_desktop_config.json or .cursor/mcp.json
Ready to use Hyperframes?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.