Communitygithub.com

huypham85/motion-video

このMacだけで完成度の高いモーショングラフィックス動画(MP4、オリジナル合成音楽トラック、ビートに合わせたモーションカット)を生成します。ffmpeg、ストック映像、ダウンロードは一切不要です。プロモーション動画、ローンチ動画、「新機能」動画、リリースノート動画、機能紹介動画、App Storeプレビュー風動画、SNS(Reels/TikTok/Shorts)動画、ショーリール、説明動画など、アプリやプロダクトの更新に関する動画作成をユーザーが依頼した場合に使用します。

motion-video とは?

このスキルは、macOSとXcodeコマンドラインツールのみを依存関係として、プロフェッショナルなモーショングラフィックス動画を完全にコードベースで生成します。Swiftで記述されたシンセサイザーが楽譜を生成し、CoreGraphics/CoreImageを使用したレンダラーがビートグリッド上でフレームを描画、AVFoundationでH.264/AACエンコードを行います。このスキルは、プロモーション動画、リリースノート動画、機能紹介動画など、あらゆるタイプの短尺動画(10〜30秒)を作成するための完全なワークフローを提供します。ワークフローは、ブリーフィング、リサーチ、アセット収集、ビートグリッド上の計画、プロジェクトフォルダのセットアップ、スコア作成(音楽)、シーン作成(ビジュアル)、スチルレビュー(複数ラウンド)、最終レンダリング、納品という10のステップで構成されています。作成した動画は後からリビジョン(ペース調整、音楽ムード変更、アスペクト比変更など)することも可能です。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/huypham85/app-3d-video-skill/tree/HEAD/motion-video

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

モーション動画

10〜30秒のモーショングラフィックススポットを、実際のコードとして生成します。Swiftシンセサイザーが楽譜を書き、SwiftのCoreGraphics/CoreImageレンダラーが同じビートグリッド上にすべてのフレームを描画し(サブフレームモーションブラー、リアルガウシアンブラー、すりガラス、フィルムグレイン)、AVFoundationがH.264 + AACにエンコードします。必要なものはすべてこのスキルフォルダに含まれており、依存関係はmacOS + Xcodeコマンドラインツールのみです。

基準は「モーションデザイナーのショーリール」であり、デモではありません。すべてのキューが音楽に合致し、画面上のノイズは一切なく、すべての主張は真実です。

フォルダマップ

  • engine/ — audio_core.swift + audio_main.swift(スコアエンジン)、video_core.swift + video_main.swift(レンダリングエンジン)。プロジェクトごとに編集しないでください。プロジェクトコードはプロジェクトフォルダに配置します。
  • scripts/mv.sh — ビルド + 実行: audio, stills <beats>, video [out]。levels.py、sheet.py、probe.swiftはこれによって使用されます。
  • 完全な動作プロジェクトは、コンパニオンスキルapp-3d-video(template/: score.swift、scenes.swift、project.env、およびSceneKitレイヤーs3d.swift)にあります。2D専用動画の場合は、そのproject.envとscore.swiftをコピーし、references/engine-api.mdに基づいて新しいscenes.swiftを作成します。
  • examples/scores/energetic-128bpm.swift — 高エネルギーなローンチスコア(ドロップ、フィル、ドロップアウト)。
  • references/motion-direction.md — トーンによるペーシング、イージング、トランジション、レイアウト、ストーリーテリングパターン、レビューチェックリスト。シーンを計画する前に読んでください。
  • references/score-guide.md — テンポ/キー/アレンジメントのレシピ、ブランドサウンドのキー合わせ、ラウドネスターゲット。スコアを作成する前に読んでください。
  • references/engine-api.md — すべての描画/オーディオ関数とシグネチャ。コード作成時に読んでください。

ワークフロー

1. ブリーフ(結果を変える質問のみに留める)

決定事項: 目的とターゲット、尺、アスペクト比(デフォルトは1080×1920縦; W/Hで1920×1080または1080×1350)、トーン、画面上のコピーの言語。ユーザーがこだわらない場合のデフォルト値: 15秒、縦、英語コピー、トーンはプロダクトのドメインに合わせる。リクエストされたコンテンツがトーンに適したペースで尺に収まらない場合は、詰め込むのではなく、その旨を伝え、尺かコンテンツのどちらを諦めるか尋ねる。(ヘルスケアアプリで「落ち着いたペース」と「15秒」の両方を希望された場合、答えは「シーンを削ることであって、速度を上げることではない」でした。)

2. 真実をリサーチする

画面上のすべては防御可能でなければなりません:

  • 出荷されたもの: 直近のバージョンアップ以降のgit log、CHANGELOG、リリースノート。
  • 正確な製品コピー: コードを読んで、通知タイトル/本文、ボタンラベル、Siri/インテントダイアログ文字列、スニペット見出し、オンボーディングテキストを確認します。引用してください。約束事として言い換えないでください。
  • 例示的なもの(サンプル名、カウント、時間)は明示的にマークし、納品時にユーザーに伝えます。
  • ストーリーの内部一貫性を保つ:シーン1で9:41にMetforminを記録した場合、シーン2で「Metforminを最後に服用したのはいつですか?」と尋ねて「13時間前」と答えさせることはできません。別の薬剤を使用してください。

