motion

モーション

パス：${CLAUDE_SKILL_DIR} はこの SKILL.md を含むフォルダー、${CLAUDE_PLUGIN_ROOT} はその 2 階層上にあるプラグインフォルダーを指します。

質問はすべて質問ボックスに入力します：AskUserQuestion ツール（選択肢は 2～4 個、推奨項目を先頭に）。

各ビートに、そのセリフ専用のクリップを 1 つ作成します。テンプレートに内容を当てはめるだけにはしません。テンプレートカードは代替手段です。 M="${CLAUDE_SKILL_DIR}/scripts/motion.py"。パスは style-edit と同様、ライブラリからの相対パスです。スクリプトは Mac と Linux では python3、Windows では py で実行します。

visuals.json (style-edit step 3) -> motion.py pick -> motion/<id>/{index.html, brief.md, beat.json}
  -> one clip-builder agent per clip -> motion.py check (gates + render) -> motion.py place
  -> visuals.json video_card beats -> plan.py -> stills -> render (the clip plays on its word)

0. 準備はできていますか？

python3 "${CLAUDE_PLUGIN_ROOT}/skills/setup/scripts/setup.py" doctor で motion clips が ok と表示されます。セットアップではデフォルトでインストールされます。motion の手順より前にインストールした場合は含まれていないため、pick が自動でインストールします（数秒、初回のみ）。インストールに失敗した場合、pick は Animations fell back: ... を一度だけ出力し、クリップ用フォルダーは作成しません。その行をユーザーに一度伝えてください。ビジュアルテンプレートは引き続き使用でき、テンプレートが文字だけのビートにはカードが作成されません（plan.py）。

1. ビートを選ぶ

python3 "$M" pick edits/<name>

visuals.json（style-edit の手順 3、または visual-prep エージェントが作成）と、style.json の motion ブロックを読み込みます： {"engine": "clips" | "templates", "amount": 0-1, "kinds": {"counter", "list", "flow", "before_after", "ui_demo", "curve", "logo": true|false}, "look": "default"}。動くテンプレート（likes、notes、flow、side_by_side、progress、terminal、chat、toasts、curve、 logo_cluster）に割り当てられ、1 秒以上の余裕があるビートはすべてクリップになります。ただし、対象は最大でそのうち amount の数です。それ以外（カード、キャプチャ、ステッカー）に割り当てられたビートでも、セリフが自然なリスト（4 項目以上：notes）、数値（likes）、手順（最初に……次に……：flow）、または変更前と変更後（side_by_side）に当てはまり、その種類が有効で、かつセリフ内にすでにアニメーションがない場合は、セリフごとに 1 つクリップになります。クリップがチェックに通らなければ、元のビートに戻ります。各クリップには edits/<name>/motion/<id>/ が作成されます。そこにはサイズ、長さ、見た目、セリフのタイミングを反映したテンプレート、beat.json（カットのタイムライン）、brief.md が含まれます。見た目については references/looks.md（default、またはスタイルのパレットとフォント）を参照してください。チャットでユーザーから「X と言っている部分をアニメーションにして」と依頼された場合は、最初に visuals.json のそのビートを追加または変更してから（style-edit の references/shapes.md）、pick を実行します。

2. ビルド：クリップごとにクリップビルダーエージェントを起動し、すべてを 1 メッセージで実行する

pick が出力した motion/<id>/brief.md ごとに、clip-builder エージェント（${CLAUDE_PLUGIN_ROOT}/agents/clip-builder.md、opus、バックグラウンド）を、その brief のフルパスを指定して起動します。すべてのクリップを 1 つのメッセージで起動してください。各エージェントは brief と references/clip-brief-card.md だけを読み込み、index.html を作成して、motion.py check を最大 3 回実行します。メインセッションではクリップを作成しないでください。

カット全体の編集では、cut スキルが visual-prep の完了後すぐにエージェントを起動します。これにより、ユーザーがカットを確認している間にクリップが完成し、カットの承認時には準備が整っています。

3. クリップをチェックする（各エージェントが実行する内容）

python3 "${CLAUDE_PLUGIN_ROOT}/lib/ai_editor/run.py" "$M" check edits/<name>/motion/<id>

順に、check_clip.py（ソース上の注意点、無料）、hyperframes lint、hyperframes check --at-transitions、レンダリング、check_motion.py（停止、急上昇、フレーム 0 のフラッシュがないこと）、check_composition.py（参考情報）、measure_ink.py を実行し、続いて renders/sheet.png（1 fps）と renders/strip.png（最初の 1.2 秒を 10 fps で表示）を確認します。gates.json を書き出します。しきい値については references/clip-brief-card.md を参照してください。各注意点が問題になる理由については references/build-loop.md を参照してください。すべてのルールについては references/visual-system.md を、1 つのクリップに複数のアイデアを含める場合については references/scenes.md を参照してください。

4. 確認してから配置する

エージェントが戻ったら、それぞれの renders/sheet.png を該当するセリフと照らし合わせて自分で確認します（そのビートについて事前に説明を受けていない初見の読者のほうが適しています。セリフの内容が伝わるでしょうか）。意図どおりに見えないクリップがあれば、エージェントにメモを送り、もう1ラウンド行います。その後：

