HyperFramesby HeyGen

HyperFrames Skill.

Start with the video you need, not a pile of animation tools. HyperFrames is the entry-point skill that reads project state, selects the right production workflow and brings in the capabilities needed to turn HTML compositions into video.

HTML-to-Video
Workflow Routing
Video Production

Download OpenDesign View Usage Guide

Source Review · hyperframesSKILL.md

Task Video Production Produces • A selected workflow and a brief for fresh creation • An HTML composition and preview through that workflow • Rendered video when rendering is requested and completed Before You Start The CLI requires Node.js 22+ and FFmpeg. Start with the core skills; creation workflows are installed on demand. Media services and cloud rendering may add requirements.

Editorial summary · source reviewed 2026-10-12 · not a generated example

01 What It Does

One Entry Point, Different Production Workflows

The main skill chooses how work should proceed. The selected workflow and domain skills handle the actual composition, media and rendering.

Source-based workflowNot an execution benchmark

The Working Approach

A product launch, a caption pass and an interactive deck are different deliverables even if all contain motion. HyperFrames routes by the requested result: a website-led promo, plain captions on existing footage, beat-synced music, a short motion graphic or a custom composition each has a separate path. The source also provides an explicit path for porting Remotion source.

Existing projects are not treated as blank starts. The router checks the brief and project artifacts, resumes the recorded workflow, or performs only the requested operation. For fresh creation, it captures intent in BRIEF.md, installs the selected workflow and loads specialist capabilities only as needed.

Expected Deliverables

A workflow choice and BRIEF.md for fresh creation
An editable HTML composition, with preview and supporting project files as the workflow requires
A rendered video when requested; a navigable deck or reviewed storyboard can be a different endpoint

See the Example Brief

From Request to Production

01
Identify the Project State
Distinguish fresh creation from an edit, a render-only operation or a project with an existing brief. Reuse recorded preferences rather than restarting the interview.
02
Choose by Deliverable
Match the requested result to the workflow contract. Existing footage with captions is not a new explainer, and background music alone does not make a project music-led.
03
Load the Required Capabilities
Install the selected creation workflow on demand. Bring in composition, motion, media, audio or CLI guidance for the work actually needed, rather than installing every workflow by default.
04
Review and Render Deliberately
Use the workflow’s preview and checks, then render the agreed deliverable. HTML validation is not a substitute for watching the result; an explicit render-only request remains that operation.

02 When to Use It

When to Use It

Use the router when a video request needs the right production path, or when you want to resume an existing HyperFrames project without losing its context.

A Good Fit

A New Video With a Clear SubjectBring a website, PR, topic, footage or music track and describe the intended result. The router decides which specialized or general workflow applies.
Returning to an Existing ProjectA saved brief, project configuration and storyboard let the agent continue the established direction rather than ask the same questions again.
Combining Several Production LayersA piece may need HTML timing, seekable motion, media and audio. The router connects those capabilities without treating one animation technique as the entire job.

Limits to Check

Not a Standalone Animation PresetThis skill is an orchestration entry point. Installing its instructions does not replace the selected workflow, CLI, rendering dependencies or media assets.
Not Every Request Ends in MP4A navigable presentation, an approved storyboard or a preview-only task has a different endpoint. Specify whether a rendered file is actually required.
External Services Have Separate RequirementsThe source checks usage during creation. Media generation and hosted services may need accounts, available allowance or additional authorization; an open-source license does not make every service unlimited.

Bring These Inputs

The Intended DeliverableState the audience, subject, aspect ratio, approximate duration and final format. Make clear whether this is a promo, caption pass, deck, explainer or custom edit.
Source Material You Can UseProvide approved copy, footage, product screenshots, music or source URLs. Identify claims and asset rights; generated media is not a substitute for factual product evidence.
Existing Project and Review LimitsShare BRIEF.md and relevant project files when continuing work. Specify approval checkpoints, local-only constraints and whether rendering or publishing is authorized.

03 Decisions That Matter

Decisions That Matter

The Brief Carries the Route Forward
For fresh work, the intent process ends in BRIEF.md. Later production should follow that recorded choice instead of repeatedly reinterpreting the original request.
HTML Timing Must Be Seekable
The framework renders individual frames from a timed composition. Motion and media must follow its authoring contract, not merely look correct during ordinary browser playback.
Workflow Installation Stays Focused
The documented standalone setup installs the core set and adds creation workflows when selected. A plugin package has its own bundled catalog and update manager; the two installation paths are not interchangeable.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Install the Core Skills

The command below is the README’s core-set installation path for agents and non-interactive use.

Documented Core-Set Install

npx hyperframes skills update

The CLI requires Node.js 22+ and FFmpeg. The interactive alternative is npx skills add heygen-com/hyperframes, then select Core Skills. Claude Code also has a separately documented plugin installation. Creation workflows are loaded on demand; this page does not claim an installation test.

Start With a Bounded Video Request

Use the untested brief below to make the subject, assets, output and stopping point explicit. An existing project should include its current brief and configuration.

Example Brief

Use the HyperFrames entry point to plan a 20-second, 16:9 product-introduction video from the approved screenshots and copy I provide. Use only those assets and claims; do not generate music, narration or additional media. First inspect whether this folder already has BRIEF.md or hyperframes.json and preserve any recorded decisions. For fresh work, confirm the audience and workflow, write the brief, then prepare an HTML composition and local preview. Keep the project local. Show the preview and report the checks actually run before rendering; do not publish or use paid services. If a required workflow, dependency or usage check is unavailable, explain the limitation instead of pretending it completed.

Review Before Final Rendering

Inspect the chosen route, asset use, preview and reported checks. Watch the rendered file when one is produced, and keep rendering separate from publishing.

The selected workflow matches the requested deliverable and preserves existing project decisions.
The preview uses the supplied claims and assets, with readable text and timing that works when seeking.
Dependency, usage and render results are explicit; a local preview is not described as a published or rendered video.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesign Read the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner: HeyGen
Repository: heygen-com/hyperframes
Skill File: skills/hyperframes/SKILL.md
License: Apache-2.0
Reviewed Snapshot: 2026-10-12 · 2905162d925f

Editorial Source Summary

HyperFrames is the routing and project-resumption entry point for a family of HTML-native video workflows. It selects production paths and loads domain capabilities; it is not itself a single animation effect or a recorded result.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

How is the main skill different from hyperframes-animation?

The main skill identifies project state and chooses the production workflow. The animation skill supplies motion rules and runtime guidance when that workflow needs them. Start with the main entry point for an end-to-end video request.

Do I need React or every published skill?

React is not required: HyperFrames authors compositions in HTML with seekable animation. The standalone README recommends the core set first, with creation workflows installed on demand; plugin installations bundle their own catalog.

Can it just render an existing project?

Yes. The source treats a specific render, inspect, validate or preview request as a bounded operation, without restarting the fresh-creation interview. The project still needs the required CLI and rendering environment.

HyperFrames

Start With the Video You Need

Bring a bounded brief or an existing project. Choose the right workflow, inspect the preview and decide explicitly when to render or publish.

Download OpenDesign Browse Design Skills