# 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="` 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 `.md` to 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](https://varg.ai/how-to/guides.md) · [Explainers](https://varg.ai/how-to/browse/skills/explainers.md) - **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](https://varg.ai/how-to/make-video-ad-variants-for-testing.md): 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](https://varg.ai/how-to/make-a-talking-avatar-video.md): 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](https://varg.ai/how-to/make-a-text-message-story-video.md): A viral iMessage-style chat drama: bubbles appear with typing, sounds and a cliffhanger. - [How to make a Notes app video ad with AI](https://varg.ai/how-to/make-a-notes-app-video-ad.md): 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](https://varg.ai/how-to/make-a-saas-launch-video.md): 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](https://varg.ai/how-to/turn-release-notes-into-a-changelog-video.md): 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](https://varg.ai/how-to/make-an-explainer-video.md): A narrated explainer about a product, a topic or a document, with motion graphics or AI visuals. - [How to make an AI music video](https://varg.ai/how-to/make-an-ai-music-video.md): 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](https://varg.ai/how-to/make-a-lyric-video.md): 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](https://varg.ai/how-to/turn-photos-into-a-slideshow-video.md): Your photos cut to music, with motion, transitions on the beat and titles. - [How to make exercise demo video loops with AI](https://varg.ai/how-to/make-exercise-demo-video-loops.md): Looping exercise demos for a fitness app: one trainer, many exercises, clean background. - [How to make an animated chart video with AI](https://varg.ai/how-to/make-an-animated-chart-video.md): 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](https://varg.ai/how-to/edit-your-own-video-footage.md): 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](https://varg.ai/how-to/remake-a-reference-video.md): 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](https://varg.ai/how-to/add-voiceover-and-music-to-a-video.md): A professional voiceover and a fitting music bed added to your video or screen recording. - [How to make TikTok photo carousels with AI](https://varg.ai/how-to/make-tiktok-photo-carousels.md): Swipeable photo slideshows with hook text — the format app founders use for organic growth. - [How to make an app demo video with AI](https://varg.ai/how-to/make-an-app-demo-video.md): 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](https://varg.ai/how-to/make-a-property-listing-video.md): 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](https://varg.ai/how-to/make-personalized-videos-at-scale.md): One template, many versions: each lead's name, company and website in the video, optionally in a cloned voice. ## More explainers skills - [HyperFrames Slideshow](https://varg.ai/how-to/skills/hyperframes-slideshow.md): Build a live, navigable deck with fragment reveals, branching hotspots and presenter notes instead of an MP4. - [Plain-Sight Explainer](https://varg.ai/how-to/skills/hyperframes-vox-explainer.md): 60–90 s collage explainers about everyday things, or mined from your documents and links, with numeric seam checks. - [Remotion Create](https://varg.ai/how-to/skills/remotion-create.md): Scaffold a new Remotion project and lay the video out as clips or scenes before writing any frames. - [Remotion Maps](https://varg.ai/how-to/skills/remotion-maps.md): Animate maps in Remotion: static maps, Mapbox, MapLibre, MapTiler and CesiumJS 3D flyovers. - [Higgsfield Video Explainer](https://varg.ai/how-to/skills/higgsfield-video-explainer.md): Turn a topic or document into a narrated, stylized explainer assembled from 10-second voiced blocks. - [Explainer Video Guide](https://varg.ai/how-to/skills/inference-sh-explainer-video-guide.md): Plan explainer videos end to end: script formulas, pacing, scene planning, voiceover and assembly.