Skip to main content
HyperFrames is free and open-source, and local rendering does not use HeyGen credits. Your coding agent and any optional hosted, voice, avatar, or generated-media services may have their own costs.

The short way: hand it to your agent

If you already have a coding agent open in a folder, paste this and skip the rest of the page. It installs the skills, makes the video, and opens the preview — you only change the URL.
Swap https://example.com for the page you want the video to show. Everything below is the same thing done by hand, if you would rather see each step.

1. Install the skills

Run this in your project folder:
Choose Core Skills in the picker. Keep --full-depth so the installer uses the current repository version. Then open or restart your coding agent in that folder.

2. Ask for the video

Replace https://example.com with the real page you want the video to show. The agent will propose a direction and ask for anything important that is missing. You do not need to write a production specification.

3. Continue from the first version

The agent leaves you with an editable project folder and opens its local preview. To reopen that preview later, run npx hyperframes preview inside the project folder. Watch the first version once and check the story, facts, readable text, and sound; it is not a guaranteed final cut. All three paths below work with the same project.

Choose a specific workflow

Product launch, explainer, captions, recut, pull request, music, motion graphic, or presentation.

Go further

Direct the agent, edit in Studio, build richer projects, and finish with confidence.