Motion Ad
fabricioctelles/skills
Produce a short motion-graphics video ad — a 15s Facebook/Instagram/TikTok spot — as a rendered MP4.
Writes HTML compositions with a GSAP timeline that the render_video tool turns into deterministic MP4 videos from data, text or layouts.
$ npx skills add spinabot/brigade --skill hyperframes -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install spinabot/brigade hyperframes --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ 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-srcUse ~/.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/
Install the "hyperframes" agent skill from https://github.com/spinabot/brigade/tree/main/skills/hyperframes into .claude/skills/hyperframes/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hyperframes", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/spinabot/brigade/tree/main/skills/hyperframesType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add spinabot/brigade --skill hyperframes -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install spinabot/brigade hyperframes --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/spinabot/brigade.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/hyperframes .agents/skills/hyperframes && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "hyperframes" agent skill from https://github.com/spinabot/brigade/tree/main/skills/hyperframes into .agents/skills/hyperframes/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hyperframes", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add spinabot/brigade --skill hyperframes -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install spinabot/brigade hyperframes --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/spinabot/brigade.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/hyperframes .cursor/skills/hyperframes && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "hyperframes" agent skill from https://github.com/spinabot/brigade/tree/main/skills/hyperframes into .cursor/skills/hyperframes/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hyperframes", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/spinabot/brigade.git --path skills/hyperframes--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add spinabot/brigade --skill hyperframes -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install spinabot/brigade hyperframes --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/spinabot/brigade.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/hyperframes .gemini/skills/hyperframes && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "hyperframes" agent skill from https://github.com/spinabot/brigade/tree/main/skills/hyperframes into .gemini/skills/hyperframes/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hyperframes", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install spinabot/brigade hyperframesInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add spinabot/brigade --skill hyperframes -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/spinabot/brigade.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/hyperframes .github/skills/hyperframes && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "hyperframes" agent skill from https://github.com/spinabot/brigade/tree/main/skills/hyperframes into .github/skills/hyperframes/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hyperframes", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add spinabot/brigade --skill hyperframes -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install spinabot/brigade hyperframes --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/spinabot/brigade.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/hyperframes .opencode/skills/hyperframes && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "hyperframes" agent skill from https://github.com/spinabot/brigade/tree/main/skills/hyperframes into .opencode/skills/hyperframes/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hyperframes", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
hyperframesWrites 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.
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.
2 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit 4c2a18f. It shows what the files ask for, not the result of running them.
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.
Shell commands in SKILL.md call:
npmFrom the folder's file list and the shell code blocks in SKILL.md.
Hosts in commands or code, which the agent is likely to contact:
cdn.jsdelivr.netFrom URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
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.
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.
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.
The full file from spinabot/brigade at commit 4c2a18f, republished under its MIT licence (© spinabot). 546 words, ~1,641 tokens.
.claude/skills/hyperframes/SKILL.md (or your agent's skills folder).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.
Write ONE self-contained HTML document. Two things are mandatory and non-obvious:
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.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.
<!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>1080×1920 for TikTok/Reels/Shorts, 1920×1080 for landscape,
1080×1080 for square feed posts.The tool renders a single standalone index.html (no project scaffold), so the
composition must bring its own GSAP and assets:
<script src="…gsap.min.js"> (CDN as above) or paste the
minified source inline. It must be defined before your timeline script runs.data: URIs so nothing depends on external files.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.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.send_media({ path }).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).power2.out in, power2.in out). Linear motion reads robotic.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).
npm i @hyperframes/producer # the render engine (optional; enables render_video)
# FFmpeg: brew install ffmpeg | winget install ffmpeg | apt install ffmpegOverrides: 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
Just SKILL.md in skills/hyperframes of spinabot/brigade.
Open the folder on GitHubat commit 4c2a18f
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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| HyperFrames Video Compositions this skillspinabot/brigade | 11k | — | ~1.6k | Automated safety check: Pass | MIT | |
| Motion Adfabricioctelles/skills | 105 | — | ~4.1k | Automated safety check: Pass | Apache-2.0 | |
| Vid Sizzle ReelVarnan-Tech/opendirectory | 672 | — | ~3.9k | Automated safety check: Pass | MIT | |
| HyperFrames Animationheygen-com/hyperframes | 58k | 3 repos | ~2.1k | Automated safety check: Pass | Apache-2.0 | |
| Yuv Viral Videohoodini/ai-agents-skills | 282 | — | ~7.5k | Automated safety check: Notes | None | |
| Bang Motionbangtutorial/bang-motion | 568 | — | ~9.7k | Automated safety check: Pass | MIT |
fabricioctelles/skills
Produce a short motion-graphics video ad — a 15s Facebook/Instagram/TikTok spot — as a rendered MP4.
Varnan-Tech/opendirectory
Generates a high-energy sizzle reel or hype video (MP4) from brand assets and key messages.
heygen-com/hyperframes
Collects motion rules, scene blueprints, transitions and runtime adapters for HyperFrames video compositions, with GSAP as the default animation runtime.
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…
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…
notivn/AIEV
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.
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.
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.
spinabot/brigade
Diagnoses why a Brigade companion app can't pair or connect, by first identifying the real node-to-gateway route and then fixing auth.
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.
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.
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.
Categories
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.