risingjerry/motion-skill

コードモーショングラフィックス（motion）

動画はコードで書かれています。すべてのフレームは時間tから計算されるため、「ここを少し遅く」は数値を変更して再レンダリングするだけで済み、撮り直しは不要です。 AIによる画像生成・動画生成モデルは一切使用しません。画面に表示されるものはすべて、実際の素材またはコードから生成されます。

最初にレイヤーを選択

3つのレイヤーは同じワークフローを使用しますが、下に行くほど実写に近づき、レンダリング時間も長くなります。動画の要件に応じて選択し、混在させることも可能です。

レイヤー	画面の内容	適切な用途	開始点
1. 2Dモーション	実際のロゴ、実際のスクリーンショット、シェイプが連続的に変形	アプリ、ソフトウェア、ブランドのオープニング	templates/2d.html
2. ブラウザ3D	インターフェースカードを3D空間に配置、カメラ移動、シルエットトランジションで実写へ接続	マルチスクリーンUIのデモ、実写と組み合わせた動画	templates/3d.html、scripts/silhouette.py
3. Blenderスタジオ撮影	実在製品の3Dモデル、1灯ライティング、リアルなマテリアル	ヘッドフォン、スマートフォン、カップなどの実在製品	scripts/blender/studio.py

詳細説明: references/layers.md

ワークフロー（順番通りに、手順を飛ばさない）

1. 要件を明確にし、本物の素材を準備する。 製品は何か、誰に見せるのか、尺はどれくらいか、どのプラットフォームで公開するのか、最後に視聴者に何をしてほしいのかを確認します。素材は常に本物を使います: 公式ロゴファイル、実機のスクリーンショット（通知、アバター、電話番号は事前に消去）、ブランドカラーとフォント。アプリストアのプロモーション画像をインターフェースとして使ったり、記憶だけでロゴを描いたりしないでください。 実在製品の場合は、複数のアングルから撮影した写真を用意します。できればユーザー自身が撮影した実物写真が理想的で、後でモデルの比率を確認するために使用します。
2. エンディングを決める。 エンディングはアイコンとワードマークのみ（または実写への接続）とします。「今すぐダウンロード」「XXを開く」といったコールトゥアクションや、「コンセプト動画」などの免責事項の小さなテキストは追加しません（説明が必要な場合は概要欄に記載します）。
3. 番号付きストーリーボードを作成し、承認を得る。 5～10ショットで構成し、各ショットに以下を明確に記載します: タイムコード、画面内容、アクション、次のショットへのトランジション方法、画面上のテキスト。 shots.jsonを作成し、node scripts/render.mjs board shots.json board.pngを実行して確認用の画像を出力します。 承認なしに本番制作に進まないでください。この段階での変更が最もコストが低くなります。フォーマットは references/storyboard.md を参照。
4. ページを構築する。 テンプレートと templates/motion-kit.js をアセットフォルダにコピーします。すべてのビート（タイミング）はページ上部の BEATS に記述し、リズムを変更する場合はここだけを修正します。 ページの規約は references/html-engine.md を参照。
5. フレーム単位でチェックし、その後で他者に見せる。 render.mjs still でキーフレーム（各トランジションで3～4ポイント、静止した状態だけでなく）を抽出し、 scripts/sheet.py で1枚の画像にまとめ、自分で確認します。その後、チェックスクリプトを実行します:
   • render.mjs probe + scripts/layout_check.py probe: テキストと主体の距離は最低40px（4K時）、主体は画面中央付近にあること。
   • 3D: scripts/blender/motion_check.py（貫通チェック、フレームあたり最大回転角度6°、回転速度の急変なし）、scripts/seam_check.py（ヒンジ部分のズレ ≤ 1px）。 チェックリストは references/checklist.md を参照。
6. 4Kのみを出力する。 node scripts/render.mjs video page.html ファイル名-4K.mp4 --scale 2（1920x1080ページ→3840x2160）。 1台のPCで同時に実行する4KレンダリングまたはBlenderレンダリングは1つだけにします。4K完成動画からフレームを抽出してチェックする場合は: python3 scripts/sheet.py video ...。
7. 画面が確定してからサウンドを追加する。 画面を変更すると、すべてのビートが影響を受けます。BGMと効果音は両方必須です。BGMの最も強いビートは、動画のキービジュアルポイントに合わせます。 全体で-14 LUFS、トゥルーピークは-1 dBTPを超えないこと。ビデオストリームはそのままコピーし、再エンコードしないでください。詳細は references/sound.md を参照。
8. 修正に対応する。 ラウンドごとにまずバックアップを取り、修正後に再度フレームを抽出してチェックし、何を変更したかを平易な言葉で明確に伝えます。新しいバージョンとして別名保存し、相手のファイルを上書きしたり削除したりしないでください。 確認した内容を正確に伝えます: 静止フレームは再生と同じではない、画像を見ることはミックスを聴くことと同じではない。

動画を魅力的にするためのルール

完全な説明は references/transitions.md と references/blender-3d.md にあります。ここでは必ず覚えておくべきことです:

