Works with

Hyperframes with Claude: make and review HTML videos

Hyperframes turns plain HTML into video, and Claude writes HTML well. Your agent builds and renders the Hyperframes composition; FrameJam is where you watch each version and point at what to change.

Facts about other tools are from their official docs and websites, as of Oct 2026. Each one links to its source, and all of them are listed under Sources.

What Hyperframes is

Hyperframes is an open-source framework from HeyGen for turning HTML, CSS, media and seekable animations into MP4 videos. Its tagline is "Write HTML. Render video. Built for agents." A video is an HTML page with data attributes for timing and tracks, animated with GSAP, CSS, Lottie, Three.js or similar libraries. The renderer seeks each frame in headless Chrome and encodes the result with FFmpeg, so the same input gives the same video. HeyGen's developer docs describe it as a framework "built for agents and developers", and the README says HeyGen uses it in production.

You preview with npx hyperframes preview and render with npx hyperframes render. It ships agent skills (npx skills add heygen-com/hyperframes) and a Claude Code plugin. The license is Apache 2.0.

How FrameJam fits around Hyperframes

FrameJam doesn't run Hyperframes. Your agent does, and FrameJam reviews what it renders:

The agent writes the composition, runs npx hyperframes lint to catch errors, and renders a new file per version (renders/v1.mp4, v2.mp4…).
It opens the render in FrameJam, in the agent app's browser next to the chat.
You click a graphic and write "remove this", drag across a range, or leave a note on the whole video, then press Finish review.
The agent gets each comment with its time and a frame image with your pin drawn on it, finds that element in the HTML, and renders the next version.

Each of FrameJam's 30 styles ships its example video as a Hyperframes project. The agent reads it for techniques, like a texture or a title reveal, and builds your own subject in that look. Want to agree on the shots first? Ask for a storyboard: Hyperframes can snapshot stills from a rough composition for you to comment on before anything is animated.

A Hyperframes tutorial with Claude

Install FrameJam in Claude, open an empty folder, and on the first run let the agent check your setup with npx hyperframes doctor (Node, ffmpeg and Chrome). Then ask:

Make a 15-second launch teaser for my app with the FrameJam playbook "Launch Teaser". Build it in Hyperframes, render to renders/v1.mp4 and open it in FrameJam for review.

Leave comments on v1, finish the review, and compare v2 with the version switcher. The Claude video guide shows the same loop on a real recording, and the guide to making videos with Claude shows Hyperframes videos built from scratch. Choosing between frameworks? Read Remotion vs Hyperframes.

Playbooks that work with Hyperframes

A playbook is FrameJam's method for one kind of video. Your agent follows it in whichever tool the project uses.

make a SaaS launch video with AIProduct Launch: Your product goes in, a polished launch video with the real app on screen comes out.
make a 15-second launch teaser video with AILaunch Teaser: A name, one promise and a few real clips go in, a 15-second teaser that lands the name on the beat comes out.
make a motion design showreel with AIMotion Design Showreel: Give it your logo and a few things to show off, get a short motion piece cut to the beat.
make a narrated explainer video with AIExplainer: A topic, article or script goes in, a narrated animated explainer comes out.
edit shorts with AI, with layouts that switch as you talkDynamic Layout Short: A raw talking-head recording goes in, a vertical short that switches layout with what you say comes out.
make a cartoon music video with AISlopcore Cartoon: A song about a scene's memes goes in, a cartoon music video that explains every joke comes out, for a few dollars.

Questions

Is FrameJam a Hyperframes tool?

No. FrameJam reviews videos from any tool: Hyperframes, Remotion, Motion Canvas, ffmpeg or a screen recording. Hyperframes is the default when a new project doesn't name a tool, and an existing project keeps whatever it already uses.

Do I need the Hyperframes skills as well?

They help. Hyperframes' own skills teach the agent how to write compositions; FrameJam adds styles, playbooks and the review loop on the render. Install both.

What does Hyperframes cost?

Nothing. As of Oct 2026 its README says it is Apache 2.0, with no per-render fees or commercial-use thresholds. FrameJam is free and MIT-licensed.

Why not just use the Hyperframes preview?

Use it while building. FrameJam plays the rendered mp4, so you review exactly what was rendered, and every comment reaches the agent with its timestamp and a frame image with your pin on it.

Does it work outside Claude?

Yes. The FrameJam plugin works the same in ChatGPT (Work or Codex in the desktop app) and Cursor.

Guides

How to edit videos with ClaudeEdit and make videos in Claude with FrameJam: cut a raw recording, add animations, then point at the exact frames to change. With a full video walkthrough.
How to make videos with ClaudeClaude motion graphics step by step: the tools (HyperFrames, Remotion, Manim), prompting with references, storyboards and a feedback loop. With the full video.
All guides to making videos with your AI agent

Sources

Checked on October 14, 2026. Prices and features change; the linked pages are current.

FrameJam is free, local and open source. Install it in Claude, ChatGPT or Cursor, and read how the review page works.