HeyGen

Creates HTML-based video with synced captions, text-to-speech narration, beat-reactive animations, and scene transitions—no Adobe suite needed. Outputs renderable compositions.

Runs validation, preview, and environment diagnostics on a HyperFrames project. Identifies missing dependencies, misconfigured assets, and render bottlenecks without leaving the terminal.

Install and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add, installing a block or component, wiring an installed item into index.html, or working with hyperframes.json. Covers the add command, install locations, block sub-composition wiring, component snippet merging, and registry discovery.

Takes a Remotion video project and translates it into Hyperframes format, preserving animations, timings, and layers for seamless playback on web.

Asset preprocessing for HyperFrames compositions — text-to-speech narration (Kokoro), audio/video transcription (Whisper), and background removal for transparent overlays (u2net). Use when generating voiceover from text, transcribing speech for captions, removing the background from a video or image to use as a transparent overlay, choosing a TTS voice or whisper model, or chaining these (TTS → transcribe → captions). Each command downloads its own model on first run.

A cheat sheet for GSAP animations in HyperFrames—covers tweens, timelines, easing, stagger, and performance tricks. Paste your animation idea, get working code.

Screenshots a live URL and outputs a structured wireframe showing sections, content hierarchy, and component placement—ready to hand to a designer or rebuild.

Writes CSS keyframes and timing patterns that HyperFrames can scrub and preview without re-running. Handles animation-delay, fill-mode, and play-state edge cases.

Reference and troubleshoot Tailwind v4.2 utility classes, theme tokens, and browser-runtime patterns when building or editing HyperFrames projects. Clarifies v3 vs v4 syntax differences.

Translates Anime.js syntax into HyperFrames-compatible patterns, handling timeline registration, seek-driven animation, and deterministic render loops without extra setup.

Wires Three.js scenes, WebGL shaders, and camera motion to respond to HyperFrames seek events — so scrubbing a timeline updates 3D geometry, lighting, and animation in real time.

Handles the wiring to drop Lottie animations from After Effects into a HyperFrame, including player setup, state management, and making exports work reliably across runs.

Translates Web Animations API calls into HyperFrames patterns so your element.animate() and KeyframeEffect code render deterministically without breaking frame timing.

Author a new HyperFrames registry block (caption style, VFX block, transition, lower third) or component (text effect, overlay, snippet) and ship it as an upstream PR to the hyperframes repo. Use ONLY when the user wants to CONTRIBUTE to the public catalog — for in-project caption/transition authoring use the `hyperframes` skill, for installing existing registry items use the `hyperframes-registry` skill.

Scaffolds WebGPU pipelines with WGSL shaders for particle systems, liquid glass, and frame-synced animations. Handles compute kernels and HyperFrames event binding.

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). HyperFrames-native: single paused timeline, seek-safe, deterministic.

HyperFrames HTML composition contract. Use for composition structure, data attributes, clips, tracks, sub-compositions, variables, media playback, deterministic render rules, and validation of minimal renderable projects.

>

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.

>

Capture a general website/URL and turn it into a HyperFrames video (site tour, showcase, or social clip from the site's own visuals). Uses headless Chrome screenshots + brand assets. Use when intent is general — portfolio/blog/landing-page showcase or social clip from the site. NOT for: product/SaaS launch or promo (→ /product-launch-video, even from a URL); topic explainer with no site (→ /faceless-explainer); GitHub PR (→ /pr-to-video); adding captions to existing video (→ /embedded-captions); short unnarrated page-highlight motion graphic (→ /motion-graphics). Unclear launch-vs-general-site? Ask one question or start at /hyperframes-read-first.

>

faceless-explainer video workflow - arbitrary text (article / notes / topic / brief) -> narrator_scripts.json + audio (voice + BGM) + section_plan.md -> typography / abstract-graphics / diagram / data-viz video. Typical length up to ~3 min (sweet spot ~30-90s); a genuinely longer piece is general-video, not this workflow. Generates its OWN narration (TTS) — it does not sync to a user-supplied / pre-recorded voiceover (that is general-video). No website capture, no real product screenshots. If the text names a product / its site to promote, that is /product-launch-video; when product-vs-topic is unclear, start at /hyperframes-read-first.

pr-to-video workflow - a GitHub pull request (URL like github.com/<owner>/<repo>/pull/<N>, or <owner>/<repo>

>

Use when the user has a music track (an audio file, or a video to pull audio from) and wants a beat-synced HyperFrames video, calm to hard-hitting. The music drives everything: one analyzer reads it once, the orchestrator lays out the frames and fills a per-frame plan, and one sub-agent builds each frame. Typography and templates are the floor — a complete video needs zero assets — but any images or videos the user supplies are cut into the frames on the same beat grid (beat-cut / ken-burns). The genre (lyric video, slideshow, kinetic promo) falls out of the per-frame choices; the pipeline never branches on it.

Agent Media OS — resolve any media need (BGM, SFX, image, icon) into a frozen local file + ledger record. One verb (`resolve`) handles the full cascade — project cache, global cache, HeyGen catalog search, freeze, register. Keeps search noise on disk, hands the agent a path. Use when a composition needs background music, sound effects, images, or icons.

>

Generates a HyperFrames video outline using pre-validated brand templates, speaker notes, and frame timing — ready to polish in Claude Design's video editor.

Takes a written script or talking points and produces a polished AI avatar video ready to share — no camera, crew, or takes needed.

Takes a script or outline and produces a finished video with a synthetic presenter, natural lip-sync, and background. Ready to upload or embed.

Turns any written content into a playable audio file with adjustable pacing and voice tone, ready to embed or share.

Pulls captions or audio from a video file, transcribes, and translates into your target language with speaker labels and timing preserved.

Uploads and analyzes a video — extracting dialogue, visual moments, and key points — then summarizes or answers questions about what's in it.

Assembles raw video files, trims sections, syncs audio, and outputs a final cut with transitions and timing intact for social or presentation use.

|

Converts a written script, outline, or image sequence into a finished video file with AI-generated visuals, voiceover, and basic editing applied.

Converts text or a markdown script into a HeyGen video with a realistic avatar reading the lines, styled and paced for social or sales use.

Takes a written script, storyboard, or outline and produces a video file with synced voiceover, stock footage, captions, and basic transitions ready to publish.

Fetches a video from a URL, extracts the audio, and produces a searchable transcript with timestamps so you can find the exact moment you need.

Extracts colors, typography, spacing, components, and tone from existing designs or screenshots and produces a shareable style reference for consistency across projects.

Takes two images or video files and seamlessly replaces one face with another. Works with photos, video clips, and batch processing.

Takes a video file and generates a lip-synced dub in the target language using HeyGen's AI actors, preserving tone and timing of the original.

|

Troubleshoot and debug LiveAvatar integration issues. Use when the user's LiveAvatar integration isn't working, the avatar is silent, audio is garbled, sessions fail to start, events aren't received, or they're getting API errors.