In short:
ak-hyperframeslets you write a vertical clip, a launch clip or motion graphics as one HTML file, then uses HeyGen'shyperframesCLI, pinned to a fixed version, to preview, check and render to MP4. The video only counts as done whenffprobeconfirms its duration and size. React-based video goes toak-remotion; plain cutting or format conversion goes toak-media-processing.
Disclosure: I maintain AgentKit and have an affiliate relationship with it: the AgentKit link in this post is an affiliate link; buying through it gets you 30% off.
Summary
Use it when you need a short video made of text, images and motion, and you want to edit the video by editing HTML. You do not need it when the video is built from React components, or when you only need to encode, cut or make a thumbnail.
flowchart LR
A["Short video idea"] --> B["ak-hyperframes"]
B --> C["MP4 file checked with ffprobe"]
B --> D["HeyGen HyperFrames skills for deeper techniques"]
A --> E["ak-remotion if built in React"]
A --> F["ak-media-processing if only encoding, cutting"]Four concepts to know:
| Concept | Question | Example |
|---|---|---|
| The composition is HTML | Where is the video described? | The root carries data-composition-id, data-width, data-height, data-duration; each scene has id, data-start, data-duration |
| Pinned CLI version | Which hyperframes version does each command run? | Every command looks like npx -y hyperframes@0.8.77; if the machine has another version, the skill reports it and does not upgrade |
| Check before render | When may you render? | Only after check is clean; after rendering it still verifies with ffprobe |
| Local or cloud render | Do you need an API key? | Local needs no key; cloud render needs a HeyGen login, unless you run --dry-run |
When scenes overlap, the layer order is decided by CSS z-index, not data-track-index.
Sample prompt for a vertical product launch video:
/ak-hyperframes Make a 9:16 vertical video, about 8 seconds, introducing <product name>.
3 scenes: the product name, a value statement, a call to visit <website>.
Constraints: dark background, white text, the product name slides up as it appears.
Export to ./assets/videos/<clip-name>.mp4.
Done when: check is clean and ffprobe reports 1080x1920, about 8 seconds long.This skill has no flags.
Below is the detailed version: the run flow, 5 situations with prompts, the change history by ak release, and common pitfalls. The detailed version and the interactive page are for subscribers. Your agent can also search them through the portal's MCP.
Opens when your account has subscriber access
This guide is for subscribers
Once your account has access, the full piece, the interactive visual and the agent call all open.
- Sign in or create a modernEngineer accountReading access belongs to your account email.
- Choose a plan on the pricing page1, 3 or 12 months, paid by VietQR bank transfer. Access opens about a minute after the money arrives.
- Or redeem a Facebook subscriber codePeople supporting the page on Facebook get an activation code by message each month.
Already a subscriber? Sign in to read.
Use this piece in your agent
Get an API keyCopy the text below and paste it into Claude Code, Codex or whichever agent you use. The agent reads the piece and checks it against the repo you have open.
Read "ak-hyperframes: write short videos in HTML, render to MP4" on modernEngineer and apply it to this repo.
1. Call the content_get tool of the modernengineer MCP server with locale "en", slug "ak-hyperframes". If the modernengineer MCP server is not connected, stop and walk me through connecting it from https://modernengineer.dev/en/mcp.
2. Summarize the main steps of the piece and point out which apply to this repo.
3. Propose concrete changes and ask me before editing any file.Connect MCP in Claude Code (once)
claude mcp add --transport http modernengineer \
https://api.modernengineer.dev/mcp \
--header "Authorization: Bearer <API key>"Reading the full piece over MCP needs an API key from a subscriber account or one that bought this guide. Without access, the agent only gets the opening.
- Version
- v1.0.0
- Updated
- 22/10/2026
- Licence
- All rights reserved
- Slug
- ak-hyperframes
