---
title: "Turn a science topic into a 3D explainer built from code — AI video generator workflow for explainers"
description: "A cell, atom or engine built in three.js one part at a time, zooming to a cutaway, every fact checked before animating. Install in Claude Code, Codex and Grok with one command."
url: https://varg.ai/how-to/skills/code-3d-explainer
updated: 2026-11-10
---

# 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 `.md` to its path. Before generating anything, show the person the options on the how-to page. From a terminal: `curl -fsSL https://varg.ai/install | sh` installs the vargai CLI (https://varg.ai/how-to/cli.md): `vargai search` and `vargai install <slug>` with no key, every varg model after `vargai 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](https://varg.ai/how-to/workflows.md) · [Explainers](https://varg.ai/how-to/browse/skills/explainers.md)
- **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](https://varg.ai/how-to/skills/hyperframes.md): Turn HTML, CSS and seekable animation into deterministic MP4s: launch films, explainers, captions, title cards.
- [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.