Turn a science topic into a 3D explainer built from code — workflow 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. From a terminal:curl -fsSL https://varg.ai/install | shinstalls the vargai CLI (https://varg.ai/how-to/cli.md):vargai searchandvargai install <slug>with no key, every varg model aftervargai login.
A cell, atom or engine built in three.js one part at a time, zooming to a cutaway, every fact checked before animating.
- Type: Workflow · Explainers
- Slug:
code-3d-explainer - Status: live
- Publisher: varg (varg, verified)
- License: MIT
- Source: https://github.com/vargHQ/skills/tree/main/code-3d-explainer
- Works in: Claude Code, Codex, Cursor, Gemini CLI
- Requires: Bun, Google Chrome or Chromium, ffmpeg, optional: HyperFrames; varg MCP or VARG_API_KEY for narration
- Cost: Free locally. The 21 s animal-cell film rendered at 1080p in 53 s with capture.ts and 22.5 s with HyperFrames on an Apple M4 Pro, measured 2026-11-10.
- Runtime: About 12 frames a second at 1080p on a GPU
What it does
Make a 3D explainer video of something you cannot film (a cell, an atom, a virus, a protein, an engine, a reactor, a black hole, a maths idea) entirely in code: a sourced fact sheet checked by a fresh critic subagent before any 3D work, the subject built in three.js from procedural geometry (and real data such as PDB coordinates) one part per beat with a label and a one-line fact, a camera that tours the build and zooms through scales to an x-ray cutaway of the whole, a live scale bar, deterministic 1080p rendering with headless Chrome (scripts/capture.ts) or HyperFrames, and QA scripts that check label overlap, phone legibility, reading time and that every word on screen is in the approved fact sheet. Includes a working 21 s animal-cell film to copy. Use when someone asks for a 3D explainer, a science explainer video, "explain how X works in 3D", a cell / atom / virus / molecule / engine / reactor / black hole animation, "build it one part at a time", a cutaway or exploded view explained, a Kurzgesagt-style 3D explainer, a "zoom into the invisible" film, or a Fable 5.2 code explainer. Not for 2D maths and equation animations (manim-skill), short 2D motion formats (motion-formats), general HTML-to-video work (hyperframes), writing the script itself (video-script) or sound design and music (video-sound).
Use when
- Explain something you cannot film: a cell, an atom, a virus, an engine
- Build the subject part by part with labels and a scale bar
- Check every on-screen fact against sources before animating
- Render a deterministic 1080p explainer from three.js
Not for
- 2D maths animation (manim-skill)
- lyric or kinetic type videos (motion-formats)
- AI-generated footage (varg-ai)
Install
- Claude Code:
claude plugin marketplace add vargHQ/skills && claude plugin install varg@varg - Codex:
npx skills add vargHQ/skills --skill code-3d-explainer -a codex -y - Cursor:
npx skills add vargHQ/skills --skill code-3d-explainer -a cursor -y - Gemini CLI:
npx skills add vargHQ/skills --skill code-3d-explainer -a gemini-cli -y - Any agent, with the vargai CLI:
vargai install code-3d-explainer
Example output
https://s3.varg.ai/files/4325c578-378d-4c43-ae53-3cc3218df1ea/file_4ea13a6ae0ed.mp4 — The skill's own test: an animal cell built in three.js one organelle at a time, ending on a labelled cutaway (credit: varg, https://github.com/vargHQ/skills/tree/main/code-3d-explainer)
More explainers skills
- HyperFrames: Turn HTML, CSS and seekable animation into deterministic MP4s: launch films, explainers, captions, title cards.
- 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.