HyperFrames

HyperFrames is HeyGen's open-source framework for turning HTML, CSS, media and animation into MP4 video. This plugin gives your coding agent every HyperFrames skill, so you describe the video and the agent plans it, writes the composition, previews it and renders it. You get an editable project folder, not a flattened file, so you can keep changing it by asking, in the browser editor or from the command line. What you can do with it - Product launch videos and feature announcements - Explainers and site tours from a website, docs or a PDF - Social videos with kinetic captions, overlays and music - Data visualizations, chart races and map animations - Pull request walkthroughs with animated code diffs, narration and captions - Slideshows and interactive decks, and ports of existing Remotion projects What its skills teach the agent - hyperframes: the render contract and the work loop, with references for film, captions, overlays, motion and look - hyperframes-cli: scaffold, check, preview and render, locally or in the cloud - hyperframes-registry: a catalog of ready-made blocks and components, such as transitions, titles, captions, charts, maps and camera moves - media-use: music, sound effects, images, voiceover, transcripts and cutouts, with HeyGen or free local tools - figma, slideshow and remotion-to-hyperframes: bring in Figma designs, build decks, and port Remotion projects How to install it In Claude Code, run claude plugin marketplace add heygen-com/hyperframes, then claude plugin install hyperframes@hyperframes; it's also in Claude Code's official plugin marketplace. Copilot CLI and VS Code add the same GitHub marketplace, and Gemini CLI installs it with gemini extensions install https://github.com/heygen-com/hyperframes. Cursor and Codex have their own routes in HeyGen's plugin guide. Good to know - You need Node.js 22 or later and npm for the HyperFrames CLI, plus FFmpeg for rendering. - HyperFrames is free and Apache 2.0 licensed. HeyGen media such as avatars, HeyGen voices and generated clips uses HeyGen credits, and only when you ask for it. - Renders are deterministic: each frame is captured in headless Chrome and encoded with FFmpeg, so the same project gives the same video. - In Claude.ai or ChatGPT, HeyGen's separate HyperFrames connector builds and renders videos in your HeyGen account instead.

• “Turn this website into a 20-second product promo.”

  Copy

• “Create an animated title card with kinetic type.”

  Copy

• “Add synced captions to this voiceover.”

  Copy

• “Make a 10-second product intro with a fade-in title, a background video and subtle background music.”

  Copy

• “Make a walkthrough video of this pull request with an animated code diff.”

  Copy

• “Turn this data into an animated chart race.”

  Copy