HyperFrames Studio: Free Video Editor Lets Claude Code Build Branded Promos

HeyGen’s free desktop app HyperFrames Studio hands the work of making a promo video to an AI coding agent, a tool that reads and writes code on its own to complete a task. You pick four storyboard scenes, paste in your website address, and Claude Code writes the HTML and CSS that become a branded launch video, with no manual editing. Changes are made by drawing on the preview or typing a request. For many beginners, the most confusing part is not the editing but the file management: where projects are stored and how to make a folder of your own count as a project.

Video built from web code

HyperFrames Studio sits on top of HyperFrames, an open-source framework from the AI video platform HeyGen. The project is published on GitHub under the Apache-2.0 license, and its repository badges show 62.7k stars, 96 contributors and 811.6k weekly downloads on npm, the package registry for JavaScript tools.

Like Remotion, HyperFrames creates video programmatically, meaning through code. The difference is the building material. Remotion assembles videos from React components, while HyperFrames uses standard HTML, CSS and web animation libraries. AI coding agents such as Claude Code and OpenAI Codex write and adjust that code directly inside each project. Because the finished video exists as HTML, CSS and JSON files, a change requested in plain language can be applied precisely and repeated the same way.

HyperFrames Studio is the editor built around that framework so that AI coding agents and people can work on the same video. It runs as a desktop app on macOS (Apple Silicon and Intel), Windows (x64 and arm64) and Linux (deb and AppImage packages). The app is completely free and needs only a free HeyGen account. A HeyGen API key is optional. You need one only for premium HeyGen cloud features such as avatars, voiceovers and voice clones, and those features use billable API credits.

Setup: the app plus agent skills

Installing the app alone is not enough. Coding agents also need the HyperFrames skills, packaged instructions that teach an agent how to carry out a specific kind of task. Install them from the terminal before you open HyperFrames Studio. On a Mac, the steps look like this:

1. Download the installer for your operating system from the HyperFrames Studio download page and install it. The macOS version comes as a DMG disk image.
2. In Terminal, run npx skills add heygen-com/hyperframes to start the interactive setup, which pulls the skills from the project’s GitHub repository.
3. Choose the core HyperFrames skills category, press the spacebar to select every core skill, and press Return to confirm.
4. Pick the agents that should receive the skills. The list includes Claude Code, Cursor, Codex, Gemini CLI, GitHub Copilot, Kilo Code, OpenCode and Zed. Choose the recommended symlink method, which links each agent to a single copy of the skills, so future updates to the skills repository reach every agent automatically.
5. Confirm the security assessment and let the installation finish.
6. Start Claude Code with the claude command and type /hyp. If the HyperFrames skills appear in the autocomplete menu, the connection works.

On first launch, the app asks about your role and preferred coding agent; Skip all bypasses the questions. Next, sign in with a free HeyGen account in the browser, for example with a Google account, and you return to the desktop app. The gear icon in the lower-left corner opens Settings. Three tabs matter most at the start:

Four scenes and a URL make a launch video

The Sessions panel in the left sidebar scans your drive for existing HyperFrames project folders, and Import projects brings any of them into the app with one click. To start something new, click Make my launch video, or choose Take the step by step in the Get inspired template section.

HyperFrames Studio structures a launch promo as a four-part story, with a library of ready-made templates for each part:

You can pick a hook yourself or click the dice icon for a random one. For a weekly AI newsletter, one workable combination is a hand-drawn box creature as the hook, a clean conversational card as the proof, a matching minimalist transition, and a simple outro with a logo mark, a headline and a button.

Next, type a URL into the box labeled Your website or idea. The app reads that page and pulls in its color scheme, fonts, copy and brand assets to style the templates. Pointing it at your homepage or newsletter archive saves you from writing out design guidelines by hand. After scrubbing through the sequence in the built-in mini-player, click Use this cut to create a new project folder and open the editor timeline.

From there, Claude Code takes over in the background, running on the Claude Opus 5.5 model. It reads the project references, writes the HTML and CSS, and fills the timeline tracks, while the inspector panel in the upper right lists the imported assets and compositions as they arrive. In this example, the build took 15 minutes and 37 seconds, roughly twice as long as earlier test runs of about seven minutes, so build times appear to vary from one job to the next.

