HyperFrames: Let Coding Agents Turn HTML into MP4 Videos

Melvin Vivas · X video post · 2026-04-17 · 0:49 · 96 views · Open on X

Topics: AI Dev Tools & Productivity, AI Agents, Tool Use & MCP · Level: beginner

Summary

Melvin Vivas shares HeyGen's launch video for HyperFrames, an open-source framework built for AI agents. The agent writes HTML, CSS, and JS compositions and HyperFrames renders them to MP4. HeyGen says they made the launch video itself in Claude Code. You install HyperFrames as an agent skill with one command, describe the video you want, and the agent writes the code that builds it.

Key points

• HyperFrames is an open-source framework from HeyGen built for agents: the agent writes HTML and HyperFrames renders it to MP4.
• Install it as an agent skill with: npx skills add heygen-com/hyperframes
• HeyGen says its launch video was made with Claude Code plus HyperFrames.
• Anything a browser can render can be a frame: CSS animations, GSAP, Lottie, shaders, Three.js.
• You can add music, sound effects, and footage, and they are combined in code.
• Rendering is deterministic and pixel-perfect, so the same code gives the same video every time.
• Workflow: give the agent the skill, tell it what to make, and watch it build.

Resources mentioned

• HyperFrames · tool · github.com · free
  HeyGen's open-source framework built for agents that renders HTML/CSS/JS compositions to MP4 video frame by frame.
  Also in: Codex Astra Making a Demo Video with HyperFrames (Melvin Vivas on X · notes), Hermes Agent + HyperFrames: Turning a Web Page into a Video (Melvin Vivas on X · notes), Codex + Hyperframes: AI-Made Explainer Videos (Example: Personal AI) (Melvin Vivas on X · notes), Agent-Made Video in 10 Minutes: Hermes Agent + Grok 4.5 + Hyperframes (Melvin Vivas on X · notes) and 1 more
• HeyGen · tool · x.com · check price
  AI video-generation platform for avatar and generative video, which now offers the Seedance 2.0 model.
  Also in: Making AI Avatar Videos with Claude Code and HeyGen Skills (Melvin Vivas on X · notes), Seedance 2.0 Video Model Now Available Inside HeyGen (Demo Clip) (Melvin Vivas on X · notes), Making an AI Avatar YouTube Video with HeyGen (Melvin Vivas on X · notes)
• Claude Code · tool · code.claude.com · paid · recommended by both Bashiri Smith & Melvin Vivas
  Build agents and pipelines from the terminal; the guide's main agentic coding tool.
  Also in: Create Claude Code Plugins with /plugin-authoring (Melvin Vivas on X · notes), Claude Code mods: customize behavior and UI with plugins (Melvin Vivas on X · notes), AI Engineer Roadmap Overview: From ML Foundations to RAG, Agents & Ops (Bashiri Smith on Facebook · notes), SkillsBento: Free Plugin Marketplace for Codex and Claude Code (Melvin Vivas on X · notes) and 101 more
• skills CLI (npx skills) · tool · skills.sh · free
  Command-line tool for installing agent skills, used here to add the HyperFrames skill to your agent.
• GSAP · tool · gsap.com · free
  JavaScript animation library that can drive animations inside HyperFrames videos.
• Lottie · tool · airbnb.io · free
  Format and library for vector animations that can be used inside HyperFrames compositions.
• Three.js · tool · x.com · free
  JavaScript 3D graphics library whose browser-rendered scenes can become video frames.
  Also in: Building a 3D Flight Scene with Sonnet in Cursor, three.js and 3D Models (Melvin Vivas on X · notes), Vibe-Coding a 3D Human Anatomy App with Three.js and GPT 5.6 (Melvin Vivas on X · notes), Building a Three.js Scene with Claude Opus 5 in Claude Desktop (Melvin Vivas on X · notes), GLM-5.1 vs Claude Code (Opus 4.6): One-Shot Three.js Racing Game Eval (Melvin Vivas on X · notes)

Try this

• Install the skill: npx skills add heygen-com/hyperframes
• Give your coding agent (e.g. Claude Code) the skill and describe the video you want.
• Ask the agent to add CSS animations, GSAP, Lottie, shaders, or Three.js, plus music, sound effects, and footage.
• Optional: retweet and comment "HyperFrames" on the original post to get the launch video's source code (you must follow the account).
• Use an AI coding agent and HyperFrames to make a product launch or demo video from HTML/CSS/JS.
• Build animated explainer videos with GSAP, Lottie, or Three.js scenes, add music, and render them to MP4.