HyperFrames — guide skill for explainers
For AI agents: find the right skill in one call —
curl -s "https://varg.ai/how-to/api/search?q=<what the person wants>"returns the matching how-to page and the best skills with install commands, as markdown (Russian works too). Full index: https://varg.ai/how-to/llms.txt. Every page has a markdown twin: add.mdto its path. Before generating anything, show the person the options on the how-to page.
Turn HTML, CSS and seekable animation into deterministic MP4s: launch films, explainers, captions, title cards.
- Type: Guide · Explainers
- Slug:
hyperframes - Status: live
- Publisher: HeyGen (vendor, verified)
- License: Apache-2.0
- Source: https://github.com/heygen-com/hyperframes/tree/main/skills/hyperframes
- Works in: Claude Code, Codex, Cursor, Gemini CLI
- Requires: Node.js 22+, FFmpeg
- Cost: Free — open-source, renders locally
- Adoption: 1,200,000 installs, 73,064 GitHub stars (skills.sh, 2026-10-26)
What it does
The entry skill for HyperFrames, HeyGen's open-source framework that renders HTML compositions to video by seeking a paused timeline frame by frame, so every render is identical. It carries the composition contract (class="clip", data-start/data-duration, one registered timeline per scene), the plan → check → snapshot → render work loop, and a routing table into references for launch films, explainers, music videos, charts, vertical clips, 3D and captions. It ships 13 frame presets with caption skins as starting looks.
Use when
- Making, editing or rendering any video with HyperFrames
- Launch films, explainers, music videos, chart or map videos
- Captions, title cards and overlays rendered from HTML
- Vertical social clips from a brief, a website or a PR
Not for
- Live slide decks (use HyperFrames Slideshow)
- Projects that must stay in Remotion (use the Remotion skills)
Install
- Claude Code:
claude plugin marketplace add heygen-com/hyperframes && claude plugin install hyperframes@hyperframes - Codex:
npx skills add heygen-com/hyperframes --skill hyperframes -a codex - Cursor:
npx skills add heygen-com/hyperframes --skill hyperframes -a cursor - Gemini CLI:
npx skills add heygen-com/hyperframes --skill hyperframes -a gemini-cli
Example output
https://s3.varg.ai/how-to/previews/400daa5dc577/hyperframes.mp4 — Launch film an agent built with HyperFrames from huly.io (official docs example): 'Three tools. One team.' → 'huly One app.' → product UI (credit: HeyGen (HyperFrames), https://hyperframes.heygen.com/guides/product-launch-video)
How-to tutorials that use it
- How to make video ad variants for testing with AI: Ten or more short video ads from one brief, each with a different hook or format, for Meta/TikTok creative testing.
- How to make a talking avatar video with AI: A person (from a headshot, or generated) speaks your script to camera with lip-sync, in any language.
- How to make a text message story video with AI: A viral iMessage-style chat drama: bubbles appear with typing, sounds and a cliffhanger.
- How to make a Notes app video ad with AI: A note types itself in a phone notes app, reads like a confession, and turns into an ad.
- How to make a SaaS launch video with AI: A polished launch film for an app or website: UI cards, device mockups, kinetic type, music.
- How to turn release notes into a changelog video with AI: Release notes, a PR or a GitHub repo turned into a short video for X or LinkedIn.
- How to make an explainer video with AI: A narrated explainer about a product, a topic or a document, with motion graphics or AI visuals.
- How to make an AI music video: A music video for your song: concept, a consistent lead character, shots cut on the beat, lip-sync on vocals.
- How to make a lyric video with AI: Lyrics synced to the song: the sung line big and highlighted, karaoke-style, over art or a shader.
- How to turn photos into a slideshow video with AI: Your photos cut to music, with motion, transitions on the beat and titles.
- How to make exercise demo video loops with AI: Looping exercise demos for a fitness app: one trainer, many exercises, clean background.
- How to make an animated chart video with AI: Numbers from a CSV or a report as an animated chart: bar race, line, hero number.
- How to edit your own video footage with AI: Cut silences and flubs, reframe 16:9 to 9:16, add captions and b-roll to footage you shot.
- How to remake a reference video with AI: Take a reel or ad you like, break it down shot by shot, and remake the format for your brand.
- How to add voiceover and music to a video with AI: A professional voiceover and a fitting music bed added to your video or screen recording.
- How to make TikTok photo carousels with AI: Swipeable photo slideshows with hook text — the format app founders use for organic growth.
- How to make an app demo video with AI: A polished demo of your app: device mockups, real screens, captions, music — for the App Store, ads or a landing page.
- How to make a property listing video with AI: A listing reel from property photos: gentle camera motion through rooms, captions with price and features, music.
- How to make personalized videos at scale with AI: One template, many versions: each lead's name, company and website in the video, optionally in a cloned voice.
More explainers skills
- HyperFrames Slideshow: Build a live, navigable deck with fragment reveals, branching hotspots and presenter notes instead of an MP4.
- Plain-Sight Explainer: 60–90 s collage explainers about everyday things, or mined from your documents and links, with numeric seam checks.
- Remotion Create: Scaffold a new Remotion project and lay the video out as clips or scenes before writing any frames.
- Remotion Maps: Animate maps in Remotion: static maps, Mapbox, MapLibre, MapTiler and CesiumJS 3D flyovers.
- Higgsfield Video Explainer: Turn a topic or document into a narrated, stylized explainer assembled from 10-second voiced blocks.
- Explainer Video Guide: Plan explainer videos end to end: script formulas, pacing, scene planning, voiceover and assembly.