threejs-earth-render — Claude Code skill for 3D globe GIFs
Clones the Three.js Earth repo, renders a globe route animation with Puppeteer frame capture, and writes a GIF or MP4.
npx skills add vibe-motion/skills --skill threejs-earth-render -a claude-codeWhat threejs-earth-render does
The skill drives the vibe-motion/threejs-earth demo through scripts/render_threejs_earth.py. That script pulls the repository into a workspace folder or fast-forwards an existing checkout, serves the app over local HTTP, and grabs each frame as a PNG. ffmpeg then turns the sequence into a single file.
Frame stepping goes through window.__SCENE_3D_EXPORT__.setFrame(frame), so any still can be reproduced on its own. The starting output is a 30 fps GIF, 448 px wide; --output-width 0 keeps the native 2048 by 1152 capture instead. Hangzhou to Paris is the shipped route, set in src/routeConfig.js.
Custom routes are edited in that same file, and the render has to run with --skip-update — otherwise the repo update wipes the changes. You need git, node, npm and ffmpeg on the machine. Network access matters too: the clone, the Three.js CDN imports and the Puppeteer install all depend on it.
What it helps with
- render a flight-path animation on a 3D globe to a file
- capture a Three.js scene as a PNG frame sequence
- encode a globe route animation as GIF or MP4
- swap the route cities and re-render without losing the edits
- record a browser 3D scene with repeatable frames
Example prompts for the agent
- Render Three.js Earth to
out/earth.gif - Render the globe using the route in
src/routeConfig.jsand skip the repo update - Capture the scene at native resolution and save it as MP4
How to install threejs-earth-render
1Skills CLI (Vercel)
npx skills add vibe-motion/skills --skill threejs-earth-render -a claude-code2Manually: put the files in place
~/.claude/skills/threejs-earth-render/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/threejs-earth-render/
1Skills CLI (Vercel)
npx skills add vibe-motion/skills --skill threejs-earth-render -a codex2Manually: put the files in place
.agents/skills/threejs-earth-render/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add vibe-motion/skills --skill threejs-earth-render -a cursor2Manually: put the files in place
.cursor/skills/threejs-earth-render/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install vibe-motion/skills threejs-earth-render2Manually: put the files in place
.github/skills/threejs-earth-render/SKILL.md1Skills CLI (Vercel)
npx skills add vibe-motion/skills --skill threejs-earth-render -a gemini-cli2Platform CLI
gemini skills install https://github.com/vibe-motion/skills --path threejs-earth-renderManually: put the files in place
.devin/skills/threejs-earth-render/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add vibe-motion/skills --skill threejs-earth-render -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about threejs-earth-render
How do I install threejs-earth-render in Claude Code?
Run npx skills add vibe-motion/skills --skill threejs-earth-render -a claude-code. The skill lands at ~/.claude/skills/threejs-earth-render/SKILL.md.
What does threejs-earth-render do?
It clones or updates the threejs-earth repository, renders the globe route animation under Puppeteer, and encodes the capture to GIF or MP4 with ffmpeg.
What is required for a render to work?
git, node, npm, ffmpeg and network access. Without the network the clone, the Three.js CDN imports and the Puppeteer install all fail.
