# Procedural 3D Story — workflow skill for 3D scenes

> **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.

Turn a myth or book into a seeded, multi-chapter procedural three.js film in one scene.html, audited frame by frame.

- **Type:** [Workflow](https://skills.varg.ai/workflows.md) · [3D scenes](https://skills.varg.ai/browse/skills/3d-scenes.md)
- **Slug:** `karpathy-3d-story`
- **Status:** beta
- **Publisher:** chencheng (云谦) (community)
- **License:** MIT
- **Source:** https://github.com/sorrycc/skills/tree/master/skills/karpathy-3d-story
- **Works in:** Claude Code
- **Requires:** Google Chrome (shot.sh uses the macOS app path), Python 3 with Pillow; ffmpeg and ffprobe for audio, Node.js (audio_sweep.js), ElevenLabs API key (ELEVENLABS_API_KEY) for the optional soundtrack
- **Cost:** Free — renders locally; the optional narration, ambience and SFX are billed by ElevenLabs
- **Adoption:** 32 GitHub stars (GitHub, 2026-10-26)

## What it does

Builds a multi-chapter animated 3D story (default 5 chapters of about 44 s) as one self-contained `scene.html`. It contains procedural three.js sets, one biped rig dressed in costumes, an FX library, a director with camera splines and captions, and optional ElevenLabs narration, ambience and SFX. Every frame is a pure function of story time with a seeded RNG, so `?chapter=N&t=X&freeze=1` reproduces any frame. `shot.sh` renders that frame synchronously in headless Chrome with `preserveDrawingBuffer` and a `toDataURL` readback shim. The skill requires at least three screenshot audit rounds over every camera keyframe, and a bundled Journey to the West build is the reference implementation (the idea comes from a Karpathy post). Caveats: the output is a playable HTML film, not an MP4, so capture it with your own frame loop. It also downloads three r160's old UMD build, hard-codes the macOS Chrome path, and suggests `pkill -9 -f "Google Chrome"`, which closes your own browser too.

## Use when

- A 3D story or procedural three.js film from source material
- An animated diorama of a book, legend or myth
- Adding a chapter to a story built with this skill

## Not for

- Direct MP4 delivery: it ships an HTML film, so capture it through HyperFrames, Remotion or a headless frame loop

## Install

- Claude Code: `npx skills add sorrycc/skills`

**Models it drives:** eleven_multilingual_v2

## Example output

https://skills.varg.ai/previews/karpathy-3d-story.mp4 — The creator's Journey to the West example for /karpathy-3d-story (5 chapters, 3.5 min of procedural three.js): the camera rises over Flower-Fruit Mountain as the stone egg glows and a beam of light breaks out. Cut 17-25 s of 218 s. (credit: 陈成 chencheng (sorrycc, @chenchengpro), https://x.com/chenchengpro/status/2085274449121788324)

## Used for

- [AI music video](https://skills.varg.ai/use-cases/music-video.md): A music video for your song: concept, a consistent lead character, shots cut on the beat, lip-sync on vocals.

## More 3D scenes skills

- [Three.js Skills](https://skills.varg.ai/skills/threejs-skills.md): 13 Three.js skills: scenes, geometry, materials, lighting, GLSL and TSL shaders, animation, post-processing, R3F.
- [Three.js Scene Composition](https://skills.varg.ai/skills/calesthio-threejs-scene-composition.md): Plan, build and capture Three.js scenes for video: absolute-time frames, seeded motion, color-safe glTF, render QA.
- [R3F Skills](https://skills.varg.ai/skills/enzed-r3f-skills.md): 11 React Three Fiber skills checked against Fiber 9.7 and three r185: Canvas, demand loops, loaders, shaders, post.
- [Three.js Architecture Effects](https://skills.varg.ai/skills/threejs-architecture-effects.md): Self-assembling 3D buildings in three.js: bricks, timber, eaves and PBR, driven by one seekable progress value.

## 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