Skip to content
Get packs

HyperFrames Video Renderer

Turns HTML animations of charts, text and data into deterministic MP4 videos

Source Download skill
Repository
spinabot/brigade
Stars
11,367
Licence
MIT
Files
1 file

What it does

Once installed, the agent can write a self-contained HTML page with animated motion (charts, dashboards, quote cards, kinetic text, short social clips) and render it into an MP4 file using the render_video tool. The same HTML always produces the same video because motion is driven by a GSAP timeline stepped frame by frame in headless Chrome and encoded with FFmpeg. It is meant for programmatic, data-driven video, not photoreal or AI-generated footage.

Great for

  • Marketers making short vertical social clips or branded intros from text and brand data
  • Analysts who want an animated bar, line or donut chart video from a dataset
  • Creators producing quote cards or 'N facts about X' explainers

Skip it if

  • Photorealistic or AI-generated footage, which needs the separate generate_video skill (this skill cannot create that kind of footage)
  • Quick one-off edits to existing video files, since it builds videos from scratch from HTML
  • Machines without Node 22+, FFmpeg and enough time for renders that can take a minute or more

Try asking

  • “Make a 15-second vertical animated bar chart video of our Q3 sales by region”
  • “Create a kinetic typography intro with our brand colours saying 'Ship faster'”
  • “Render a countdown card for our product launch as a 1080x1080 square post”
  • “Turn these five customer quotes into an animated quote-card MP4 for Instagram Reels”
Step-by-step guide: how to use HyperFrames Video RendererInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 1 original files, the MIT licence and an attribution note.

    hyperframes.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip hyperframes.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip hyperframes.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Ask for a specific duration, aspect ratio (vertical, landscape or square) and brand colours so the composition matches your platform.
  • Provide real data or text up front; the skill is instructed to avoid placeholder content.
  • If a render times out, ask for a shorter or simpler animation, since heavy compositions are the usual cause.

What's inside

  • SKILL.md

Redistributed unmodified from spinabot/brigade under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.