• 各ショットは前のショットから変化する。 フェードイン、フェードアウト、クロスディゾルブは使いません。同じオブジェクトが変形したり、裏返ったり、展開したり、収納されたりすることで、視聴者の目は新しいものを探す必要がありません。
• アクションは画面中央で行う。 画面の中心に照準があると思い、主人公は常にその近くにいるようにします。
• 画面は常に動いている。 静止したように見えるショットでも、非常にゆっくりとしたズームインまたはパン（ドリフト）を入れます。
• 1つのアクションには1つの曲線。 ズームインするなら一貫してズームインし、途中で戻さない。回転するなら一貫して回転し、途中で反転しない。加速スタート、減速終了、終了部分は長めに取ります。
• テキストは簡潔に、ぼやけた状態から浮かび上がって鮮明になる。 バウンドさせたり、突然拡大したりしないでください。テキストを主体の上に重ねてはいけません。
• 3Dでは1灯のみを使用し、背景は暗くする。 これが「スタジオ撮影のように見える」大きな理由です。
• 3Dは物理的に正しくする: ヒンジ部分はぴったりと閉じる。オブジェクト同士の貫通は禁止。2つのオブジェクトが位置を交換する場合は3D公転軌道を描き、直線で交差しない。回転速度は滑らかで急変しない。
• 実物写真とモデルを比較する。 比率、隅のR、開口部の位置が合わない場合はモデルを修正します。
• シルエットトランジションは、部分的なクローズアップから始め、引き、そして実写にハードカットする。 references/silhouette.md を参照。
• 音声と映像は全体として同時に前後に移動するのみで、速度変更やピッチ変更は行わない。

遵守すべきルール

• ブランド: クライアントが所有している、または使用許可を得ているブランドのみを扱います。他社のブランドは練習作品としてのみ扱い、公式を装ったり、広告を出稿したり、実際のクライアントのキャンペーンを模倣したりしないでください。
• 素材: クライアント自身が作成した、またはライセンスを有する素材、フォント、音楽、モデルのみを使用し、そのライセンスがこの用途をカバーしていることを確認します。
• 表現: 動画内の数字や表現はすべて事実に基づき、出典が明確であること。データや評価を捏造しないでください。
• プライバシー: スクリーンショットや実写内の個人情報は事前に削除します。出演する人物の同意を得てください。
• 有料サービス（ナレーション、AI音楽生成など）はクライアントのクレジットを消費するため、クライアントから依頼があった場合のみ使用します。

スクリプト一覧

スクリプト	機能
scripts/render.mjs	HTMLページから静止フレーム / 4K mp4 / 位置情報（probe）/ ストーリーボード画像（board）を生成
scripts/sheet.py	静止フレームまたは完成動画から時間に沿ってフレームを抽出し、タイムコード付きのチェック用画像を生成（元の解像度から抽出）
scripts/layout_check.py	テキストと主体の距離、主体の中央配置をチェック
scripts/seam_check.py	2つのパーツの実機位置におけるヒンジ部分のずれ（ピクセル単位）をチェック
scripts/blender/studio.py	1灯スタジオシーン + EEVEE/Cyclesレンダリング。GLB/glTF/USDZ/OBJ/FBXを入力可能。--demoでサンプルモデル付き
scripts/blender/motion_check.py	フレーム単位での貫通、角速度、回転速度の急変をチェック
scripts/silhouette.py	人物のマスク抽出（macOS Vision、オプション）→ スムーズなベクターシルエット。クローズアップからの引きが可能
scripts/audio/synth.py	コードで合成する効果音パックとBGMのベース（ロイヤリティフリー）
scripts/audio/mix.py	BGMのビートポイントへの合わせ込み、効果音の配置、サイドチェインによる音量調整、ラウドネスノーマライゼーション、動画への合成
scripts/encode.py	フレーム単位のPNGシーケンスからmp4へエンコード
scripts/doctor.py	依存関係のチェック、不足しているものとそのインストール方法を表示

どのファイルを読むべきか

状況	読むファイル
レイヤー選択と工数見積もり	references/layers.md
ストーリーボード作成	references/storyboard.md
HTMLページ作成と動画出力	references/html-engine.md
ショット間のトランジションデザイン	references/transitions.md
実在製品の3D制作	references/blender-3d.md
シルエット表現と実写への接続	references/silhouette.md
BGMと効果音の追加	references/sound.md
納品前のセルフチェック	references/checklist.md
画面がおかしい場合	references/pitfalls.md

環境

Node.js 20+、Python 3.9+（numpy、Pillow、opencv-python-headless）、ffmpeg、Google Chrome または Chromium。 レイヤー3にはBlender（無料）が必要です。シルエットトランジションの自動マスク抽出にはmacOS 14+が必要で、他のOSでは別のツールでマスクを用意してください。 開始前に python3 scripts/doctor.py を実行し、不足しているものがあればクライアントにインストール方法を伝えてください。 Skillディレクトリに .venv がある場合、Pythonスクリプトは .venv/bin/python を使用して実行します（Windows: .venv\Scripts\python）。Windowsでは python3 を python に置き換えてください。