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 hashgraph-online/awesome-codex-plugins (GitHub) · media · 1,563 stars · scanned at commit 6d2e63f

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 13 places.

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

Show 10 more

plugins/vargHQ/skills/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
plugins/vargHQ/skills/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,
plugins/vargHQ/skills/threejs-animatic/starter/README.md, line 17bun tools/make_hf.ts && npx hyperframes render hf -o renders/animatic_hf.mp4 # same film through HyperFrames
plugins/vargHQ/skills/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`);
plugins/vargHQ/skills/README.md, line 19npx skills add vargHQ/skills # pick skills and agents
plugins/vargHQ/skills/README.md, line 20npx skills add vargHQ/skills --skill caption-styles -a codex # one skill, one agent
plugins/vargHQ/skills/README.md, line 294| 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
plugins/vargHQ/skills/README.md, line 308- **Update skills installed with the skills CLI:** `npx skills update`.
plugins/vargHQ/skills/README.md, line 309- **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
plugins/vargHQ/skills/README.md, line 310- **OpenCode:** `npx skills add vargHQ/skills -a opencode -g`, or copy one skill folder to `~/.config/opencode/skills/<skill>/`.

Runs commands on your computer

The author does not mention this.

Found in 4 places.

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

Show 1 more

plugins/vargHQ/skills/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.

plugins/vargHQ/skills/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 */ }
plugins/vargHQ/skills/threejs-animatic/starter/js/main.js, line 146if (FILM.audio) fetch(FILM.audio).then(r => (r.ok ? r.blob() : Promise.reject(r.status)))
plugins/vargHQ/skills/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

plugins/vargHQ/skills/threejs-animatic/starter/serve.ts, line 17async fetch(req) {
plugins/vargHQ/skills/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');
plugins/vargHQ/skills/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/hashgraph-online/awesome-codex-plugins' "$d" && git -C "$d" checkout --quiet '6d2e63f73f845eb5dd94c1debba627d4b6e32fba' -- 'plugins/vargHQ/skills/threejs-animatic' && mkdir -p ~/.agents/skills && cp -R "$d"/'plugins/vargHQ/skills/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 hashgraph-online/awesome-codex-plugins shows the score of its lowest-scoring skill.

SkillTrust badge for hashgraph-online/awesome-codex-plugins

[![SkillTrust](https://zalavijaysinh.github.io/skilltrust/badges/hashgraph-online/awesome-codex-plugins.svg)](https://zalavijaysinh.github.io/skilltrust/repos/hashgraph-online/awesome-codex-plugins/)

Score history

Date	Version	Score
2026-11-12	`6d2e63f`	77
2026-11-11	`4070676`	77
2026-11-10	`f620aba`	77
2026-11-09	`3062ea3`	77
2026-11-08	`057d789`	77
2026-11-06	`e012fe1`	37