Turn product screens into a video
Use real screenshots and brand assets, reuse appropriate visual blocks, and review the sequence in a preview before requesting an export.
HyperFrames Skill by HeyGen
Use the HyperFrames Skill by HeyGen to create and edit HTML-based videos with its companion CLI, registry, and media instructions. Install the core set, organize scenes around a concrete brief, inspect real frames and a preview, then render and verify the requested deliverable.
Install and get started
Choose your agent to see how to get started. In Floatboat, copy a request that asks the agent to read the original instructions. Other options show the Skill installation command or the publisher’s native setup steps.
Choose an agent
Start in Floatboat
Copy the request into a Floatboat conversation
Read the original HyperFrames Skill instructions at https://github.com/heygen-com/hyperframes/blob/main/skills/hyperframes/SKILL.md. Explain its purpose, required tools, and installation options, then help me use it.Let the agent read the original instructions and check how to use them in your environment.
Download Floatboat ↗Try this request
Use the HyperFrames Skill to turn these product screenshots into a 15-second demo. Keep the existing brand assets, show a preview, and explain any optional media-service requirements before using them.
About HyperFrames Skill
The HyperFrames Skill guides agents through making and editing HTML video projects, while the HyperFrames CLI performs setup, inspection, preview, and rendering. The normal workflow combines four core instructions: hyperframes for composition, hyperframes-cli for tool operations, hyperframes-registry for reusable visual blocks, and media-use for media tasks. Install this set together so cross-Skill calls and relative references remain available. This guide connects those roles in one production workflow; the software and its rendering dependencies still need separate setup. Start with the subject, assets, timing, and output format, review scene frames and a preview, then verify an exported file when delivery is requested.
Use Cases for HyperFrames Skill
Explore work that benefits from editable HTML scenes and a shared creation-and-tool workflow. Build a product demonstration, adjust an existing sequence, or prepare repeatable variations, using the core Skills to connect composition decisions with CLI checks, preview, and the intended output.
Edit and check an existing video
Inspect project information and the timeline, make a focused scene change, then combine CLI findings with actual frame snapshots to verify its effect.
Deliver repeatable video variations
Change declared composition variables for titles or content, inspect representative variations, and verify the requested rendered files before delivery.
How to Use HyperFrames Skill
Install the four core Skills and prepare the project’s tool environment before creating or editing a video. Give the agent a concrete brief, use the appropriate CLI checks and frame snapshots while iterating, and render a file when the requested delivery calls for it.
- 01
Prepare the core set and brief
Install the four core Skills together and prepare the CLI environment. Provide the real subject, source assets, duration, and output format, or identify the existing project.
- 02
Create, check, and preview
Inspect an existing project with info and timeline --json. Follow the composition, registry, and media guidance; use npx hyperframes check --json, inspect snapshot frames, and review the preview while correcting issues.
- 03
Export and verify the file
Use npx hyperframes render when the brief requires a file or the user approves export. Confirm the file opens, compare its duration, and inspect frames and audio against the reviewed preview.
Explore More Agent Skills
Read another Skill guide and check its original source before using it.
HyperFrames Skill FAQ
Is the HyperFrames Skill the same as the HyperFrames app?
No. The Skill guides the agent; the software provides composition preview, timeline tools, and rendering. Installing one instruction does not prepare every tool dependency.
What kind of project does it work with?
The documented workflow uses an HTML root composition with scenes, assets, variables, and a seekable timeline. Existing project structure should be inspected before editing.
Why install the four core Skills together?
The composition, CLI, registry, and media instructions refer to one another. The CLI Skill also reads references from the hyperframes directory, so a lone instruction can leave expected workflows or relative files unavailable.
Does installing this Skill install HyperFrames CLI?
It adds operating instructions. The CLI and rendering environment still need to be available through the project’s supported setup.
What does local rendering require?
The CLI source lists Node.js 22+ and FFmpeg, with a suitable browser environment. Hosted rendering is a different path with its own setup and service requirements.
Do all videos need avatars or voiceover?
No. The brief determines the media. The source distinguishes requested content from optional additions and routes media work through a related workflow.
Are optional HeyGen services included in Skill installation?
No. Media generation or hosted features can require accounts, plan usage, or other prerequisites. Check those separately before selecting that path.
Should every command run as npx hyperframes?
The source uses npx hyperframes by default, but says to use a project-provided wrapper when one exists. Read the relevant reference before choosing flags.
When should the agent render a file?
Use preview for review and rendering for a requested export. Passing checks alone does not establish that the user wants a final render.
Does a passing check replace watching the video?
No. Review actual scene frames, transitions, and the preview. Open the final output as well, since timing, audio, and content must meet the brief.
Can it render in the cloud?
The source describes hosted and self-managed cloud paths in separate references. These require their own setup, account access, and cost review.
What should I inspect after an export?
Confirm the file is present and non-empty, compare its duration with the composition, and inspect decoded frames and audio against the reviewed preview.