mcpField
S
stick-figure

stick-figure

github.com/artemnovitckiiクリエイティブ・メディア755105 回インストール2 週間前に更新
リポジトリ

stick-figure について

stick-figure は、スクリプト、コードで描くシーン、ナレーション、効果音を組み合わせて短編アニメーションを制作するスキルです。単語単位の同期、ショットのタイミング調整、MP4 のレンダリングを含むサンプルと手順を備えています。

主な機能

  1. 01プロジェクトフォルダーで各リールを管理
  2. 02コードでキャラクターとシーンを描画
  3. 03ナレーションの単語タイミングにショットを同期
  4. 04ナレーションと合成音声を作成
  5. 05ショットをレンダリングして MP4 を出力

活用シーン

  1. 01アニメーション解説リールの制作
  2. 02ナレーション差し替え後のショット再調整
  3. 03確認済みスクリプトから短編動画を作成

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/artemnovitckii/claude-animation-skills --skill stick-figure

インストール後、Claude Code で/stick-figureを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

engine/
make.sh
engine/template/
audio.py
captions.json
script.json
engine/template/audio/
words_ref.json
engine/template/web/
chars.js
env.js
index.html
lib.js
main.js
shots.js
warp.js
words.js
engine/template/web/fonts/
OFL-lora.txt
OFL-poppins.txt
engine/tools/
align.py
render.js
tts_elevenlabs.py
tts_kokoro.py

詳細

/stick-figure

┌──────────────────────┐
│   ☀      ☁           │  bright sky, sea, props drawn in code
│      ◯   ◯           │  stick people with big white heads, expressive faces
│     /|\ /|\          │
│     / \ / \  🛢       │
│     eye patch        │  1-2 word captions, lowercase, ~70% down
└──────────────────────┘

完成例も付属しています。engine/template は、37 秒の完成済みリール「もし海賊の眼帯が、目を失ったこととはまったく関係なかったら？」です。

初めて使うとき

このスキルのフォルダーは、Claude Code が読み込むときに表示する「Base directory」です。

SKILL_DIR="<base directory of this skill>"
ENGINE="$SKILL_DIR/engine"
KIT=$(python3 -c 'import os,sys;print(os.path.realpath(os.path.join(sys.argv[1],"..","..","kit")))' "$SKILL_DIR")
[ -x "$KIT/.venv/bin/python" ] && [ -d "$KIT/models" ] || bash "$KIT/setup.sh" --voice   # ~1 GB of voice models, once
PY="$KIT/.venv/bin/python"; export NODE_PATH="$KIT/node_modules"

ffmpeg、Node、Python 3.9 以降が必要です。例を見るには、cp -r "$ENGINE/template" ~/reels/pirate && bash "$ENGINE/make.sh" ~/reels/pirate を実行します。

仕組み

リールは 1 つのフォルダーで構成されます。

  • script.json：ナレーション。各エントリーは 1 文です。
  • captions.json：キャプションのテキスト置換（任意）（{"twenty five": "25"}）。
  • web/shots.js：ショットリスト。各ショットは SHOTS.push({start, end, tr, draw(ctx, lt, t)}) の形式で、ナレーションの秒数を指定します。lt はショット内の時間、tr はショットからのトランジション（'whip' または 'cut'）です。
  • web/lib.js（イージング、キーフレーム kf、図形、テキスト）、web/chars.js（スティックフィギュアのリグ drawStick、帽子、顔、腕の IK、眼帯）、web/env.js（空、雲、海、船、甲板、樽、大砲、ランタン、甲板下）、web/main.js（ウィップブラー、ビネット、粒子、キャプション）。新しい小道具は env.js または新規の env2.js に追加し、web/index.html に登録します。
  • audio.py：音楽と効果音。すべてコードで合成し、ナレーションの秒数に配置します。

make.sh は音声を生成し、各単語のタイミングを合わせ（audio/words_new.json）、音声をミックスして、ショットを並列レンダリングし、<folder>/<folder name>.mp4 に書き出します。

タイミング： audio/words_ref.json は、ショットのタイミング合わせに使った音声です。音声が変わっても単語が変わらない場合、make.sh がショットを新しいテイクに合わせて調整するため、新しい録音に合わせた編集は不要です。台本を変更した場合は、audio/words_ref.json を削除し（次のテイクが基準になります）、shots.js のタイミングを調整してください。

手順

  1. 台本。 38〜40 秒で約 110〜120 語にし、1 文につき 1 つのアイデアを入れます。「もし〜だったら」というフック、一般的な通説、「But」での転換、展開していく例、仕組みを見せるショットを 1 つ、そしてフックへの答えとなる締めを盛り込みます。アニメーションを作る前にユーザーに見せてください。
  2. 事実確認。 すべての主張を情報源で確認します。仮説には「科学者たちは〜と考えています」のように留保を付けてください。
  3. フォルダー。 cp -r "$ENGINE/template" <reel> を実行し、audio/ の中身を空にして、script.json（および captions.json）を差し替えます。
  4. 音声。 フォルダー内で "$PY" "$ENGINE/tools/tts_kokoro.py"（無料）を実行するか、ユーザー自身の録音を使います。または、ElevenLabs と ELEVENLABS_API_KEY を使い、"$PY" "$ENGINE/tools/tts_elevenlabs.py" audio/vo_el.mp3 を実行します。テイクを audio/vo.wav に置き、続けて "$PY" "$ENGINE/tools/align.py" audio/vo.wav を実行し、audio/words_new.json の単語ごとのタイミングを確認します。
  5. ショット。 web/shots.js を書き直します。セットアップは約 10〜12 個、ほとんどは 2〜4 秒にし、解説ショットは長めにします。新しいアイデアには新しいセットアップを用意します。1 フレーム目からフックを動きのある状態で始めます。顔や重要な小道具はキャプション帯（y 約 1250〜1420）を避け、Instagram のセーフエリア（x 100〜980、y 220〜1500）内に配置します。
  6. 静止画。 フォルダー内で node "$ENGINE/tools/render.js" stills 1.5,4.2,9.0 を実行すると、stills/ に書き出されます。動きが最も多い場面を確認し、全体をレンダリングする前に修正してください。
  7. 音声。 単語ごとのタイミングに合わせて audio.py のキューを編集します。
  8. ビルド。 bash "$ENGINE/make.sh" <reel> を実行します（audio/vo.wav は保持されます。差し替える場合は kokoro、elevenlabs、またはファイルを指定します）。コア数が多いマシンでは WORKERS=8 を設定します。AUDIO_ONLY=1 を指定すると、再レンダリングせずに音声を再ミックスします。
  9. 引き渡し。 <reel>/<name>.mp4 を渡します。

スタイル

  • キャプション：Poppins Bold、白字に濃いアウトライン、1〜2 語、小文字、句読点なし（main.js の capText() が処理します。数字と % はそのままにします）。画面上で em ダッシュは使いません。
  • 明るく彩度の高い配色、インク風のアウトライン（#221c22）、柔らかな接地影、手持ちカメラ風の揺れを加えたゆっくりとした寄り、モーションブラー付きのウィップトランジション。インパクトにはバースト、揺れ、フラッシュを加えます。
  • 効果音はナレーションの下に配置します（ゲインは約 0.38）。音楽は静かな撥弦楽器の伴奏にし、ナレーションの下では音量を下げます。冒頭から大音量のループを流すことはありません。

コメント

Markdown 対応