How do I get started with HyperFrames?

Updated

HyperFrames is a tool that lets AI agents compose videos by writing HTML, CSS, and JavaScript instead of editing on a timeline. To get started, open a terminal and run the command shown on the site: npx skills add heygen-com/hyperframes --full-depth. That command adds the HyperFrames skill to your environment so an AI agent can begin composing video from code. The project originated with HeyGen, is built for the community, and is open source under Apache 2.0.

What HyperFrames does

The core idea is that video composition happens through code an AI agent writes, not through manual dragging and trimming. The site's heading puts it directly: "Let AI agents compose videos by writing code."

That means the workflow centers on:

  • HTML, CSS, and JS as the medium for building frames and motion
  • An AI agent as the author that writes and iterates on that code
  • A skill installation step that connects the agent to HyperFrames

If you have worked with web technologies, the output format is familiar territory. The difference is that the agent, not you, produces the code.

Getting started step by step

1. Confirm your prerequisites

You need a terminal environment where npx is available, which comes with a Node.js installation. You also need an AI agent setup that can consume an added skill. The site does not list further requirements, so treat those as the baseline.

2. Run the install command

npx skills add heygen-com/hyperframes --full-depth
  • Input: the command above, run in your terminal
  • Action: npx fetches and runs the skills installer, which adds the heygen-com/hyperframes skill with the --full-depth option
  • Expected result: the HyperFrames skill is registered in your environment, ready for an AI agent to use

3. Verify the skill was added

After the command finishes, check that the skill appears in your agent's available skills. The exact location depends on your agent tooling, which the site does not specify. If the skill is listed, the installation succeeded.

4. Start composing

Once the skill is available, prompt your AI agent to compose a video. The agent writes the HTML, CSS, and JS that HyperFrames turns into video output.

Common snags

  • npx not found: Node.js is missing or not on your PATH. Install Node.js first.
  • Command runs but no skill appears: confirm you copied the full command including --full-depth, and check which directory or profile your agent reads skills from.
  • Agent does not recognize HyperFrames: the skill may be installed in a different environment than the one your agent uses.

Where to go next

The site's "Get started →" link is the canonical entry point, and the install command above is the concrete first action. Because HyperFrames is open source under Apache 2.0, you can also inspect the repository behind heygen-com/hyperframes to understand what the skill does before or after installing it.