Guide · Agent skill

How to use the HyperFrames video renderer agent skill

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

The hyperframes skill teaches your agent to write a self-contained HTML page with animation and render it into an MP4 video using the render_video tool. It suits animated charts, KPI dashboards, quote cards, kinetic text and short branded social clips built from your data or text. This guide explains what the skill does, how to install it, how to ask for videos in plain language, and what it needs to run.

HyperFrames Video Rendererspinabot/brigade · MIT Download the skill

Quick start

1Check Node and FFmpeg. Confirm you have Node 22 or newer and FFmpeg available on your PATH.
2Install the render engine. Run npm i @hyperframes/producer so the render_video tool is enabled.
3Add the skill. Download the ZIP from this page and unzip it into ~/.claude/skills/ or a project's .claude/skills/ folder, or upload it under Settings, Capabilities, Skills in the Claude apps.
4Ask for a video. Describe the video, its format and the data or text it should show, using a plain request.
5Wait for the render. Let the agent call render_video. The first render downloads Chromium, and renders can take a minute or more.
6Receive the MP4. The agent returns the saved file via send_media. Ask for changes and it will rewrite the HTML and re-render.

What the hyperframes skill makes your agent do

An agent skill is a folder of instructions and optional scripts that an AI agent loads when a task matches the skill's description. This one, named hyperframes, is for making video from programmatic sources: data, text, or a layout you describe.

The agent writes an HTML composition, which is a single page that defines the scenes and motion. The render_video tool then turns that page into a pixel-exact MP4. A headless Chrome steps a GSAP master timeline frame by frame, captures one image per frame, and FFmpeg encodes the frames, so the same HTML always produces the same video.

Animated bar, line and donut charts
KPI dashboards and 'N facts about X' explainers
Quote and announcement cards, kinetic typography, countdowns
Before/after reveals, branded intros and outros, vertical social clips

Install the hyperframes skill

Download the skill ZIP from this page. Then add it to your agent in one of two ways.

For Claude Code, unzip the folder into ~/.claude/skills/ to make it available everywhere, or into a project's .claude/skills/ folder to limit it to that project. In the Claude apps, open Settings, go to Capabilities, and upload the skill under Skills.

The skill is published as an npm package, so the render engine must also be installed. The skill's metadata lists the install step as @hyperframes/producer. The skill's requirements section gives the npm command below.

npm i @hyperframes/producer

Install the requirements: Node 22+, FFmpeg and the render engine

You need Node 22 or newer, the @hyperframes/producer render engine, and FFmpeg available on your PATH. The engine is an optional dependency, and installing it is what enables video rendering. A headless Chromium is downloaded automatically by the engine on the first render, which requires network access once.

FFmpeg can be installed with the package manager for your system, as listed in the skill source.

Node 22+ is required
@hyperframes/producer is the render engine (optional, but needed for render_video)
FFmpeg must be on PATH, or set FFMPEG_PATH to its location
Headless Chromium is auto-downloaded on first render

brew install ffmpeg
winget install ffmpeg
apt install ffmpeg

How to trigger the skill with natural requests

You do not need special syntax. Ask for a video in plain words that name the output and the source material. The skill is meant for requests to make, render, animate or produce a video from data, text or a layout.

Be specific about the subject, the format and the data. For example, say whether you want vertical, landscape or square, and which numbers or quotes should appear. If you want photorealistic or AI-generated footage, ask for that instead, because it is a different tool.

Make a 15-second vertical animated bar chart of our Q3 signups by region from this table.
Render a square quote card with this quote, our brand colours and a fade-in.
Animate a donut chart showing these four budget splits and export it as an MP4.
Create a 1920x1080 kinetic-type intro that says 'Welcome to Acme' in our accent colour.

How the composition and render work

The agent builds one HTML document with a paused GSAP timeline registered under a composition ID. The video's total length is the timeline's duration, so you do not set duration as an attribute on the root element. Visible elements carry timing data attributes and a clip class.

The agent calls render_video with the HTML, and can pass an optional output name and a lint option. The tool lints the page, renders it in a separate process, and returns the MP4 path. The agent then delivers the file with send_media. A real render can take a minute or more.

If something fails, the tool reports an error type. composition_invalid means the lint message needs fixing and a retry. render_failed includes a stderr excerpt, such as a bad timeline ID or missing GSAP. render_timeout means the composition is too heavy and should be simplified or shortened. render_unavailable means the engine or FFmpeg is not installed.

Vertical 1080x1920 for TikTok, Reels and Shorts; 1920x1080 for landscape; 1080x1080 for square posts
Frame rate is set by the engine default; the tool has no fps flag
Keep text at least 64px from every edge on vertical video
Embed images and fonts as data URIs so nothing depends on external files

Safety notes: scripts, network and what gets downloaded

This skill runs scripts and uses the network. The render engine downloads headless Chromium the first time it renders, so the machine needs network access at that point. The example composition loads GSAP from a CDN, so the page itself references an external script unless you paste the minified GSAP source inline.

Optional environment variables let you point the skill at specific files: BRIGADE_HYPERFRAMES_PATH for the producer entry file, FFMPEG_PATH for FFmpeg, and BRIGADE_BROWSER_EXECUTABLE or PUPPETEER_EXECUTABLE_PATH for a Chromium binary. Review the HTML the agent writes and the installed packages if your environment has strict policies.

Runs scripts: yes
Uses network: yes (one-time Chromium download, and CDN GSAP if you use the example loader)
Optional overrides: BRIGADE_HYPERFRAMES_PATH, FFMPEG_PATH, BRIGADE_BROWSER_EXECUTABLE, PUPPETEER_EXECUTABLE_PATH

What people use it for

Marketers creating short vertical social clips or branded intros from text and brand details
Analysts turning a dataset into an animated bar, line or donut chart video
Creators producing quote cards or 'N facts about X' explainers
Teams making product teasers or announcement cards from a layout they describe

Frequently asked questions

How do I install the hyperframes skill?

Download the skill ZIP from this page and unzip it into ~/.claude/skills/ for all projects, or into a project's .claude/skills/ folder for one project. In the Claude apps, you can instead upload it under Settings, Capabilities, Skills. You also need to install the render engine with npm i @hyperframes/producer.

What does hyperframes require to run?

It requires Node 22 or newer, the @hyperframes/producer npm package, and FFmpeg on your PATH. A headless Chromium is downloaded automatically on the first render, so you need network access at least once.

Is the hyperframes skill free to use?

The skill is published under the MIT licence, as listed on this page. Check the licence file in the source repository for the full terms before you use it commercially.

Can hyperframes make AI-generated or photorealistic video?

No. It builds videos from HTML, so it suits data-driven motion graphics and text-based clips. For photoreal or AI-generated footage, the source points to a separate generate_video skill.

Why does my render fail or time out?

Read the error type the tool returns. composition_invalid means the HTML failed lint, so fix and retry. render_failed often means a bad timeline ID or missing GSAP. render_timeout means the composition is too heavy, so simplify it or shorten it. render_unavailable means the engine or FFmpeg is missing.

How does hyperframes compare with editing video in a normal editor?

Hyperframes builds a new video from scratch out of HTML, so it is not meant for quick edits to existing video files. It is better for repeatable, data-driven clips where the same HTML should always produce the same output.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use hyperframes if you need short, branded, data-driven videos such as animated charts, quote cards or vertical social clips, and you can install Node 22+ and FFmpeg. Pick a different tool if you need photorealistic or AI-generated footage, or if you mainly want to edit existing video files.

Download the skill