Agent skill

HyperFrames Video Compositions

by spinabot in spinabot/brigade

Writes HTML compositions with a GSAP timeline that the render_video tool turns into deterministic MP4 videos from data, text or layouts.

MITAuto-check passedMedia & Creative

Install HyperFrames Video Compositions

skills CLI
$ npx skills add spinabot/brigade --skill hyperframes -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install spinabot/brigade hyperframes --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/spinabot/brigade.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/hyperframes .claude/skills/hyperframes && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
hyperframes
GitHub stars
11k
Token cost
~1.6k tokens
SKILL.md length
546 words
Files
1
Skills in repo
11
Repo updated
First seen
Licence
MIT

At a glance

Writes HTML compositions with a GSAP timeline that the render_video tool turns into deterministic MP4 videos from data, text or layouts.

  • Works in 2 steps: A paused GSAP timeline registered to… → data-* attributes on the root and on…
  • Rendering an animated chart or KPI dashboard as a video
  • SKILL.md covers The composition contract (this…, GSAP + assets, Workflow and Design quality (make it look…, plus 1 more section
  • Calls npm; reaches cdn.jsdelivr.net

What it does

The `render_video` tool renders a self-contained HTML document into a pixel-exact MP4: headless Chrome steps a GSAP master timeline frame by frame, captures one image per frame, and FFmpeg encodes them, so the same HTML always yields the same video. The skill is for programmatic, data-driven videos such as animated charts, dashboards, explainers, quote cards, kinetic typography, countdowns and vertical social clips, and it sends photoreal or AI footage to `generate_video` instead.

Two things are mandatory: a paused GSAP timeline registered under `window.__timelines` with the composition's ID, whose duration sets the video length, and `data-*` attributes on the root and on every timed element, with a `clip` class on visible ones. Suggested sizes are 1080×1920 vertical, 1920×1080 landscape and 1080×1080 square, authored for 30fps. The composition must bring its own GSAP and embed assets as `data:` URIs, and motion must never depend on `Date.now()`, `Math.random()`, timers or hand-rolled animation loops.

When your agent uses it

  • Rendering an animated chart or KPI dashboard as a video
  • Making a kinetic typography or quote card clip
  • Producing a branded vertical short for social media from data or text

Example prompts

  • “Make a short vertical video of our monthly signups as an animated bar chart.”
  • “Render a quote card that fades the text in over a gradient background.”
  • “Build a countdown intro for the product launch as an MP4.”

Requirements

  • A host that provides the `render_video` tool
  • GSAP loaded inside the composition

Workflow steps

2 steps, taken from the first numbered list in SKILL.md.

  1. A paused GSAP timeline registered to window.__timelines[].
  2. data-* attributes on the root and on every timed element.

What it can do on your machine

Read from SKILL.md and the folder at commit 4c2a18f. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • cdn.jsdelivr.net

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

HyperFrames Video Compositions loads about 1.6k tokens when it runs. Until then it costs about 101 tokens; SKILL.md has 546 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~101
When it runs · the whole SKILL.md, loaded when a task matches
~1.6k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from spinabot/brigade at commit 4c2a18f, republished under its MIT licence (© spinabot). 546 words, ~1,641 tokens.

Download SKILL.mdSave it as .claude/skills/hyperframes/SKILL.md (or your agent's skills folder).
name
hyperframes
description
Author HTML compositions that the `render_video` tool turns into deterministic MP4 video — animated charts and dashboards, data explainers, text/quote cards, kinetic typography, product teasers, and branded short-form social clips. Use when the user asks Brigade to make, render, animate, or produce a video from data, text, or a layout (NOT photoreal/AI footage — that's `generate_video`).
homepage
https://github.com/heygen-com/hyperframes

hyperframes — HTML → deterministic MP4

The render_video tool renders an HTML composition you write into a pixel-exact MP4. A headless Chrome steps a GSAP master timeline frame by frame, captures one image per frame, and FFmpeg encodes them — so the same HTML always produces the same video. This is the right tool for anything programmatic and data-driven; reach for generate_video only when you need photoreal/AI-generated footage.

Great fits: animated bar/line/donut charts, KPI dashboards, "N facts about X" explainers, quote/announcement cards, kinetic typography, countdowns, before/after reveals, branded intros/outros, vertical social clips.

The composition contract (this is what makes or breaks a render)

Write ONE self-contained HTML document. Two things are mandatory and non-obvious:

  1. A paused GSAP timeline registered to window.__timelines[<composition-id>]. HyperFrames seeks this timeline to render each frame. Total video duration = tl.duration() — you do NOT set duration with an attribute.
  2. data-* attributes on the root and on every timed element.

Root composition element — required: data-composition-id (must match the window.__timelines key), data-width, data-height, data-start; plus data-track-index.

Timed children — data-start + data-track-index on every one; visible elements (<img>, text/graphic <div>s) also need class="clip"; <img> also takes data-duration. Do not put data-duration on the root/composition — its duration comes from the timeline.

html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- Load GSAP (see "GSAP + assets" below). -->
    <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
    <style>
      body { margin: 0; }
      .stage { width: 1080px; height: 1920px; position: relative; overflow: hidden;
               background: #0b0b12; color: #fff; font-family: system-ui, sans-serif; }
      .title { position: absolute; top: 220px; left: 80px; font-size: 96px;
               font-weight: 800; opacity: 0; transform: translateY(24px); }
    </style>
  </head>
  <body>
    <div class="stage"
         data-composition-id="promo"
         data-width="1080" data-height="1920"
         data-start="0" data-track-index="0">
      <div class="title clip" data-start="0" data-duration="4" data-track-index="0">
        Ship faster.
      </div>
    </div>
    <script>
      // A PAUSED timeline — HyperFrames drives playback by seeking it per frame.
      const tl = gsap.timeline({ paused: true });
      tl.to(".title", { opacity: 1, y: 0, duration: 0.7, ease: "power2.out" }, 0.4)
        .to(".title", { opacity: 0, duration: 0.5, ease: "power2.in" }, 3.5);
      // Register under the SAME id as data-composition-id. This is mandatory.
      window.__timelines = window.__timelines || {};
      window.__timelines["promo"] = tl;
    </script>
  </body>
</html>
  • Vertical 1080×1920 for TikTok/Reels/Shorts, 1920×1080 for landscape, 1080×1080 for square feed posts.
  • Frame rate is an engine default (the tool doesn't expose an fps flag) — author for smooth motion at 30fps.

GSAP + assets

The tool renders a single standalone index.html (no project scaffold), so the composition must bring its own GSAP and assets:

  • GSAP: load it via a <script src="…gsap.min.js"> (CDN as above) or paste the minified source inline. It must be defined before your timeline script runs.
  • Assets: embed images/fonts as data: URIs so nothing depends on external files.
  • Determinism: never drive motion from Date.now(), Math.random(), setTimeout, or a hand-rolled requestAnimationFrame loop — put all motion on the GSAP timeline. Off-timeline animation desyncs from the frame stepper.
Show full SKILL.md (232 more words)Show less

Workflow

  1. Write the composition to the contract above with real data/text (never lorem).
  2. Call render_video with { html, output_name?, lint? }. It lints, renders in an isolated subprocess (a real render legitimately takes a minute or more), and returns a saved MP4 as a MEDIA:<path> line.
  3. Deliver it with send_media({ path }).
  4. Handle failures by errorType:
    • composition_invalid — read the lint message, fix the HTML, retry.
    • render_failed — read the stderr excerpt (bad timeline id, missing GSAP, etc.).
    • render_timeout — the composition is too heavy; simplify or shorten it.
    • render_unavailable — the engine/FFmpeg isn't installed (see below).

Design quality (make it look intentional, not templated)

  • Pick a palette that fits the subject; commit to one accent and keep the rest quiet. Set a real type scale; give headings weight and letter-spacing.
  • Stagger reveals (offset each element's timeline position by 0.15–0.3s) so motion reads as choreographed, not simultaneous.
  • Keep text ≥64px from every edge on vertical video so platform UI never clips it.
  • Ease everything (power2.out in, power2.in out). Linear motion reads robotic.
  • For charts, animate the value (bar height, arc sweep, a counting number) on the timeline rather than swapping static frames.

Requirements & install

Needs Node 22+, the @hyperframes/producer engine (an optional dependency — install it to enable video), and FFmpeg on PATH. A headless Chromium is auto-downloaded by the engine on first render (needs network once).

bash
npm i @hyperframes/producer   # the render engine (optional; enables render_video)
# FFmpeg: brew install ffmpeg | winget install ffmpeg | apt install ffmpeg

Overrides: BRIGADE_HYPERFRAMES_PATH (explicit producer entry file), FFMPEG_PATH, BRIGADE_BROWSER_EXECUTABLE / PUPPETEER_EXECUTABLE_PATH.

© spinabot, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/hyperframes of spinabot/brigade.

Open the folder on GitHubat commit 4c2a18f

Compare with similar skills

HyperFrames Video Compositions next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

HyperFrames Video Compositions compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
HyperFrames Video Compositions this skillspinabot/brigade11k—~1.6kAutomated safety check: PassMIT
Motion Adfabricioctelles/skills105—~4.1kAutomated safety check: PassApache-2.0
Vid Sizzle ReelVarnan-Tech/opendirectory672—~3.9kAutomated safety check: PassMIT
HyperFrames Animationheygen-com/hyperframes58k3 repos~2.1kAutomated safety check: PassApache-2.0
Yuv Viral Videohoodini/ai-agents-skills282—~7.5kAutomated safety check: NotesNone
Bang Motionbangtutorial/bang-motion568—~9.7kAutomated safety check: PassMIT

Similar skills

  • Motion Ad

    fabricioctelles/skills

    Produce a short motion-graphics video ad — a 15s Facebook/Instagram/TikTok spot — as a rendered MP4.

    105 GitHub stars~4.1k tokensUpdated 3 days ago
    Media & CreativeAuto-check passed
  • Vid Sizzle Reel

    Varnan-Tech/opendirectory

    Generates a high-energy sizzle reel or hype video (MP4) from brand assets and key messages.

    672 GitHub stars~3.9k tokensUpdated 1 mo ago
    Media & CreativeAuto-check passed
  • HyperFrames Animation

    heygen-com/hyperframes

    Collects motion rules, scene blueprints, transitions and runtime adapters for HyperFrames video compositions, with GSAP as the default animation runtime.

    58k GitHub starsUsed in 3 repos~2.1k tokens
    Media & CreativeAuto-check passed
  • Yuv Viral Video

    hoodini/ai-agents-skills

    Edit any selfie or screen-share footage into a viral short-form video in YUV.AI's signature style — Apple-style liquid-glass cards (real CSS backdrop-filter), dark-mode polish, MrBeast-paced cuts…

    282 GitHub stars~7.5k tokensUpdated 2 mo ago
    Media & CreativeAuto-check: notes
  • Bang Motion

    bangtutorial/bang-motion

    Membangun motion graphic sinematik di browser (promo video, opener, intro, bumper, kinetic typography, explainer/video penjelasan bergambar 16:9 atau 9:16) memakai HTML + CSS + GSAP (+ Three.js bila…

    568 GitHub stars~9.7k tokensUpdated 22 days ago
    Media & CreativeAuto-check passed
  • Build a Vietnamese vertical TikTok explainer in the "MỔ XẺ PAPER AI" (AI paper dissection) format with HyperFrames (HTML/CSS/GSAP → MP4), Noti.vn style.

    126 GitHub stars~4.8k tokensUpdated 8 days ago
    Media & CreativeAuto-check passed

More from spinabot/brigade

All 11 skills in this repo
  • Canvas Display

    spinabot/brigade

    Shows HTML content such as games, dashboards, visualizations and demos on a connected Brigade node's canvas, using a local canvas host server and a node bridge.

    11k GitHub stars~1.4k tokensUpdated 4 days ago
    Auto-check passed
  • Word Document Builder

    spinabot/brigade

    Creates and edits Word documents along four paths of rising capability, from a quick tool to the docx library, an OOXML round-trip and pandoc, then verifies the file.

    11k GitHub stars~2.1k tokensUpdated 4 days ago
    Auto-check passed
  • Diagnoses why a Brigade companion app can't pair or connect, by first identifying the real node-to-gateway route and then fixing auth.

    11k GitHub stars~1.2k tokensUpdated 4 days ago
    Auto-check passed
  • OAuth Account Setup

    spinabot/brigade

    Connects an OAuth 2.0 account such as Gmail with the built-in oauth_authorize tool: an authorization link, automatic code capture and sealed token storage.

    11k GitHub stars~878 tokensUpdated 4 days ago
    Auto-check passed
  • Brigade PDF Toolkit

    spinabot/brigade

    Creates and edits PDFs in Brigade through four paths: a quick content tool, an edit tool for forms and merging, a pdf-lib script for full control, and HTML-to-PDF for styled layouts.

    11k GitHub stars~1.3k tokensUpdated 4 days ago
    Auto-check passed
  • Share Skills

    spinabot/brigade

    Explains how a skill folder should be laid out and bundled as a tar archive for sharing, with a checklist covering name, description and eligibility keys.

    11k GitHub stars~759 tokensUpdated 4 days ago
    Auto-check passed

Works with

Questions about HyperFrames Video Compositions

What does HyperFrames Video Compositions do?

Writes HTML compositions with a GSAP timeline that the render_video tool turns into deterministic MP4 videos from data, text or layouts. The `render_video` tool renders a self-contained HTML document into a pixel-exact MP4: headless Chrome steps a GSAP master timeline frame by frame, captures one image per frame, and FFmpeg encodes them, so the same HTML always yields the same video. The skill is for programmatic, data-driven videos such as animated charts, dashboards, explainers, quote cards, kinetic typography, countdowns and vertical social clips, and it sends photoreal or AI footage to `generate_video` instead.

When should I use HyperFrames Video Compositions?

HyperFrames Video Compositions fits situations like: rendering an animated chart or KPI dashboard as a video; making a kinetic typography or quote card clip; producing a branded vertical short for social media from data or text.

How do I install HyperFrames Video Compositions in Claude Code?

Run `npx skills add spinabot/brigade --skill hyperframes -a claude-code`. Or copy the skill folder (skills/hyperframes in spinabot/brigade) into .claude/skills/hyperframes in your project. Claude Code loads it when a task matches its description.

How do I install HyperFrames Video Compositions in Codex?

Run `npx skills add spinabot/brigade --skill hyperframes -a codex`. Or copy the skill folder (skills/hyperframes in spinabot/brigade) into .agents/skills/hyperframes in your project. Codex loads it when a task matches its description.

Can I use HyperFrames Video Compositions in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add spinabot/brigade --skill hyperframes -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/hyperframes, .gemini/skills/hyperframes, .github/skills/hyperframes and .opencode/skills/hyperframes in your project.

What does HyperFrames Video Compositions need to run?

Going by SKILL.md and its folder, HyperFrames Video Compositions needs the command-line tools its instructions call (npm). Our summary lists: A host that provides the `render_video` tool; GSAP loaded inside the composition.

Does HyperFrames Video Compositions access the network?

SKILL.md names 1 domain. In commands or code: cdn.jsdelivr.net; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is HyperFrames Video Compositions safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does HyperFrames Video Compositions use?

HyperFrames Video Compositions is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does HyperFrames Video Compositions use?

About 1.6k tokens (SKILL.md is roughly 6.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to HyperFrames Video Compositions?

Skills that share tags, products or a category with HyperFrames Video Compositions: Motion Ad (fabricioctelles/skills, 105 stars), Vid Sizzle Reel (Varnan-Tech/opendirectory, 672 stars), HyperFrames Animation (heygen-com/hyperframes, 58k stars) and Yuv Viral Video (hoodini/ai-agents-skills, 282 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains HyperFrames Video Compositions?

spinabot (a GitHub organization) maintains it in spinabot/brigade, which has 11,276 GitHub stars. The repository holds 11 skills in this directory. The repository was last updated on October 3, 2026.

Source: spinabot/brigade on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.