At a glance
- Best for
- Deterministic HTML video and scene structure
- Works with
- A video brief, brand assets, aspect ratio, and duration · An existing video project or reference content
- Outcome
- An HTML video project · Editable previews and exported videos
- Source
- heygen-com/hyperframes
01 / Understand the skill
About hyperframes
Provide rendering contracts, scene organization, animation guidance, and checks for HTML video production. Covers promotional videos, explainers, data animations, and vertical content, using the CLI for previews and rendering.
Requirements
- Node.js 22+, FFmpeg, and the HyperFrames CLI
- Use with hyperframes-cli, hyperframes-registry, and media-use; the official core set also includes reverse-any-video and style-sampling
- Install the complete reference, font, and asset directories
Inputs
- A video brief, brand assets, aspect ratio, and duration
- An existing video project or reference content
Outputs
- An HTML video project
- Editable previews and exported videos
- Validation or visual-review records
02 / Confirm the fit
Use hyperframes when you need to
- Deterministic HTML video and scene structure
- Rules for organizing animation, audio, and assets
- Validation, screenshot review, and delivery workflows
03 / See the workflow
How hyperframes works
- 01Define the video's goals, scenes, and assets
- 02Create addressable timelines and scenes
- 03Validate, preview, and render for delivery as needed
Check before installing
Compatible platforms
Cursor · OpenAI Codex · Claude Code
Best fit
Deterministic HTML video and scene structure
Review the source instructions if the required output differs from the formats described above.
Install and use
Compatible with Cursor and OpenAI Codex and Claude Code · Published by heygen-com
Ready to add hyperframes?
Use the published instructions below, then provide the required input and describe the result you need.
General instructions · Cursor · OpenAI Codex · Claude Code
npx hyperframes skills update The upstream README recommends installing the complete core set of six Skills. Installing a single --skill would omit cross-directory dependencies. Command recorded only; not executed.
Review the source repository and license before installing third-party skills.
Continue exploring
Similar skills
Generates original p5.js generative art by first writing an algorithmic philosophy, then expressing it as a self-contained interactive HTML viewer with seeded randomness.
Reproduces a reference mockup as a runnable frontend, extracting its design system then screenshot-comparing the build and iterating until the gap is minor and explained.
Clarifies the brief before design work by interrogating goal, user, JTBD, constraints, success, and scope, then writing a context.md the other design skills consume.
Creates museum-quality original poster and visual-art PDFs/PNGs by drafting a design philosophy first, then expressing it as a minimal, design-forward single-page canvas.