The finished cut moved from scrolling strips of AI headlines to an envelope icon with a notification badge, cards for the issue’s sections and an archive grid of past issue numbers, ending on a branded call to subscribe. For a prompt, meaning the instructions given to an AI, with no detailed micro-direction, the result appears impressively polished.

▲ Four-stage structure of a launch promo

Revise by drawing, commenting or typing

When part of the video needs to change, you can point at it directly on the preview:

• Draw: Click the pencil icon and sketch over any frame. Circle a content card and attach a note such as “make this bigger” so the agent knows exactly which element to change.
• Comment: Pin comment markers anywhere on the canvas or the timeline to flag changes.
• Select: Click individual elements or bounding boxes to target one asset for revision.
• Type: Skip the canvas tools and write the change in plain language in the Claude Code prompt box.

Sound works the same way. Typing @ or clicking the + button in the prompt box opens the HyperFrames template and asset library, and Framey can search for short clips or assets that match a description. A sound design request works best when it is specific:

• A soft acoustic guitar or felt-piano music bed with a happy, positive feel
• No voiceover and no vocals
• A gentle tick each time an issue card or track number lands on screen
• Music from the free built-in library rather than licensed audio bought from HeyGen

Claude Code handled that request in under a minute, generating the music bed and sharp mechanical clicks and placing them on the timeline in sync with the card transitions. If some clicks feel redundant, mute or delete individual audio layers or clips. To avoid commercial licensing fees, say explicitly that the music must come from the free library.

Export and a vertical version

The Export button in the upper right opens the render settings:

Renders are saved locally and open in Finder or any media player.

A vertical version for mobile platforms does not require a new project. Duplicate the project from the sidebar menu, rename the copy, and ask Claude to convert it to a 9:16 aspect ratio. The agent reworks the existing layout and animation settings for a vertical screen, so one storyboard yields both a 16:9 widescreen cut and a 9:16 vertical cut.

Where projects are stored

By default, every project created in the desktop app lives in a hidden folder called .hyperframes-studio inside your home folder. Because its name starts with a dot, it does not show up in a normal Finder window on a Mac. To reach it, open the three-dots menu next to a project name in the sidebar and choose Reveal in Finder.

Each project folder holds the following files:

Turning your own folder into a project

You may prefer to keep projects somewhere easier to find, such as a dedicated folder on your desktop. Dragging an empty folder into HyperFrames Studio, however, only produces an error saying the folder is not recognized as a HyperFrames project. A valid project needs an index.html file plus at least one configuration file: hyperframes.json, project.json or meta.json. Copying an existing project folder into the new location works as a quick workaround, but the official route, explained under What counts as a project? in the app, is to set the folder up from the command line:

1. In Finder, right-click the folder, open Services, and choose New Terminal at Folder.
2. Run npx hyperframes init. When it asks to install the required packages, type y and press Return.
3. Enter a project name and choose a starter template. The nine options are Blank, Decision Tree, Kinetic Type, NYT Graph, Play Mode, Product Promo, Shaders, Vignelli and Warm Grain.
4. With Blank selected, the tool generates AGENTS.md, CLAUDE.md, hyperframes.json, index.html, meta.json and package.json, then opens a web editor in your browser on localhost, an address served from your own computer.
5. Click the green Edit with Framey button in the upper-right corner of that browser page. The project opens in the HyperFrames Studio desktop app, fully recognized and ready for Claude Code prompts.

The error message for an empty folder does not tell a newcomer how to start a project from the app itself, so it pays to know the init command before you need it.

▲ Linking a project folder to the desktop app

What to do next

HyperFrames Studio appears to shift the hard part of making a promo from editing skill to deciding what the video should say. The templates handle the structure, your website supplies the look, and Claude Code does the building and revising. Only premium HeyGen features such as avatars and voice clones cost money. To try it:

1. Install the core HyperFrames skills with the symlink option before opening the app, then confirm they appear when you type /hyp in Claude Code.
2. Sign in with a free HeyGen account, choose a hook, proof, turn and call to action, and paste your homepage or newsletter URL.
3. Mark changes with the Draw, Comment and Select tools, and tell the agent to use free library music.
4. Export in 1080p or 4K, then duplicate the project and ask for a 9:16 version for mobile.
5. To keep projects in your own folder, run npx hyperframes init there instead of dragging in an empty folder.