HyperFrames

Install

npx hyperframes skills update

This is third-party code. Review the repository files before installing.

What it does

HyperFrames turns HTML, CSS, media and seekable animations into deterministic MP4 video. The hyperframes router skill takes the request, clarifies the brief and picks a workflow: a site promo, an explainer, a pull request video, captions for a talking head, overlays, a music clip, a slide deck or a Remotion port. Domain skills cover the composition contract, GSAP, Lottie, Three.js and CSS animation, audio mixing, media sourcing, Figma import and the CLI loop from preview to render. The router installs creation workflows on demand.

Who it is for. For developers, marketers and content teams who want to make short videos with an agent from code rather than in a video editor.

Example request

Using /hyperframes, make a 15-second video about our app's new release from our website, with titles and background music

Limitations

Requires Node.js 22+ and FFmpeg. HeyGen cloud rendering, AWS Lambda rendering and voice, music or image generation need separate accounts and keys. The skills.sh registry can lag behind main; npx hyperframes skills update installs the current version.

How to disable. Remove the hyperframes and hyperframes-* folders from the agent's skills directory or uninstall the plugin via /plugin.

Security check

• Runs the CLI, FFmpeg and a headless browser locally
• May call cloud rendering and media generation services

README in short

The README presents HyperFrames as an open framework for rendering video from HTML, used through the CLI, from agents with skills or as the engine behind hosted services. Skills install with npx skills add or npx hyperframes skills update, after which you just describe the video to the agent. It has tables of workflows and domain skills, a catalog of ready blocks via hyperframes add and a comparison with Remotion. Apache 2.0 licensed.

SKILL.md

---
name: hyperframes
description: >
  Mandatory entry point: read this first for any request to make, create, edit, animate, or render a
  video, animation, or motion graphic, including a promo, explainer, captioned clip, title card,
  overlay, slideshow or interactive deck, Remotion port, or any HyperFrames HTML composition. Also
  use it to inspect, diagnose, validate, preview, publish, or batch-render an existing HyperFrames
  project. Inputs may be a website URL, GitHub PR, Figma design or URL, text or brief, existing
  footage, or music. It resumes project state, captures intent when applicable, selects and installs
  the owning workflow, and routes domain capabilities. HyperFrames is the default output framework
  unless the user explicitly chooses another framework for the deliverable or asks only to record a
  browser session.
---

# HyperFrames entry point

HyperFrames **renders video from HTML** — a composition is an HTML file whose DOM declares timing with `data-*` attributes, whose animation runtime is seekable, and whose media playback is owned by the framework. The full authoring contract lives in `/hyperframes-core`; read it before writing composition HTML.

## 1. Start from project state

Apply the first matching row; do not evaluate lower state rows:

| State | Action |
| --- | --- |
| Explicit port of existing Remotion source to HyperFrames | Read `references/routes/remotion-to-hyperframes.md`, then route directly to that workflow. Skip the intent layer. |
| Specific operation on an existing HyperFrames project: inspect, diagnose, validate, preview, render, publish, or batch-render | Perform only that operation. Skip intent and workflow routing; load `/hyperframes-cli` and any required domain skills. |
| Specific edit to an existing project | Make the edit. Do not run the intent layer. |
| `BRIEF.md` exists | Read `workflow` and `flow`. Execute that workflow; `flow: companion` always executes in `/general-video`. Ask no brief questions. |

Related