mr0ibrahim/motion-graphics

モーショングラフィックススタジオ

動画はコードからレンダリングされます。純粋な seek(t) を持つHTMLページをPlaywrightでフレームごとに撮影し、ffmpegでエンコードします。テキスト、UI、チャート、図、モーションは常にコードです。 AIモデルはイラスト、実写プレート、音声を提供します（references/ai-assets.md）。

ステージゲート（決してスキップしないこと。各段階で承認を得ること ✋）

1. ブリーフ: 目的、視聴者、プラットフォーム/フォーマット、尺、言語 + 方言、CTA、ブランド、VOの有無、事実。ジャンルを選択する（references/genres.md）。これにより、構造、エネルギープリセット、フックが決まります。
2. コンセプト ✋: 真に異なる3つのアイデア。それぞれ1行とそのフック。ユーザーが1つを選びます。
3. スクリプト + ストーリーボード ✋: ビートシート（シーンごとに1メッセージ、フック ≤ 1.5秒）、スタイルバイブル、ヒーローアセット（GenerateImage → cut2.py）。シーンをスタイルフレームとして構築し、node scripts/storyboard.mjs film.html storyboard/name --template templates/storyboard.html --title "…" を実行すると、フィルム自体から生成されたhtml/png/pdf/jsonが得られます（references/storyboard.md）。ストーリーボードが承認されるまで、完全なアニメーションは行われません。
4. アニマティック ✋: node scripts/render.mjs film.html checks_layout.txt --check でレイアウト問題0、見逃したキュー0、ページエラー0を確認します。次に、30fpsのブラーなしドラフト（render_chunks.mjs film.html out_draft 30 1）をSFXミックスで作成し、タイミングレビューを行います。
5. 最終: render_chunks.mjs film.html out 60 4 → sfx.mjs → mix.sh → export.sh → qa.sh をマスター および ソーシャルファイルに対して実行します。その後、コンタクトシートとトランジションシートを確認します（references/render-qa.md）。この後の修正はスコープを限定し、依頼された部分のみを変更します。

ハードルール（それぞれは実際の失敗から得た教訓です）

1. グレインは静的: 1回だけ描画されるシード付きタイル。フレームごとに再ランダム化しないでください。スタッタースキャンのFLICKERテストはOKである必要があります。
2. デフォルトでは音楽なし: モーション同期SFX + VO。音楽はリクエストがあり、ライセンスが許諾された場合のみ使用します（references/sound.md）。
3. 単一のモーションシステム: 持続時間は ENERGY トークンからのみ取得します。スプリング z ≥ 0.78（オーバーシュート ≤ 2%）、シェイクなし、タイプ時のバウンスなし、長い移動には弧、すべての状態変更にクロスフェード（references/motion-system.md）。
4. チャンクレンダラでレンダリング（render_chunks.mjs）：チャンクごとに新しいブラウザ、リトライ、同じコマンドを再実行することで再開可能。約20秒以上の動画では、長時間の単一プロセスレンダリングは絶対に行わないでください。
5. 適切に文字起こし: align.py（large-v3、VADオン/オフパス、ギャップパス、スクリプトに強制）→ words.json。単一のwhisperパスは使用しないでください。
6. キャプションはそのシーンに属する: シーンと共にワイプおよびプッシュされ、シーンの色を使用します。各要素は、発話された単語に対して80% ONの状態にします（±2フレーム）。
7. スタイル: イラスト調で一貫したキャラクター（1つの参照画像 → すべてのポーズ）。テクニカル説明動画ではコンセプトビジュアル（フロー、図、テーブル、比較、タイムライン）を使用し、発話されたフレーズごとに計画します。装飾的なストックは使用しません。
8. 2つの書き出し: 60fpsのマスター + 30fpsのスマートフォン/ソーシャルファイル。添付ファイルとして送信します。直接ダウンロードリンク、アップロード、または投稿は、ユーザーの明示的な許可がある場合のみ行います。
9. 長尺（3～10分）: チャプターを計画し、シーン数（約4～7秒に1シーン）、ペーシングのバリエーションサイクルとビジュアルバリエーションを設定し、チャプターごとに1ページとします（references/genres.md → 長尺）。
10. パッケージは分割したままに: scripts/、references/、templates/。巨大な1ファイルにしないでください。

さらに: アラビア語は単語全体でのみアニメーションします（references/arabic-rtl.md）· フレーム内にAI生成テキストを入れない · 架空の製品、価格、評価には SAMPLE とラベル付けする · 事実はユーザーからのみ提供される · ヒーローはフレームの60～70%を占める · 広告では3種類以上の異なるトランジションを使用し、同じものを2回連続で使用しない（references/transitions.md）· 1秒以上の無音は不可。

デフォルト（選択したものを明示）

9:16 1080×1920（ソーシャル用）、16:9（ウェブ/YouTube用）· 広告とリールはエネルギー ad、VO説明動画は explainer、ラグジュアリー/長尺チャプターは calm · 60fpsマスター + 30fpsソーシャル · −14 LUFS、トゥルーピーク ≤ −1.5 dBTP · SFX + VO、音楽なし · 静的グレイン 0.06 · イラストフラットスタイル、1つのアクセントカラー、Noto Kufi Arabic / Cairo + Figtree。

セットアップ

すべての scripts/、templates/、references/ パスは、このスキル自身のフォルダ（このSKILL.mdがあるフォルダ。インストール場所は .claude/skills/motion-graphics、.agents/skills/motion-graphics、~/.cursor/skills/motion-graphics など）を基準とします。これを $SKILL_DIR と呼び、プロジェクトフォルダから node "$SKILL_DIR/scripts/render.mjs" … のようにスクリプトを実行します。$SKILL_DIR 内で一度 npm i を実行します。 npm i（Playwright）、次に npx playwright install chromium を一度実行します。ffmpeg/ffprobe、Python 3（numpy/scipy/pillow）（QA、cut2用）、および align.py 用の pip install faster-whisper も必要です。

動作例（GitHubリポジトリ mr0ibrahim/motion の examples/ 内。インストール時にはコピーされません）: demo-ar/（13秒の湾岸アラビア語アプリ広告：RTLキネティックタイポグラフィ、AIキャラクター、パララックス、カメラプッシュ、ズーム/プッシュ/アイリス/スプリット）· demo/（10.5秒の英語SAMPLE広告）。