Source assets and a timeline, followed by previews, an export and editable files

HyperFrames

Turn an HTML Project into a Video You Can Check

Describe video with HTML, CSS and seekable animation. Seven companion skills guide an agent through projects, media, reusable visuals, checks and CLI exports.

By heygen-com

Project demo

Hosts listed by the author

  • Claude Code
  • Codex
  • Cursor
  • Gemini CLI
  • GitHub Copilot
  • OpenCode
GitHub stars
75,550
Version
0.8.220
Checked

Start with a silent, ten-second product intro

Bring one real screenshot, a logo and approved short copy. Connect the editable project, key frames, Studio preview and final MP4 before adding speech, dynamic data or external services.

Pick a task and get started

Run the three lines below in your system terminal to register the marketplace, install the plugin and inspect its inventory. Then start Claude Code in your work directory and send a task beginning with /hyperframes:hyperframes. Slash invocations do not run in the system terminal.

Choose by the materials you already have

Supply a screenshot, logo, brand colors and short copy. Get a silent landscape video and an editable scene project.

  1. Install the HyperFrames plugin

    Run in a system terminal with Claude Code installed. The first line adds the marketplace, the second installs the plugin and the third checks its inventory; default scope is user. We inspected plugin and CLI 0.8.220. Installation retrieves the marketplace version available when run, so verify the version actually loaded.

    claude plugin marketplace add heygen-com/hyperframes
    claude plugin install hyperframes@hyperframes
    claude plugin details hyperframes
    Read the author’s setup guide

    Confirm the plugin, then use its matching CLI

    Start a new session or run /reload-plugins in an existing one. Confirm /hyperframes:hyperframes is available, and have the agent verify that hyperframes, hyperframes-cli, hyperframes-registry, media-use and the other bundled skills come from the same plugin directory. Run subsequent CLI commands in the video work directory through node "<PLUGIN_ROOT>/skills/hyperframes/scripts/plugin-cli.mjs". The agent must resolve <PLUGIN_ROOT> from the loaded skill; it is not a literal path to copy. The launcher selects the manifest’s CLI version and may download it through npm on first use. Read individual doctor --json results: a successful command exit does not mean the environment is healthy, and optional voice, music or Docker checks do not all need to pass for these tasks.

    Read the plugin launcher and version rules
  2. Give your AI this first task

    These editorial prompts follow the fixed source revision; we have not produced or rendered their sample videos. Replace bracketed inputs. The first three explicitly request a local MP4; the fourth diagnoses first and lets you choose whether to apply a fix.

    /hyperframes:hyperframes Create a new product-intro project in [work directory] and deliver a local MP4: 10 seconds, 1920×1080, 30 fps, silent. Inputs are [real screenshot path], [logo path], [licensed font file] and [brand colors]. Use this approved on-screen copy: [product name and one short line]. Treat these materials as the source of content. Read the loaded plugin’s main skill and its launch, format and review references. Resolve the plugin root. Run every CLI operation through node "<PLUGIN_ROOT>/skills/hyperframes/scripts/plugin-cli.mjs", without mixing in standalone skill updates. Check Node, FFmpeg, FFprobe, a usable browser and free disk space; report any missing requirement precisely. Scaffold an empty target with launcher arguments init product-intro --non-interactive, then enter that project. Place the supplied assets and fonts under assets/. Inspect what the screenshot actually demonstrates and reveal or reframe that real UI; do not invent actions, outcomes or metrics. If a catalog visual is useful, search for its purpose in English, then read and integrate suitable source. Propose and implement a short beat sequence, for example: 0–3 seconds establish the product name and screenshot, 3–7.5 seconds direct attention to one real detail, and 7.5–10 seconds hold a short closing line. Use index.html and separate scenes, declare the root duration and canvas, and make scene timelines seek correctly in both directions. Land the closing state before 10 seconds, not exactly at the exclusive end of its clip. Run check --snapshots --json and read the actual findings and browserSkipped. Use snapshot --review to inspect the beat, seam and phone-width sheets. Run preview --background and return the actual Studio project link. Check the opening frame, both scene transitions, the closing read time and the supplied font. After resolving blocking problems, export with render --format mp4 --fps 30 --quality delivery --strict --no-best-effort. Use the default timestamped filename and record its actual path. Verify a nonempty file, 10 seconds, 1920×1080, 30 fps and 300 frames, then inspect key moments in the real MP4. State any playback or inspection you could not perform. Deliver the project, video and REVIEW.md distinguishing measurements from visual review. Deliver locally only; do not publish, send feedback or call external generation services.

  3. Check what you receive

    • Editable entry HTML, scenes, screenshots and fonts, plus an MP4 with its actual output path recorded.
    • Check 10 seconds × 30 fps = 300 frames. The final frame is at about 9.967 seconds, so the closing line must already have settled.
    • Confirm the screenshot still represents real functionality and the title is readable in both snapshots and the exported video; retain outstanding checks.
    Read the author’s task reference
More about this skill

HyperFrames is HeyGen’s open-source video framework, with companion skills for coding agents. Compositions use HTML, CSS, media and seekable animation, without requiring React. Its CLI asks Chrome for frames at specified times and uses FFmpeg to encode them. Studio provides a browser interface for previewing and editing. Installing the skills does not supply every browser, encoder or asset a project needs.

The inspected version publishes seven skills. hyperframes owns the production contract and work sequence; hyperframes-cli explains commands; hyperframes-registry finds and integrates editable visuals; and media-use handles media and sound. Three specialized entries cover Figma, navigable slide decks and migration from existing video projects. The Claude Code plugin bundles all seven, while a standalone install can start with the four core skills.

This is useful for product clips, animated charts and captions that need repeated changes to copy, data or timing. The deliverable can include a project you can reopen and inspect, as well as an MP4. Seeking by time helps reproduce a problem, but assets, fonts, browser builds and runtime versions still affect the picture. Repeatable authoring is not a promise of identical pixels on every machine.

Sources and verification

Sources checked

Based on fixed source, release metadata and command implementations. All seven skill entries and the references used here were read in full; larger CLI files were inspected only for the relevant sections. No video task was run.