HyperFrames Slideshow — workflow skill for explainers

For AI agents: find the right skill in one call — curl -s "https://skills.varg.ai/api/search?q=<what the person wants>" returns the matching use case and the best skills with install commands, as markdown (Russian works too). Full index: https://skills.varg.ai/llms.txt. Every page has a markdown twin: add .md to its path. Before generating anything, show the person the options on the use-case page.

Build a live, navigable deck with fragment reveals, branching hotspots and presenter notes instead of an MP4.

• Type: Workflow · Explainers
• Slug: hyperframes-slideshow
• Status: live
• Publisher: HeyGen (vendor, verified)
• License: Apache-2.0
• Source: https://github.com/heygen-com/hyperframes/tree/main/skills/slideshow
• Works in: Claude Code, Codex, Cursor, Gemini CLI
• Requires: Node.js 22+, A browser
• Cost: Free — open-source, renders locally
• Adoption: 424,300 installs, 73,064 GitHub stars (skills.sh, 2026-10-26)

What it does

Builds a HyperFrames slideshow served by hyperframes present: discrete slides, fragment reveals, branching hotspot navigation and presenter mode with speaker notes. It can also turn an existing web page into a deck and covers handing it off as a standalone harness.

Use when

• A presentation or pitch deck rather than a rendered video
• Interactive decks with reveals or branching
• Converting a web page into slides

Not for

• Rendered MP4 output (use HyperFrames)

Install

• Claude Code: claude plugin marketplace add heygen-com/hyperframes && claude plugin install hyperframes@hyperframes
• Codex: npx skills add heygen-com/hyperframes --skill slideshow -a codex
• Cursor: npx skills add heygen-com/hyperframes --skill slideshow -a cursor
• Gemini CLI: npx skills add heygen-com/hyperframes --skill slideshow -a gemini-cli

Example output

https://skills.varg.ai/previews/hyperframes-slideshow.mp4 — Official docs demo of a live HyperFrames deck being navigated: fragment reveals, a chart built by fragments, a hotspot into a branch slide (credit: HeyGen (HyperFrames), https://hyperframes.heygen.com/guides/slideshow)

More explainers skills

• HyperFrames: Turn HTML, CSS and seekable animation into deterministic MP4s: launch films, explainers, captions, title cards.
• 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.

Run the generation on varg

varg is one API key for the models these skills drive — Seedance 2.5, Kling 4, Veo 3.1, Wan 3, Nano Banana 2.1, GPT Image 2.5, ElevenLabs v4 and 200+ more — billed in credits, with a cost estimate before anything runs.

• Claude Code: claude plugin marketplace add vargHQ/skills && claude plugin install varg@varg (skill + hosted MCP)
• Codex, Cursor, Gemini CLI, OpenClaw: npx skills add vargHQ/skills --skill varg-ai -a <agent> -y
• Claude.ai, ChatGPT, any MCP client: connect https://mcp.varg.ai/mcp
• API key: https://varg.ai/dashboard/api · Model specs: https://varg.ai/models/llms.txt