Reading the repo
Reading the repo
Assembly instructions
Write HTML. Render video. Built for agents.
Saved setup from 5 h ago
Will it work on macOS?
docs/quickstart.mdximport { QuickstartContinuationGrid } from "/snippets/quickstart-continuation-grid.jsx"; import { DocsVideo } from "/snippets/docs-video.jsx";
HyperFrames turns one sentence into a video you can keep editing. Start in the Studio app; if you already work with an AI agent in a terminal, or your computer can't run the app, use one of the other two ways. All three make the same kind of project.
<DocsVideo title="A first video in the Studio app: one request, a few questions, a storyboard, the finished film" src="https://static.heygen.ai/hyperframes-oss/docs/studio-demos/first-video-demo-v2.mp4" poster="/public/images/studio-app/first-video-demo-v2.jpg" aspect="16 / 10" autoPlay loop />
<Card title="Download the HyperFrames Studio app" icon="download" href="https://hyperframes.studio/studio/download?src=docs-quickstart-top"> Free for Mac, Windows and Linux. The link picks the right file for your computer. </Card>The easiest way: the app runs your agent beside a live preview, and you change the video by typing, pointing or drawing. For Mac (Apple Silicon or Intel), Windows (including Windows on Arm) and Linux.
<Steps> <Step title="Download and install"> <a href="https://hyperframes.studio/studio/download?src=docs-quickstart">Download the Studio app</a>, open it, and sign in with a free HeyGen account. [Install the Studio app](/studio-app) has the steps for each system. </Step> <Step title="Ask for the video"> Type what you want in **Make something** and send it. Framey asks a few questions, shows a storyboard, then builds the film. </Step> <Step title="Change it"> Ask for changes in the chat, or point at the picture. [Make your first video in the app](/studio-app/first-video) walks through it. </Step> </Steps> <Card title="Practice it: The brief" icon="graduation-cap" href="https://hyperframes.heygen.com/lessons/the-brief"> Free 20-minute lesson with a short video, a quiz and a brief to try. A brief is the goal, who it is for, two to four specifics and the exact words in quotes. </Card>For Claude Code, Codex, Cursor, Copilot, Gemini CLI or any agent that works in a folder on your computer, on any system.
Unless the HyperFrames plugin is installed, install the skills once from a terminal in your project folder, then open or restart your coding agent there:
npx hyperframes skills update
Paste this into the agent. It makes the video and opens the preview. You only change the URL.
Set this folder up for HyperFrames and make me a video.
1. If the HyperFrames plugin is installed, use its bundled skills and launcher. If the HyperFrames skills are missing, stop and tell me: I install them with npx hyperframes skills update
2. Then, using /hyperframes, make a 10-second product intro for https://example.com
3. Open the local preview when it is done and tell me the project folder.
For Claude Code, Copilot, VS Code, Cursor, or Gemini CLI, start with the
[plugin installation guide](/guides/plugins). It includes update settings for each agent. Claude's plugin entry
skill is `/hyperframes:hyperframes`.
For standalone skills, run this in your project folder, choose **Core Skills** in the picker, then open or
restart your agent in that folder:
```bash
npx skills add heygen-com/hyperframes
```
Replace `https://example.com` with the page you want the video to show. For a longer film that tells a story, the
agent first offers three storylines to pick from.
<QuickstartContinuationGrid />
In Claude.ai or ChatGPT, the HyperFrames connector builds and renders the video in your HeyGen account. You give up the project folder and local rendering. Connect HyperFrames to an AI chat.
Then run bash setup.sh. It stops at the first error and is safe to run again. Servers and tests aren't started; it lists them at the end. Read it first.
Needs Git: xcode-select --install
git clone https://github.com/heygen-com/hyperframes.git cd hyperframes
Node.js 22, Bun
# needs nvm: brew install nvm (or https://github.com/nvm-sh/nvm) nvm install 22 curl -fsSL https://bun.sh/install | bash
cp .env.example .env
bun install
bun run dev
bun run test
For Claude Code, install the versioned plugin:
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes
To enable auto-update for the hyperframes marketplace, run claude in a
terminal in your project. In Claude Code's terminal UI, run /plugin, then select
Marketplaces → hyperframes → Enable auto-update. Afterward, use
/hyperframes:hyperframes. See the plugin guide
for Copilot, VS Code, Cursor, Gemini CLI, updates, and migration.
For standalone skills (including OpenCode), use:
npx skills add heygen-com/hyperframes
The picker opens with nothing pre-selected — the Core Skills group is all you need;
/slideshow,/remotion-to-hyperframesand/figmainstall on demand. Without the picker (a script or a CI job),npx hyperframes skills updateinstalls exactly the core set, whereasskills add --allinstalls all 9 published skills. The six repo-internal skills under.claude/skills/.agents/skillsare excluded by default. For the full published set usenpx hyperframes skills.
skills addresolves the skills.sh registry blob, which can lagmainby hours.npx hyperframes skills updateinstalls the skills from the release tag that matches your CLI version, so they match the CLI that runs them.
Run project-local installs from your video project's directory. From a HyperFrames
checkout, use npx hyperframes skills update for a global install instead: a
project-local installer target can overlap the tracked skills/ source and
overwrite uncommitted edits. See contributor setup.
Try a prompt like:
Using
/hyperframes, create a 10-second product intro with a fade-in title, a background video, and subtle background music.
The skills teach agents the HyperFrames production loop: plan the video, write valid HTML, wire seekable animations, add media, lint, preview, and render. They work with Claude Code, Codex, Cursor, Gemini CLI, IBM Bob, and other coding agents that support skills.
No reports for macOS yet.
Opens a chat with this manual already filled in, for macOS. It uses your own account; gitmanual sends nothing.