HyperFrames makes video from HTML, the code behind a web page. I use it for graphics in our videos. Start with one short graphic, preview it, and fix what looks wrong. It is code, so I do not expect one prompt to nail the finished cut.
Start here: paste this into Claude Code
I run a roofing company and am not technical. Help me install the official heygen-com/hyperframes Claude Code plugin in an empty project folder, using the verified commands below. Then help me create a short vertical animation showing a fictional roofing lead moving from a form to a booked appointment. Label it DEMO, use no customer data, and do not imply the graphic proves actual results. Ask me about the look and duration, inspect the project requirements, preview the first version, check for clipped text, and export a local MP4. Use original code-drawn graphics, no paid generated media or narration. Go one step at a time and wait for me. Explain technical words when you first use them. Ask about my business rather than guessing. Stop before spending money, publishing, contacting a customer or deleting anything. Use fictional examples for tests and never put credentials or customer details in a skill.Install the official plugin
In your terminal, run the two official repository commands below. The first adds the plugin catalog, and the second installs HyperFrames from that catalog. Follow any restart instruction the CLI gives you. Use the plugin in a fresh project folder.
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframesDescribe the graphic
/hyperframes Make a short 9:16 motion graphic for a roofing company: a fictional lead moves from FORM to FOLLOW-UP to BOOKED APPOINTMENT. Put DEMO on screen. Blue background, large readable white text, restrained motion. No private data, no narration and no paid generated media. Ask me for the duration and any missing creative choices. Preview it before the final export.The plugin may ask a few questions and save a brief before building. Answer those first. The graphic explains a process; it does not show a real appointment or connect your form.
Preview, fix and export
Preview the animation and inspect the start, every text change, and the ending. Check that each label is fully visible on a phone and that the lead reaches the booked appointment. Tell me what changed after each fix. Run the project checks required by the installed HyperFrames workflow, then export an MP4 and show me its actual local path. Do not post or upload it.A usable test opens as a video, keeps its labels inside the frame and shows the whole process. Watch the moving export too: still frames can hide a jump or a disappearing arrow. Keep the project folder so you can edit the graphic later.
What it costs
| Part | Cost and limit |
|---|---|
| HyperFrames | Open-source under Apache-2.0 in the official repository; no HyperFrames software purchase is needed for this local test. |
| Claude Code | Included with supported paid plans; Pro is $20 billed monthly as checked October 29, 2026. Usage limits apply; API billing is separate. |
| Optional assets | Generated video, voices, stock media or other services can have separate charges. This starter test asks for code-drawn graphics and no paid media. |
| Publishing | Not part of this test. Hosting or social posting tools are separate. |
When it breaks
The plugin command is missing
The first version looks wrong
The render fails on the computer
The export is not where you expected
Claude hits its limit
Now you have a setup you can test on your own work. Want help setting this up? Receipts Group builds these systems.
Checked on Oct 29, 2026 against
Every claim about a third-party tool in this guide (plans, prices, menu paths, commands, limits) was checked against these official pages on Oct 29, 2026. These screens change often: if something looks different, trust the page over this guide.
- Official HyperFrames repositoryInstallation commands, HTML-to-video workflow and Apache-2.0 license.
- Claude pricingClaude Code availability, plan price and usage limits.