python3 "$M" place edits/<name>

合格したクリップは、レンダー（images/motion-<id>.mp4）を使う video_card ビートになります。clip_motion.py は、カードが画面から消える0.25秒前に動きが終わるよう start_s を設定します。ラウンドを重ねても合格しなかったクリップは、テンプレートのビートのままです（fallback に保持され、place で復元されます）。その後、スタイル編集はステップ4（plan、stills、render）から続行します。再ビルドしたら、place を再実行してください。

5. 動きを確認する

静止画ではちらつきを見落とします。レンダー後に、クリップの表示開始位置を少なくとも4か所、セーフゾーンを描画したストリップで確認します：

python3 "$M" strips edits/<name>/render.mp4 --at <t1>,<t2>,<t3>,<t4> --out edits/<name>/stills/motion-strips.png --safe

各行には、その時刻の前0.4秒から後1.1秒までを10 fpsで表示します。あるフレームに映って次のフレームでは消えている要素、カード間の空白フレーム、表示中にまったく動かない要素、顔に重なるもの、枠からはみ出すものがないか確認します。

クリップへのメモ

クリップの表示中にレビュー画面でメモを残す場合（「カウンターを大きく」「青を使う」など）：

python3 "$M" note edits/<name> "make the counter bigger" --at <note time>

メモはそのクリップの notes.md に書き込まれ、クリップが表示されます。1つの clip-builder にそのクリップの brief.md を渡し（追加確認は最大2回）、続いて place、plan、edit.py patch（style-edit）を実行します。そのクリップだけが再ビルドされ、その区間だけが再レンダーされます（配置したレンダーにはそれぞれ固有のファイル名が付いているため、patch で変更を認識できます）。

モーションライブラリ

ユーザーがレンダーを承認したら、python3 "$M" save edits/<name> を実行します。配置した各クリップは $AI_EDITOR_HOME/motion-library/<id>/ に保存されます（構成、brief、サムネイル、元になったスタイル）。pick は同じ種類のビートとして、最も新しいもの（または「use again」とマークされたもの）を start.html に渡します。これはエージェントがタイミングを調整して変更するための出発点であり、コピーではありません（変更されていないものは check が失敗します）。アーカイブ済みのクリップは使用されません。ウィンドウのスタイルページにはクリップが一覧表示されます（Archive、Delete、Use again）。チャットでは python3 "$M" library [archive|unarchive|use <id>] を実行します。

設定

style.json の motion（スタイルページの Motion セクションでは、ユーザーの修正内容を通じて設定が書き込まれます）：amount（0はなし、0.5は少し、1は多い。未設定の場合は、測定されたスタイルのアニメーション比率）、kinds（それぞれをオンまたはオフ）、look（default、editorial、editorial-dark、mono、poster-red、poster-green、poster-blue）。engine: "templates" を指定すると、テンプレートカードが維持されます。

50/50スタイル

分割レイアウトのスタイル（style.json の layout.mode: "split"、サンプルの 50/50）：各クリップはパネルの背景上にあるアートボックス向けに作成され、端から端まで再生されます。panel ゲート（四隅に背景があり、インクの占める割合が55%超）と4つの検証（verify.mjs）でブロックします。バリエーション、ルール、切り抜きについては references/fifty-fifty.md を参照してください。

モーションデザインスタイル

ボードレイアウトのスタイル（style.json の layout.mode: "board"、サンプルの Motion design、16:9）：クリップは話者の横に表示されるオーバーレイで、board の外観（ほぼ黒の背景、銀白色のインク）に合わせた1200x964です。ロゴはクリップではなく、キャンバス上のタイルとして配置されます。ルールについては references/board.md を参照してください。

スキルスタイル

ユーザー独自のスタイルスキルには、1行の指定で専用アニメーションを適用できます：「アニメーション：モーションスキルを使用」。

スクリプトが停止した場合

メッセージ	対応
the motion tools are not installed / Animations fell back	setup.py motion を実行してから、同じコマンドを再実行します。再度失敗した場合は、そのメッセージを一度だけ伝え、クリップなしで続行します
確認後もクリップが FAIL のまま（作成時に3回、メモごとに追加で2回）	そのままにします。place でテンプレートが復元されます
no frames read（ストリップ）	レンダーのパスが間違っているか、レンダーに失敗しています。style-edit のステップ7を確認してください

ファイル

• scripts/motion.py（pick、check、place、status、strips）、check_clip.py、check_motion.py、 check_composition.py、measure_ink.py、clip_motion.py：それぞれに demo セルフチェックがあります。
• template/：各クリップの作成元となる HyperFrames コンポジションです。
• scripts/verify.mjs：Chrome でフレームごとに 4 つの検証（clipped、rails、neighbour、reading）を行います。
• references/：clip-brief-card.md（すべてのエージェントが読む中核資料）、visual-system.md、build-loop.md、 scenes.md、looks.md、fifty-fifty.md、board.md。
• HyperFrames は Apache-2.0 ライセンス（github.com/heygen-com/hyperframes）、GSAP は標準の無償ライセンス （gsap.com/standard-license）のもとで提供されています。どちらもセットアップ時に npm からインストールされ、このリポジトリには同梱されていません。