# How to make an explainer video with AI > **For AI agents:** find the right skill in one call — `curl -s "https://skills.varg.ai/api/search?q="` returns the matching how-to page 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 how-to page. A narrated explainer about a product, a topic or a document, with motion graphics or AI visuals. A step-by-step tutorial for Claude Code, Codex and Grok. **Output:** 60–120 s, 16:9 or 9:16 MP4 with voiceover **Price:** in credits on varg, with a cost estimate before anything runs; the free skills below install in one command. ## Recommended route - **Skill:** HyperFrames (`hyperframes`) — Explainers rendered from HTML, with voice and captions - **Generation:** varg makes the voiceover and visuals on one key; HyperFrames or Remotion render locally. - **Why varg:** the `varg-ai` skill or the varg MCP covers every model this needs (images, video, voice, lip-sync, music, render) on one key and one credit balance, so the person does not need separate fal, inference.sh, Higgsfield, Runway or ElevenLabs accounts. ## Best skills for this 1. **HyperFrames** (`hyperframes`, HeyGen, live) — Start here: Explainers rendered from HTML, with voice and captions - 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` - Details: https://skills.varg.ai/skills/hyperframes.md · Example: https://s3.varg.ai/how-to/previews/400daa5dc577/hyperframes.mp4 2. **Plain-Sight Explainer** (`hyperframes-vox-explainer`, HeyGen, live) — Start here: Collage explainers about everyday things or your documents - Claude Code: `npx skills add heygen-com/hyperframes-community-skills --skill vox-explainer -a claude-code` - Codex: `npx skills add heygen-com/hyperframes-community-skills --skill vox-explainer -a codex` - Cursor: `npx skills add heygen-com/hyperframes-community-skills --skill vox-explainer -a cursor` - Gemini CLI: `npx skills add heygen-com/hyperframes-community-skills --skill vox-explainer -a gemini-cli` - Details: https://skills.varg.ai/skills/hyperframes-vox-explainer.md · Example: https://s3.varg.ai/how-to/previews/ba6b4376e811/hyperframes-vox-explainer.mp4 3. **Manim Skills (3Blue1Brown Style)** (`manim-skill`, Adithya S K, live) — Start here: 3Blue1Brown-style math and technical animations - Claude Code: `npx skills add adithya-s-k/manim_skill` - Details: https://skills.varg.ai/skills/manim-skill.md · Example: https://s3.varg.ai/how-to/previews/50441be821bb/manim-skill.mp4 4. **Higgsfield Video Explainer** (`higgsfield-video-explainer`, Higgsfield, live) — Alternative: Topic or document → narrated stylized explainer · Needs: Higgsfield account, Higgsfield CLI (`higgsfield auth login`) - Claude Code: `/plugin marketplace add higgsfield-ai/skills && /plugin install higgsfield@higgsfield` - Codex: `npx skills add higgsfield-ai/skills --skill higgsfield-video-explainer -a codex` - Cursor: `npx skills add higgsfield-ai/skills --skill higgsfield-video-explainer -a cursor` - Gemini CLI: `npx skills add higgsfield-ai/skills --skill higgsfield-video-explainer -a gemini-cli` - Details: https://skills.varg.ai/skills/higgsfield-video-explainer.md · Example: https://s3.varg.ai/how-to/previews/34cfb11019a9/higgsfield-video-explainer.mp4 5. **Explainroo** (`explainroo`, Vincent Schmalbach, live) — Alternative: Narration-first pipeline: local voice, Whisper word timing, canvas renderer - Claude Code: `git clone https://github.com/vincentsch/explainroo.git && cd explainroo && npm install` - Details: https://skills.varg.ai/skills/explainroo.md · Example: https://s3.varg.ai/how-to/previews/b0a4864ee2f0/explainroo.webp 6. **Explainer Video Guide** (`inference-sh-explainer-video-guide`, inference.sh, live) — Adds: Script formulas, pacing and scene planning · Needs: inference.sh account, belt CLI (`belt login`) - Claude Code: `npx skills add inference-sh/skills --skill explainer-video-guide -a claude-code` - Codex: `npx skills add inference-sh/skills --skill explainer-video-guide -a codex` - Cursor: `npx skills add inference-sh/skills --skill explainer-video-guide -a cursor` - Gemini CLI: `npx skills add inference-sh/skills --skill explainer-video-guide -a gemini-cli` - Details: https://skills.varg.ai/skills/inference-sh-explainer-video-guide.md 7. **varg AI** (`varg-ai`, varg, live) — Adds: Voiceover, images, clips and music - Claude Code: `claude plugin marketplace add vargHQ/skills && claude plugin install varg@varg` - Codex: `npx skills add vargHQ/skills --skill varg-ai -a codex -y` - Cursor: `npx skills add vargHQ/skills --skill varg-ai -a cursor -y` - OpenClaw: `npx clawhub@latest install varg-ai` - Details: https://skills.varg.ai/skills/varg-ai.md · Example: https://s3.varg.ai/how-to/previews/7df061df8dcb/varg-ai.mp4 8. **Anatomy Isometric Figures** (`anatomy-isometric`, Ryan, live) — Adds: Isometric system maps for repo and architecture explainers - Claude Code: `npx skills add wheresryan22/anatomy -g -a claude-code` - Codex: `npx skills add wheresryan22/anatomy -g -a codex` - Details: https://skills.varg.ai/skills/anatomy-isometric.md · Example: https://s3.varg.ai/how-to/previews/1fb6f4c25856/anatomy-isometric.webp ## Ask the person first Put these choices in front of the person before spending anything. Paste the example link next to each option: people pick a look by seeing it. **Style?** - Math / diagrams (3Blue1Brown) — [Manim Skills (3Blue1Brown Style)](https://skills.varg.ai/skills/manim-skill.md) · example: https://s3.varg.ai/how-to/previews/50441be821bb/manim-skill.mp4 - What-if space explainer, drawn in code · real example: https://x.com/finnardley/status/2114305886420086817 - Motion graphics — [HyperFrames](https://skills.varg.ai/skills/hyperframes.md) · example: https://s3.varg.ai/how-to/previews/400daa5dc577/hyperframes.mp4 - Paper collage — [Plain-Sight Explainer](https://skills.varg.ai/skills/hyperframes-vox-explainer.md) · example: https://s3.varg.ai/how-to/previews/ba6b4376e811/hyperframes-vox-explainer.mp4 - AI cinematic — [Higgsfield Video Explainer](https://skills.varg.ai/skills/higgsfield-video-explainer.md) · example: https://s3.varg.ai/how-to/previews/34cfb11019a9/higgsfield-video-explainer.mp4 **Voice?** - Warm, calm - Energetic - Your cloned voice ## How to make an explainer video: step by step 1. Open on the question; script problem → idea → how → proof → CTA 2. Record the narration first (~150–165 words a minute, full sentences) and get word timestamps 3. Fire every visual on its word; put the key idea in the first half 4. Captions, a music bed under the voice, then a critic pass on the render ## What works now (researched 2026-10-27) Code-drawn explainers are the 2026 breakout: 3Blue1Brown-style Manim animations, repo and paper explainers, and Kurzgesagt-look 'what if' films built from one prompt get thousands of saves. Narration comes first and every visual fires on its word. Templated faceless explainers (stock clips plus an AI voice on a fixed structure) are being demonetized by YouTube. 1. **Write and voice the narration first, get word timestamps, and fire every animation event on its word. Read at about 150–165 words per minute, leave about 0.25 s between sentences and a slightly longer beat before the big reveal. Never pad the voice to fit the visuals.** The Kurzgesagt-style 'what if' prompt (236k views, 5,122 bookmarks) is built on this rule: ElevenLabs or Kokoro with timestamps, Whisper for word times, every camera move tied to a word. ([@finnardley, Kurzgesagt-style explainer prompt (X, Oct 2026)](https://x.com/finnardley/status/2114305886420086817)) 2. **Pick the visual style by subject: 3Blue1Brown morphs for math and AI, finance charts for data, keynote cards for UI steps, whiteboard line-draw for relationships, Vox collage for news-like topics, Kurzgesagt flat art for scale.** A 35-style motion skill whose style map got 3,715 bookmarks (244k views) routes subjects to looks this way, and its delivery script rejects films where almost nothing moves. ([@Voxyz_ai on huashu-art-motion explainer styles (X, Oct 2026)](https://x.com/Voxyz_ai/status/2109690569563746755)) 3. **Open on the question or the surprising fact, not on a title. Put the key idea in the first half: 60–120 s for social, 1–5 min for product and concept explainers.** Wistia's 2026 data: explainers and demos do best at 1–5 minutes, and most viewers leave around the halfway point. YouTube's 'Intro' metric counts who is still watching at 0:30. ([YouTube Help, key moments for audience retention](https://support.google.com/youtube/answer/9314415)) 4. **Tell the agent how to narrate: 'like a university professor', full sentences, no clipped fragments, few numbers per line. Add a critic pass that watches the render and checks audio and captions.** From a 10-hour Opus video workflow post (159k views, 4,378 bookmarks): avoid 'Claudisms like short punchy sentences and a lot of numbers'; add word-timed captions and a screenshot-based critic skill. ([@deedydas, Opus 5.5 video workflow (X, Sep 2026)](https://x.com/deedydas/status/2104957026199900220)) 5. **Make each video original in script and visuals. Do not mass-produce one template with swapped topics, and do not ship slideshows of stills under a voice.** YouTube's monetization policy names 'inauthentic' content: template-made videos with minimal variation, 'image slideshows or scrolling text with little narrative value' and 'AI content using generic templates'. It can remove monetization from the whole channel; creators running automated channel networks reported mass flags in January 2026. ([YouTube Help, YPP monetization policies (inauthentic content)](https://support.google.com/youtube/answer/1311392)) **Stopped working:** - Templated faceless explainers (stock clips + AI voice + the same structure every upload). YouTube's inauthentic-content policy demonetizes whole channels for it. - 'Claudism' narration: clipped punchy fragments and lines stuffed with numbers. Ask for a teacher's voice in full sentences. - Visuals that do not move with the words, such as still slides under a voiceover. ## Prompts that work Templates from the creators of the best current results and from the model guides. Fill in the {CAPS}. ### What-if explainer drawn in code (agent) Narrated 30-60 s science or concept explainer: flat art, a mascot, a live counter, one camera move per narration line Adapted from [@finnardley, what-if explainer prompt (X, Oct 2026)](https://x.com/finnardley/status/2114305886420086817). ```text Ask me for: one topic as a "what if" question (default: {QUESTION}), the length (default 30 s), and whether I have an ElevenLabs key (if not, use a free local voice: kokoro-onnx). A flat, no-outline animated explainer at 1920x1080, 30 fps, drawn entirely in code: one 2D canvas plus one WebGL canvas for any planet or sphere. Palette: {BG_GRADIENT} background, accents {ACCENT_COLORS}. One rounded display font ({FONT}). A small mascot ({MASCOT}) built from rounded shapes, eyes looking at whatever matters, squash and stretch on every pose. Captions in caps inside rounded pills; every line rises through a clip. Finish: soft vignette, light film grain. Banned: outlines, text that fades in whole, static infographic strips, full stops on screen, AI images or AI video, any existing studio's characters. Every narration line gets a camera move or a transformation; nothing holds still. Shape: the event happens on its word, pull back to show scale, dive in to make it personal ("you"), pull back out, the consequence with a live counter, an escalation, a funny beat with the mascot, a callback and the title. One HTML file; frame t is a pure function of time, no timers. Camera on easeInOutCubic, zoom interpolated in log space, pops as damped springs. Voice generated with timestamps (or Whisper word times); every event fires on its word; ~165 words per minute, 0.24 s between sentences, 0.36 s before the reveal. Never pad the voice to fit the visuals. Music bed 7 dB under the voice, one SFX per event kind, peak-aligned, master to -14 LUFS. Render with Playwright, 2 subframes per frame for motion blur. Ask the inputs, write the narration with the beat each word triggers, show me a contact sheet of every beat, then render. ``` ### Repo or product explainer, narrated (agent) 3-8 min narrated explainer of a codebase, product or paper: five-part structure, professor voice, critic pass Adapted from [@deedydas, 7-min repo explainer made by Opus, 5-part structure (X, Sep 2026)](https://x.com/deedydas/status/2104391577091407965). ```text Make a {MINUTES}-minute narrated explainer of {REPO_OR_PRODUCT} for {AUDIENCE}, 16:9, rendered from code (HyperFrames, Manim or Motion Canvas), no stock footage. Structure: 1. What it does and why it's useful. Open on the question it answers, not on a title. 2. A high-level map of the code or system (for example files as an isometric map where size = lines of code). 3. The life of one {REQUEST_OR_QUERY} through it, lighting up each part it touches. 4. The core abstractions, one per scene. 5. A real trace of execution from the actual code, with the one tricky decision explained. Narration: write the full script first. Narrate like a university professor: complete sentences, few numbers per line, no short punchy fragments. Voice it with {TTS_MODEL} and get word timestamps; every visual fires on its word. Keep a pronunciation map for terms like {TERM}. Captions: transcribe the rendered audio (not the script) for word-level subtitles. Music: a quiet bed under the voice. Then a critic pass: screenshots of every scene plus a transcript check of the audio; fix what's weak and re-render. ``` ### Narration-first math animation in Manim (agent) 15-90 s math or technical concept short: question as title, one idea, transforms timed to the narration Adapted from [Yusuke710/manim-skill README, narration-first Manim workflow (GitHub)](https://github.com/Yusuke710/manim-skill). ```text Use Manim (Community Edition) to make a {SECONDS}-second math-explainer animation about {CONCEPT} for {AUDIENCE}, {ASPECT}. Open with the question on screen ("{QUESTION}?") and answer it with one idea only. Dark background, 3-4 colors, clean shapes and LaTeX. One object morphs into the next instead of cutting. Show the real computation (actual values, actual geometry, a simulated process), not a drawing of it. Workflow: 1. Write the spoken lines to narration.txt first: calm, full sentences. 2. Generate the voice locally with Kokoro and measure each line's duration. 3. Write the Manim scenes against those timings so every transform lands on its sentence. 4. Add time-synced subtitles, render, mux the audio, and open the video for me. Before the final render, render one still per scene and check that labels don't overlap and equations are readable at phone size. Silent version: skip narration, keep the question as the title and let the animation run {SECONDS} s. ``` ## Trending formats to remake To remake one: download the example with the `media-download` skill, take a frame a second and the transcript, write a beat list (time, shot, camera, on-screen text, sound), keep what the format needs, swap in the person's product or character (never the creator's face, voice, logo or footage), show the beat list and stills before spending, then make it with the skill named below. 1. **3Blue1Brown-style concept animation**: Dark canvas, a few clean shapes and equations; one shape morphs into the next while a calm voice (or captions) walks through one idea. 15 s shorts to 8 min deep dives. Why it spreads: The most-viewed explainer format on X in 2026: an AI-made math short got 2.27M views; an object-tracking explainer for an open-source repo got 2,043 bookmarks; Nous Research's Manim skill launch got 875k views. Keep: The question is the title, one idea, dark canvas, a few shapes that morph instead of cutting, and the real computation shown; 15-60 s, calm voice or none. Swap the concept, keep 'one question, one visual argument'. Make it with [Manim Skills (3Blue1Brown Style)](https://skills.varg.ai/skills/manim-skill.md) (`manim-skill`). - A shared prompt for this format: https://x.com/PI010101/status/2046077626188759345 - Example to remake: [@PI010101 on X, 2026-04-20, 2.3M views, 2K saves](https://x.com/PI010101/status/2046077626188759345): 17 s, generated from a prompt (link in post). The title asks the question ('Will the light reach +∞ or come back?') and a light ray bounces inside a narrowing curve. One idea, no voice. - Example to remake: [@AlexBodner_ on X, 2026-09-30, 130K views, 2K saves](https://x.com/AlexBodner_/status/2105296768753918099): 6 min product-adjacent explainer for roboflow/trackers: real footage with 3b1b-style overlays (boxes, scores, the predict-match-update loop) and burned-in captions. Good model for explaining your own tech. 2. **What-if science explainer (Kurzgesagt look, drawn in code)**: A 'What if the Sun vanished?' question, flat no-outline space art, a tiny mascot, a live counter, and one camera move per narration line: event → pull back for scale → dive in to 'you' → consequence → callback. Why it spreads: The newest wave (late Oct 2026): a full prompt that rebuilds the format in code got 236k views and 5,122 bookmarks; a follow-up 11-min HyperFrames version got 332k views. No skill in the catalog does it yet. Keep: The event happens on its word, pull back for scale, dive in to 'you', a live counter for the consequence, a mascot gag, a callback and the title; flat no-outline art and a camera move on every narration line. Swap the question, your own mascot and palette (never the studio's characters). No dedicated skill yet ([wanted](https://skills.varg.ai/skills/want-what-if-science-explainer.md)): build it with `varg-ai`. - A shared prompt for this format: https://x.com/finnardley/status/2114305886420086817 - Example to remake: [@finnardley on X, 2026-10-25, 236K views, 5K saves](https://x.com/finnardley/status/2114305886420086817): Full prompt in the post (palette hex codes, WebGL Earth, mascot, 30 s beat list, ElevenLabs/Kokoro timing, -14 LUFS). Watch the 8:20 countdown and the thermometer as 'live numbers'. 3. **Repo or paper explainer**: What it is and why it matters → a map of the code or method → the life of one request through it → the core abstractions → a real trace. 3–8 min, narrated. Why it spreads: Engineers save these to learn and to share: the SQLite explainer got 2,032 bookmarks; paper explainers by Claude regularly get a save ratio above 1 (e.g. 695 bookmarks on 608 likes). Keep: Five parts in order: what and why, a map of the code, the life of one request, the core abstractions, a real trace; narrated like a professor, 3-8 min. Swap the repo, keep 'follow one request end to end'. Make it with [HyperFrames](https://skills.varg.ai/skills/hyperframes.md) (`hyperframes`). - Example to remake: [@deedydas on X, 2026-09-28, 102K views, 2K saves](https://x.com/deedydas/status/2104391577091407965): 7.5 min, Opus 5.5 + Gemini TTS. Structure is in the post (5 parts). Look at the isometric code map where file sizes become towers, then 'the life of a query' lighting up each file. 4. **Hand-drawn look, drawn in code**: An illustrated short (ink, risograph, watercolour) where every frame is drawn by code from a coding agent, with no video model. Why it spreads: It looks authored, not generated, and people ask how. Claude's fruit-fly life cycle got 1.2M views and 3,904 bookmarks. Keep: One medium for the whole film (ink, risograph or watercolour), every frame drawn by JavaScript, music and SFX also written in code; start from a reference film you like and iterate from your own earlier projects. Swap the subject's life story. Make it with [HyperFrames](https://skills.varg.ai/skills/hyperframes.md) (`hyperframes`). - Example to remake: [@kevin_t_ngo on X, 2026-09-15, 1.2M views, 4K saves](https://x.com/kevin_t_ngo/status/2099858454043349342): "Claude Opus 5 drew every frame of this animation using JavaScript": the life of a fruit fly in a hand-inked, risograph-like style. ## Open-source repos - [vincentsch/explainroo](https://github.com/vincentsch/explainroo) (669★): Narrated explainer and product demo MP4s made by your coding agent, fully local and free How: The agent writes script.md (narration) and scenes.js (drawings keyed to words); Kokoro voices it locally, Whisper gives word times, headless Chrome draws the frames with a camera that follows the narration (Rough.js, Lucide icons, charts, code, screenshots); generated music ducks under the voice; ffmpeg outputs MP4, subtitles and chapters, with layout and speech checks. Install as a skill: https://skills.varg.ai/skills/explainroo.md - [Yusuke710/manim-skill](https://github.com/Yusuke710/manim-skill) (182★): Narration-first math-style Manim videos with a local Kokoro voice, subtitles and a timestamped review viewer How: narration.txt, then local Kokoro TTS, then Manim code written against the measured line timings, subtitle check, render and mux; a browser viewer captures timestamped notes you paste back to the agent for fixes. - [alchaincyf/huashu-art-motion](https://github.com/alchaincyf/huashu-art-motion) (6K★): 36 art styles and 9 explainer grammars (math morphs, finance chart, keynote UI, whiteboard, news collage, flat space art, kinetic type) for code-drawn animation How: Pick the grammar by subject, feed a JSON shot list or your voiceover timing, get frame-exact clips with BPM-synthesized music; qa.py measures motion and stability, a fresh agent reviews the finished film, and deliver.py blocks near-static 'slideshow' films. ## Set up 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 -y` - Grok and any agent that reads SKILL.md: `npx skills add vargHQ/skills --skill varg-ai`, or point it at the skill's SKILL.md - 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 ## Related tutorials - [How to make an animated chart video with AI](https://skills.varg.ai/make-an-animated-chart-video.md): Numbers from a CSV or a report as an animated chart: bar race, line, hero number.