Repo of the Week · Week 43, 2026
A free tool that lets your AI coding agent make real videos by writing a web page.
What’s a repo?A repo is a project’s code folder on GitHub, free to download. heygen-com/hyperframes on GitHub
Write HTML. Render video. Built for agents.
Your AI coding agent builds the video like a web page: text, pictures, animation and music, each with a start time. HyperFrames plays it in your browser so you can check it, then turns it into an MP4 on your own computer.
People who already use an AI coding agent and want product launch videos, explainers, captions or social clips without learning a video editor.
Node.js 22 or newer, FFmpeg, and an agent like Claude Code, Codex or Cursor. No HeyGen account is needed to make and render videos on your computer.
Created Mar 10, 2026, it now has 66,983 stars and 6,072 forks (GitHub API, Oct 19, 2026). GitHub Trending shows 5,883 new stars this week. On X, 610 original posts mentioned HyperFrames in the past 7 days, not counting HeyGen and its staff; the 72 we read came from 65 different people. Here’s what people are sharing:
Official launch of "Reference Any Video" and brand kits in HyperFrames Studio: 1,592 likes, 458 reposts, 329 quotes.
@HyperFrames_ · Oct 15, 2026 ↗HyperFrames hit 64,048 GitHub stars in 7 months. Remotion took 6 years to get there.
@0xbobaaa · Oct 15, 2026 ↗Added 4,443 stars in 7 days, steady at 373 to 921 new stars a day.
@awesomemapdev · Oct 12, 2026 ↗Your AI coding agent can create actual videos instead of just writing scripts for them.
@0xrux · Oct 18, 2026 ↗A copy-paste Claude Code prompt that turns your website into a 30-second launch video (in Arabic).
@AbuSaud_Cyber · Oct 14, 2026 ↗To replace Adobe or Resolve, Claude + HyperFrames will be judged like any creative tool: 1% worse than my stack is worthless.
@mattworkman · Oct 19, 2026 ↗My demo clip rendered fine weeks ago. Still useless for a real launch cut.
@enzo66lin · Oct 15, 2026 ↗An open-source framework that turns HTML, CSS, media and seekable animations into deterministic MP4 videos. Your coding agent writes the video as a web page with timing attributes; HyperFrames previews it in the browser and renders it frame by frame with headless Chrome and FFmpeg. Use it from the CLI or through agent skills.
Point it at a website URL or a brief and get a launch film with the site's own screens, type and colours
Topic explainers with no footage needed: typography, diagrams and data-viz
A GitHub pull request becomes a changelog or feature-reveal clip (read via the gh CLI)
Captions on talking-head videos, plus lower-thirds, data callouts and kinetic titles
Kinetic type, logo stings, and beat-synced videos cut to a music track
Slideshows, animated charts and maps, plus ready blocks like data-chart, flowchart and logo-outro
A CTO drove the HyperFrames skills with a local model (Qwen 3.8 Flash Next on a 64 GB MacBook Pro) to make a 30-second, six-scene vertical promo with no human feedback: 6 h 45 min, 57 agent sessions, 23/23 hidden acceptance tests passed. He calls the look modest, closer to an animated slide deck.
Ran it on Linux with Node 22 and FFmpeg: init, edit index.html, render. A 6-second 1080×1080 MP4 rendered in 3.7 seconds, free, no API key.
Made four motion graphics with HyperFrames and GSAP (a two-colour risograph look, a terminal breaking into text, a number count-up), adapting prompts seen on X.
Knows nothing about editing: he asked Claude Code to download the HyperFrames repo and it edited his whole demo video.
tldraw generates automated pull-request walkthrough videos with GSAP-animated code diffs, narration and captions.
A 15-second science fan cut for Argon, drawn like a sketchbook: one prompt in HyperFrames Studio, under $10.
HyperFrames needs Node.js 22+ and FFmpeg. Open a terminal and run:
node --version
ffmpeg -versionYou should see v22 or higher, then FFmpeg's version. If FFmpeg is missing, install it from ffmpeg.org first.
In Claude Code, install the plugin:
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframesFor Codex, Cursor, OpenCode and other agents with skills, run this in your project folder and pick Core Skills:
npx skills add heygen-com/hyperframesStart a new session (in Claude Code you can also run /reload-plugins) so it loads the skills.
Using /hyperframes, make a 10-second product intro for https://example.com.Swap in your own page. The agent proposes a direction, asks for anything missing, then leaves an editable project folder and opens a local preview. In the Claude Code plugin the skill is /hyperframes:hyperframes.
Inside the project folder:
npx hyperframes preview
npx hyperframes render --output final.mp4Watch the first version once and check the story, facts, text and sound. It's a first draft, not a final cut.
Scaffold a project without an agent. The video is index.html with data-start, data-duration and data-track-index attributes; animation comes from GSAP, CSS, Lottie, Three.js, Anime.js or WAAPI.
npx hyperframes init my-video
cd my-video
npx hyperframes preview
npx hyperframes renderlint checks project structure; check opens it in a browser and looks for runtime, layout, motion, media and contrast problems. npx hyperframes doctor checks your environment.
npx hyperframes lint
npx hyperframes check
npx hyperframes render --output final.mp4WebM for transparent web overlays, MOV for a ProRes 4444 editing file, GIF, PNG sequence or HLS. Use --fps 60 only when you need it.
npx hyperframes render --format webm --output overlay.webm
npx hyperframes render --format mov --output master.mov
npx hyperframes render --quality draft --output review.mp4Useful in CI, where Chrome, FFmpeg and fonts must match every time.
npx hyperframes render --docker --output final.mp4Installs exactly the core set from main (non-interactive) and checks freshness. Add one workflow with npx hyperframes skills update pr-to-video.
npx hyperframes skills update
npx hyperframes skills checkcopilot plugin marketplace add heygen-com/hyperframes
copilot plugin install hyperframes@hyperframes
gemini extensions install https://github.com/heygen-com/hyperframes --auto-updateDrop catalog blocks (charts, overlays, transitions, titles) into a project, then edit them in place.
npx hyperframes add data-chart
npx hyperframes add logo-outroOnly for HeyGen voice and music, cloud rendering, hosted MCP or publishing. Signed out, voice can fall back to Kokoro and music to MusicGen.
npx hyperframes auth login
npx hyperframes auth status/plugin → Marketplaces, or run claude plugin update hyperframes@hyperframes.npx skills add reads the skills.sh registry, which can lag main by hours. npx hyperframes skills update installs from main.HTTPS_PROXY.An open-source framework that turns HTML, CSS, media and seekable animations into deterministic MP4 videos. Your coding agent writes the video as a web page with timing attributes; HyperFrames previews it in the browser and renders it frame by frame with headless Chrome and FFmpeg. Use it from the CLI or through agent skills.
Yes. heygen-com/hyperframes is Apache 2.0-licensed, with no per-render fees or commercial-use thresholds. Local rendering doesn't use HeyGen credits. Your coding agent and any optional hosted voice, avatar or media services have their own costs.
You need Node.js 22+ and FFmpeg. In Claude Code run "claude plugin marketplace add heygen-com/hyperframes" and then "claude plugin install hyperframes@hyperframes". For other agents with skills, run "npx skills add heygen-com/hyperframes" and pick Core Skills.
Yes. The README lists Claude Code, Codex, Cursor, Gemini CLI and IBM Bob, and the plugin guide adds GitHub Copilot CLI, VS Code and OpenCode.
No, not to make and render videos on your computer. Sign in with "npx hyperframes auth login" only for HeyGen voice and music, cloud rendering, the hosted MCP connector or publishing a project.
The question people ask most on X. Both render video with headless Chrome and FFmpeg. HyperFrames uses plain HTML with no build step and is Apache 2.0. Remotion uses React components, has a source-available license and a more mature cloud renderer (per the HyperFrames README comparison).
Studio is the browser editor in the HyperFrames stack, which the README marks "Available, evolving". The "Reference Any Video" and brand kit features announced on X on Oct 15, 2026 are Studio features. Some hosted features use your HeyGen account.
We feature the GitHub repo most talked about on X that week in AI and vibe coding, counted by distinct authors and engagement, and cross-checked against GitHub Trending. Stats come from the GitHub API and are dated. HyperFrames was checked 2026-10-19.
Every pick stays here with its own page. Newest on top.
A free tool that lets your AI coding agent make real videos by writing a web page.
A free tool that lets your AI coding agent take apart any app to see how it works.
What changed in AI coding plans: prices, limits, resets. Email signups open soon. Until then, updates go out on X.