Before you begin

  • Claude Code already installed and working on your computer.
  • Node.js 22 or newer, npm, and FFmpeg for local rendering.
  • A dedicated folder for the video project.

These instructions follow the linked official documentation. They are not a claim of testing every operating system or agent version. Check your installed version if the interface differs.

1. Check the tools in your terminal

HyperFrames gives Claude Code a video workflow: editable project files, a preview, and a renderer. You can begin with a title card made from text and shapes, then add your own images or footage after the basic workflow works.

Run these checks in the terminal you use for Claude Code. Node should report version 22 or later. If a command is missing, finish installing that tool before asking Claude to debug the video itself.

Terminal · check prerequisites
node --version
npm --version
ffmpeg -version

2. Install the Claude Code plugin

Use HyperFrames' GitHub marketplace to install the versioned plugin. The final command lets you inspect the installation; look for the HyperFrames router and its video workflows. Then start a new Claude Code session in your video folder, or run /reload-plugins inside an existing session.

Terminal · official plugin installation
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes
claude plugin details hyperframes

3. Give Claude a small, complete brief

The Claude plugin uses /hyperframes:hyperframes. The shorter /hyperframes name is the standalone skill entry point. For this plugin walkthrough, use the namespaced form below.

A useful first brief fixes the words, canvas, duration, and ending. That gives you something specific to review. This example is deliberately self-contained; replace the copy when you are ready to make a video for your own project.

Prompt · paste into Claude Code
Using /hyperframes:hyperframes, create an 8-second title card in this folder.

Canvas: 1920 × 1080, 30 fps.
Copy: "Small ideas. Clear stories."
Look: warm white background, dark text, one orange accent.
0–3 seconds: introduce "Small ideas."
3–6 seconds: reveal "Clear stories." beneath it.
6–8 seconds: hold the finished layout so both lines can be read.

Use text and simple shapes. Keep it silent. Show me a short outline, then build after I approve it. Use the plugin’s bundled HyperFrames tools, check the project, and open the local preview.

4. Change one visible thing at a time

Watch the full preview before revising. Then stop at the moment that needs work. Give Claude the timestamp, the element, and the change you want. A note such as 'make it more polished' leaves the important decisions unspecified.

For the example above, check whether the second line arrives too soon, whether both lines fit comfortably, and whether the final hold gives you enough reading time. When a revision works, keep that decision fixed while adjusting the next one.

Prompt · a focused revision
At 3 seconds, "Clear stories." feels abrupt. Give that line a gentler entrance and finish the movement by 4.5 seconds. Keep the wording, colors, first line, and 8-second duration. Reopen the preview after checking the edit.

5. Check the project and export

Once the preview communicates what you intended, ask Claude to validate and render through the plugin's bundled launcher. This keeps the task on the plugin's selected CLI version. A successful structural check does not replace watching the finished file.

Keep the editable project as well as the MP4. The source is what lets you change the headline, timing, or colors later without starting from a flattened video.

Prompt · final export
Use the bundled HyperFrames launcher to run lint and check on this project. Fix reported problems that affect this video. Render a standard-quality MP4 named title-card.mp4. Tell me the exact output path and any unresolved warnings. Keep the editable project files.
  • Open the exported MP4 and watch from the first frame to the end.
  • Check the spelling, text edges, entrance timing, and final hold.
  • Confirm the delivered file is the latest revision before sharing it.

6. Keep plugin updates in Claude Code

Update this installation through Claude's plugin manager, then reload the plugins. For automatic updates, open /plugin in Claude Code's terminal interface, choose Marketplaces, select hyperframes, and enable auto-update.

Keep one installation method for this agent. The standalone skills update command is for standalone installations; it should not be part of a plugin workflow.

Terminal · manual plugin update
claude plugin update hyperframes@hyperframes

If the first attempt gets stuck

Ask Claude to identify the failing stage before changing the project: installation, skill discovery, preview, or rendering. Copy the actual error into the conversation so it can investigate the relevant problem.

  • Router missing: inspect claude plugin details hyperframes, then start a fresh session or reload plugins.
  • Unexpected workflow: check whether an older standalone HyperFrames skill is also loaded. Follow the official migration guide before removing anything.
  • FFmpeg missing: confirm ffmpeg -version works in the same terminal environment, then ask Claude to rerun the environment diagnostic.
  • Preview and export differ: name the timestamp and element, and ask Claude to compare that frame in both outputs.

Official sources

HyperFrames evolves quickly. Use these references for current commands and details.

KEEP LEARNING

Make your first HyperFrames video

Something unclear? Tell us where you got stuck.