threejs-animatic

77 / 100 · Review before installing

Check before installing. Some of what it can do is expected: a media skill usually calls an AI service over the internet.

By vargHQ/skills (GitHub) · media · 25 stars · scanned at commit 72e8109

Build a three.js animatic ("animatronic", 3D previz, blockout) of a multi-shot video: every storyboard shot becomes a schematic 3D scene drawn in code, with jointed mannequins and poses, master sets in real metres and props, a real camera per shot (START/END keys, lens in mm, move and ease), timed to the music or voiceover, reviewed in the browser with a top-down set map of every camera frustum, approved, exported as a camera plan, rendered to MP4 frame by frame (headless Chrome or HyperFrames)…

Works with any agent that supports SKILL.md skills.

What this skill can do

Downloads and installs other software

The author does not mention this.

Found in 14 places.

threejs-animatic/README.md, line 11npx skills add vargHQ/skills --skill threejs-animatic # Claude Code, Codex, Cursor, Grok, Gemini CLI, OpenCode…
threejs-animatic/SKILL.md, line 80Path B: `bun tools/make_hf.ts` → `npx hyperframes render hf` when the animatic needs HTML text, audio or
threejs-animatic/references/seek-safe-rendering.md, line 91- Validate: `npx hyperframes lint hf`, `npx hyperframes check hf`, then

Show 11 more

threejs-animatic/references/seek-safe-rendering.md, line 92`npx hyperframes snapshot hf --at <times>` on the last frame before each cut, `(ceil(cut · fps) − 1) / fps`, and
threejs-animatic/references/seek-safe-rendering.md, line 93the first frame after it. Then `npx hyperframes render hf -o renders/animatic_hf.mp4`. The demo: lint 0/0,
threejs-animatic/starter/README.md, line 17bun tools/make_hf.ts && npx hyperframes render hf -o renders/animatic_hf.mp4 # same film through HyperFrames
threejs-animatic/starter/tools/make_hf.ts, line 67console.log(`hf/ ready (${W}x${H}, ${FILM.duration} s). Next: npx hyperframes lint hf && npx hyperframes render hf -o renders/animatic_hf.mp4`);
README.md, line 19npx skills add vargHQ/skills # pick skills and agents
README.md, line 20npx skills add vargHQ/skills --skill caption-styles -a codex # one skill, one agent
README.md, line 283| Any agent (Claude Code, Codex, Cursor, Grok, Gemini CLI, Copilot, OpenCode and 60+ more) | `npx skills add vargHQ/skills` or one skill: `npx skills add vargHQ
README.md, line 297- **Update skills installed with the skills CLI:** `npx skills update`.
README.md, line 298- **Pick agents and scope:** `npx skills add vargHQ/skills --skill varg-ai -a claude-code -a codex -g -y` (`-g` global, `-y` no prompts, `--list` to see every s
README.md, line 299- **OpenCode:** `npx skills add vargHQ/skills -a opencode -g`, or copy one skill folder to `~/.config/opencode/skills/<skill>/`.
how-to/ai-storyboard-to-video/README.md, line 14npx skills add vargHQ/skills --skill varg-mockups --skill varg-previz --skill threejs-animatic --skill code-to-video-previz --skill video-animate

Runs commands on your computer

The author does not mention this.

Found in 4 places.

threejs-animatic/SKILL.md, line 46cp -r <this skill>/starter my-film/previz && cd my-film/previz
threejs-animatic/starter/tools/capture.ts, line 59const ff = Bun.spawn(['ffmpeg', '-y', '-loglevel', 'error', '-f', 'image2pipe', '-framerate', String(fps), '-c:v', 'png', '-i', '-',
threejs-animatic/starter/tools/cdp.ts, line 26const proc = Bun.spawn([

Show 1 more

threejs-animatic/starter/tools/check.ts, line 43const sheet = Bun.spawnSync(['ffmpeg', '-y', '-loglevel', 'error', '-framerate', '1', '-i', join(out, 'f_%03d.png'),

Connects to the internet

This is disclosed by the author in the skill's SKILL.md or README. Expected for a media skill.

Found in 6 places.

threejs-animatic/starter/js/main.js, line 13try { const r = await fetch('data/edits.json', { cache: 'no-store' }); if (r.ok) edits = await r.json(); } catch { /* first run */ }
threejs-animatic/starter/js/main.js, line 146if (FILM.audio) fetch(FILM.audio).then(r => (r.ok ? r.blob() : Promise.reject(r.status)))
threejs-animatic/starter/js/main.js, line 280const r = await fetch(path, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });

Show 3 more

threejs-animatic/starter/serve.ts, line 17async fetch(req) {
threejs-animatic/starter/tools/cdp.ts, line 40page = (await (await fetch(`http://127.0.0.1:${port}/json/list`)).json()).find((t: any) => t.type === 'page');
threejs-animatic/starter/tools/cdp.ts, line 43const ws = new WebSocket(page.webSocketDebuggerUrl);

Safer alternatives

Low-risk skills in the same category (media) that look related. Check that one does what you need.

Install

Paste this into your terminal. It downloads exactly the version we scanned, not whatever is newest.

if [ -e ~/.agents/skills/'threejs-animatic' ] || [ -L ~/.agents/skills/'threejs-animatic' ]; then echo 'A skill folder named threejs-animatic already exists — not replacing it' >&2; false; else d=$(mktemp -d) && git clone --quiet --filter=blob:none --no-checkout 'https://github.com/vargHQ/skills' "$d" && git -C "$d" checkout --quiet '72e8109188e3366ba8d365902a84d6b237dec1d7' -- 'threejs-animatic' && mkdir -p ~/.agents/skills && cp -R "$d"/'threejs-animatic' ~/.agents/skills/'threejs-animatic' && rm -rf "$d"; fi

Codex reads ~/.agents/skills directly. For Claude Code, Cursor, Copilot, Gemini CLI, Antigravity or OpenCode, also link it. For Claude Code: ln -s ~/.agents/skills/'threejs-animatic' ~/.claude/skills/'threejs-animatic' (other agents: ~/.cursor/skills, ~/.copilot/skills, ~/.gemini/skills, ~/.gemini/config/skills, ~/.config/opencode/skills). Or install through the finder skill, which does both.

Badge for your README

The badge for vargHQ/skills shows the score of its lowest-scoring skill.

SkillTrust badge for vargHQ/skills

[![SkillTrust](https://zalavijaysinh.github.io/skilltrust/badges/vargHQ/skills.svg)](https://zalavijaysinh.github.io/skilltrust/repos/vargHQ/skills/)

Score history

Date	Version	Score
2026-11-07	`72e8109`	80