3. アセット

実際のブランドアセットを収集: アプリアイコン(最大PNG)、ロゴ、ブランドカラー(デザイントークン/アセットカタログ)、製品がすでに使用している公式バッジ(例:「Works with Apple Health」)、および製品独自のサウンド(通知/ソニックロゴWAV)。シンセ用にワンショットを変換: afconvert -f WAVE -d LEF32@48000 -c 1 in.wav assets/name.wav; SVG → PNGにはsharp/resvg(リポジトリにある場合)、またはqlmanage -t -s 1024。

生のスクリーンショットよりも1つのデータセット(1つの壁紙、1つの時計の時間、1組の名前)で再作成されたベクターUIを優先します。異なるソース(異なる時間、デバイス、データ、フレーム)からのスクリーンショットを並べると不自然に見え、視聴者はすぐに気づきます。スクリーンショットを使用する場合は、xcrun simctl status_bar booted override --time 9:41 …を使用して1回のセッションでキャプチャし、その後クリアし、たまたま開いている他のアプリをキャプチャしないでください。

4. ビートグリッド上で計画

尺 = 小節数 × 4 × 60 / BPM なので、BPMと小節数を一緒に選択します(15秒 = 96BPMで6小節、128BPMで8小節)。プロジェクトにplan.mdを作成: 小節 → シーン → 各ビートのキュー(単語の表示、カードの着地、チェックのポップ、トランジション)の表。1小節に1つのアイデア。大きな瞬間(ロゴ、キーフィーチャー、エンドカード)はダウンビートに配置します。トーンのプリセットとパターンについてはreferences/motion-direction.mdを参照してください。

5. プロジェクトフォルダ

~/Movies/MotionVideo/<slug>/で作業(後でリビジョンできるように永続化):

mkdir -p ~/Movies/MotionVideo/<slug> && cp ~/.claude/skills/app-3d-video/template/{project.env,score.swift} ~/Movies/MotionVideo/<slug>/

project.env(BPM、DURATION、W、H、FPS)を編集し、ブランドアセットをassets/に配置し、score.swiftを書き換え、scenes.swiftを作成します。scenes.swiftの先頭でブランドに合わせてパレット変数(INK、TEAL、MINT、GREEN、GLOW、PAPER、DARKTEXT、ORANGE、DARK_MID、LIGHT_GLOW_A/B)を再割り当てします。

6. スコアを先に

score.swift(レシピはreferences/score-guide.md)を作成し、mv.sh <dir> audioを実行します。聞くことはできませんが、レベル出力を読んでください: RMSがトーンのターゲット範囲内、クリッピングなし、意図した場所でのセクションのコントラスト(静かなイントロ、ドロップでの盛り上がり、ドロップアウトのためのディップ)。動画はオーディオリアクティブ要素のためにmusic.wavを読み込むので、スチルの前にオーディオをレンダリングします。

7. シーン作成、そしてスチルレビュー — 少なくとも2ラウンド

func render(_ t: Double, frame: Int)を定義するscenes.swiftを作成し、次に:

~/.claude/skills/motion-video/scripts/mv.sh <dir> stills 0.5,2,4.25,6,8.5,10,13,16,20,22.5

<dir>/sheet.pngをReadで開き、references/motion-direction.mdのチェックリスト(スプリングオーバーシュートによるオーバーラップ、クリップされたディセンダー、小さすぎるテキスト、不鮮明なクロスフェード、一貫性のないUI、空白スペース)を確認します。また、静止状態だけでなく、トランジション途中のビートも選択します。問題を修正し、クリーンな結果が得られるまで再撮影します。スチルレンダリングは約0.1秒/フレームなので、自由に繰り返します。

8. 最終レンダリングと検証

mv.sh <dir> video <dir>/out.mp4 — SUB=5のモーションブラーで約0.3〜0.5秒/フレーム(15秒@60fps ≈ 5〜8分)なので、バックグラウンドで実行します。プローブは尺とトラックを出力します。また、いくつかのフレームを抽出し(.build/probe out.mp4 <dir> 2,5,9,12)、確認します。

9. 納品

~/Downloads/<Product>_<Topic>_<duration>s[_vN].mp4にコピーし、SendUserFileで送信し、次の内容を報告します: ビートごとのストーリー(秒単位)、どのアセットと文字列が本物か、何が例示的か、オーディオは測定のみで判断したこと、およびユーザー向けの短いチェックリスト(ボリュームで聴く、スマートフォンでの可読性、ブランド/バッジの使用法)。リビジョン時は以前のバージョン(v1/)を保持します。

リビジョン

ほとんどのフィードバックは1つの調整項目に対応します: 遅く/落ち着いて → BPMを下げ、シーン数を減らし、スプリングを抑制(k≈5, w≈6)、表示時間を長く(0.9〜1ビート)、ホイップトランジションの代わりにラックフォーカス/アイリス・トランジション。よりエネルギッシュに → エネルギッシュなスコア、オーバーシュートのあるスプリング、ホイップ、ドロップでのフラッシュ。「機能Xがわからない」 → 1つのデバイスで原因と結果(リクエスト → レスポンス → 結果)を完全に表示し、製品の実際のレスポンスコピーを使用し、機能名ではなく価値でタイトルを付けます。

関連スキル