Motion Craft Kit
出典: github.com/iart-ai/motion-skills — 14のオープンソースパック、51のスキル、MITライセンス。 これは単一の統合リファレンスです。元の14パックは別途
npx skills add iart-ai/<pack-name>でインストールするか、Claude Codeプラグインとして利用できます。このスキルは全ドメインをカバーし、地図を一箇所で提供します。
情報
| リポジトリ | iart-ai/motion-skills（上流、MIT） |
| 統合作成者 | V4TIME — V4SKILL |
| 概要 | AIコーディングエージェント向けの51のモーショングラフィックス/アニメーション/ビデオスキルを再編成 |
| 形式 | リファレンススキル — ハンドブック形式、一つのSKILL.md |
| 元のパックをインストール | npx skills add iart-ai/tiktok-video-skills など |
| 使用タイミング | モーショングラフィックス、アニメーション、動画制作、Webモーション、データ可視化、3D/WebGL、数学アニメーション、またはフリーランスモーションビジネスに関するリクエスト時 |
メインテーマ
AIコーディングエージェントに、モーショングラフィックス、アニメーション、動画をパイプライン全体で生成させることを教える — フック駆動のTikTokクリップからWebGLシェーダー背景、ナレーション付き解説動画からブランドモーションシステムドキュメントまで。このコレクションは14のドメインをカバーし、それぞれにインストール可能なパックがあり、共通の構造を共有しています。各スキルは自己完結型のSKILL.md + references/フォルダで構成され、一つのワークフローを教えます。ビジュアル成果物を生成するスキルには、納品・検証ループと小さなscripts/ツールキットが含まれます。
一貫したテーマ: モーションを魔法ではなくクラフトとして捉える。 すべてのパックは実際の制作技法（タイミング/イージング原則、フレーム精度のカット、ビート同期、60fps規律、プラットフォーム仕様、アクセシビリティ）に基づいており、「アニメーションを作る」だけではありません。
主要テーマ
-
短尺縦型動画は独自の文法を持つ。 フック、パターンインタラプト、ペーシング、保持編集、ワードタイムキャプション、ローワーサード、カウントダウンタイマー — 9:16は独自の言語であり、「横向きにした動画」ではありません。
-
データがモーションを駆動する。 チャートレース、カウントアップティッカー、アニメーション化されたインフォグラフィック、ラップスタイルのレビュー、CSVからバッチ生成される広告クリエイティブ — モーションは数値の関数であり、すべてのフレームで正確にレンダリングされます。
-
キネティックタイポグラフィはテキスト＝モーション。 文字/単語/行のスタガー、分割テキストの表示、可変フォントウェイトのトランジション、パス上のテキスト、歌詞/タイトルカード — テキストは静止せず、パフォーマンスします。
-
Webモーションは60fpsとアクセシビリティで成否が決まる。
transform/opacityのみをアニメーション化、レイアウトスラッシュを排除、prefers-reduced-motionを段階的な劣化で尊重、Next.js App Routerのページトランジション、マイクロインタラクション、SVGストローク描画、Lottie再生。 -
3D/WebGLは別トラック。 GLSLフラグメントシェーダー、Three.js/R3Fシーン、パーティクルシステム — GPUバウンド、リーク注意、背景やエフェクトとして展開され、製品全体としては使用しない。
-
数学アニメーションは独自のクラフト。 Manim CE — シーン、モブジェクト、LaTeXモーフ、ValueTracker、3D移動カメラ — 3Blue1Brownスタイルの教育動画や数式可視化向け。
-
編集地図アニメーションは地理＝ストーリーテリング。 カメラズーム、描画ルート、ドロップピン、リージョンハイライト、12fpsスタッター — Voxスタイル、Google Earth StudioまたはGeoJSON/SVGから。
-
ブランドモーションはシステムであり、一回限りではない。 イージング/タイミングトークン、モーションライブラリ、ロゴルール、アクセシビリティ基準 — 一度作成され、どこでも参照される。
-
フリーランスモーションはビジネスである。 ブリーフ、価格設定、修正上限、納品仕様、ブランドモーションガイドライン — モーションデザイナーやスタジオを支えるバックオフィス。
-
すべてのビジュアルスキルには検証ループが組み込まれている。 フレームを凍結、コンタクトシートを作成、エンコードされたMP4を調査 — エージェントは引き渡す前に自身の出力を確認する。WebスキルはスタンドアロンHTMLをレンダリングし、動画スキルはRemotionまたはManimを介してレンダリングする。
51のスキル — 統合、再編、書き直し
ワークフロー別に整理され、元のパック順ではありません。順序はシャッフルされています。約半数の説明はゼロから書き直され、残りは元のREADMEの説明から凝縮されています。
A. 短尺縦型動画（TikTok / Reels / Shorts）
1. short-form-video
機能: 縦型9:16動画の構造文法 — スワイプに耐えるフック、注意をリセットするパターンインタラプト、保持率を維持するペーシング、再利用可能なテンプレート構造。最初の3秒の問題を漠然とした感覚ではなくデザイン制約として教えます。
アクティベーション条件: Reel/TikTok/Shorts作成時、再利用可能な短尺テンプレート構築時、保持率編集時、弱いオープナーの修正時、ペーシング調整時、シームレスループ作成時。
2. caption-animation
機能: トランスクリプトやナレーションからのワードタイムカラオケスタイルキャプション — 単語ごとのポップタイミング、アクティブ単語ハイライト、プラットフォームUIと衝突しないセーフエリア配置。焼き込みキャプションをレンダリングするか、タイミング付き単語配列を他のレンダラーに提供します。
アクティベーション条件: ナレーションをHormoziスタイルの単語ごとのキャプションに変換時、字幕をクリップに焼き付け時、Reelにアニメーションキャプション追加時。
3. countdown-video
機能: フレーム精度でドリフトフリーのカウントダウンタイマー — デジタルフリップ/ロールモーション、設定可能な持続時間 — 「間もなく開始」画面、ローンチ/セールカウントダウン、正確なフレームでゼロに到達するアニメーションカウンター。ほとんどの単純なタイマー実装を壊すドリフト問題を解決。
アクティベーション条件: カウントダウンタイマー作成時、「間もなく開始」画面作成時、ローンチカウントダウン作成時、正確にゼロで終了するアニメーションカウンター作成時。
4. lower-thirds
機能: ステージングされた出入りアニメーション付きのクリーンでブランド化された名前/役割ローワーサード — テンプレート化されているため、異なる名前で同じルックを複数の人物に適用可能。セーフエリア配置とブランドロック（色、書体、ロゴ配置）を含む。
アクティベーション条件: アニメーション化されたローワーサード、名前タグ、スピーカーオーバーレイ、ブロードキャストスタイルのタイトルを複数人物向けに作成時。
5. text-message-animation
機能: チャット会話をアニメーション化 — バブルが順にポップイン、タイピングインジケーターがパルス、送信音がビートに乗る、スレッドが自動スクロール — iMessage/WhatsApp/SMSの美学を横断し、メッセージ配列またはCSVからレンダリングされるため、一つのテンプレートで無限の動画を生成。
アクティベーション条件: 偽のテキストメッセージ動画、iMessageストーリー、WhatsApp/SMS会話クリップ、チャット返信アニメーション作成時、CSVからテキストメッセージ動画をバッチ生成時。
B. ポッドキャスト / YouTube / 長尺
6. audiogram
機能: ポッドキャストクリップ、ナレーション、引用をReels/TikTok/Shorts/フィード投稿向けのキャプション付き波形動画に変換 — 反応する波形、オプションのプログレスバー、キャプション、正方形または縦型出力。オーディオ駆動のビジュアルスレッドが製品であり、装飾ではありません。
アクティベーション条件: オーディオグラム作成時、ポッドキャストを動画に変換時、ナレーションに動く波形を追加時、ポッドキャスト引用をソーシャルにエクスポート時。
7. youtube-intro-outro
機能: YouTubeのクリッカブル要素ゾーン（登録ボタン、次の動画カードなど）をデザイン制約として考慮した3〜5秒のブランドイントロスティングと20秒のエンドスクリーンアウトロを構築。チャンネルごとに名前/ロゴ/色/スティングのみを変更する再利用可能なテンプレート。
アクティベーション条件: YouTubeイントロ、チャンネルバンパー、ロゴスティング、アウトロ、エンドスクリーン、登録/次の動画スペース付きエンドカード作成時。
C. Eコマース / プロダクト
8. product-demo-video
機能: 静的なプロダクト/アプリのスクリーンショットを洗練されたアニメーションデモに変換 — デバイスフレーム、合成カーソル＋クリック、ズームイン領域、機能キャプション — スクリーンレコーダーなしでフラットなスクリーンショットがウォークスルーに。視聴者がいつ何を見るかをフレーム単位で制御。
アクティベーション条件: プロダクトデモ、アプリ/SaaSウォークスルー、スクリーンショットからの機能発表動画、各画面をブラウザウィンドウにフレーム化して作成時。
9. promo-video
機能: インパクトのある6〜15秒のセールスポット — 割引表示、以前→現在の価格取り消し線、プロモコード、カウントダウン、CTA — データテーブルから複数プロダクトをバッチ処理し、一つのテンプレートでデータから価格を取得してN個のプロモをレンダリング。ブラックフライデーやフラッシュセールなど、ボリュームが重要な場面向け。
アクティベーション条件: セール/プロモ/割引表示/ブラックフライデー/フラッシュセール動画作成時、オファーのCSVからプロモをバッチ生成時。
10. photo-slideshow
機能: 写真フォルダを完成した動画に変換 — 写真ごとのケンバーンズモーション、ビート同期トランジション、混合アスペクト比対応、上部にキャプション。写真は単にカットされるのではなく、意図を持って動きます。
アクティベーション条件: 写真をスライドショー/モンタージュ/レビュー動画に変換時、音楽に同期したケンバーンズモーション付き。
D. 広告 / マーケティング
11. ad-creative-video
機能: 一つのデータ駆動広告テンプレート × CSV = N個のメッセージ一致バリアントを生成し、すべての配置アスペクト比（9:16、4:5、1:1、16:9）にエクスポートしてA/Bテストに対応。クリエイティブはパラメータ化されており、フック、ボディ、CTA、オファーはすべてデータ行から取得。
アクティベーション条件: 動画広告作成時、データテーブルから広告バリアントをバッチ生成してA/Bテスト時、一つの広告を複数アスペクト比にエクスポートしてMeta/TikTok/Reels/YouTubeで使用時。
12. launch-video
機能: ハイエネルギーなプロダクトローンチ/ハイプ動画 — フック → ティーザー → リビール → フィーチャーモンタージュ → エンドカードCTA、ビートに合わせてカット。構造はテンプレート、エネルギーは調整する変数。
アクティベーション条件: 30秒プロダクトローンチ動画、ハイプリール、ビート同期リビール、エンドカードCTA動画作成時。
13. testimonial-video
機能: アニメーション化された引用/レビュークリップ — スタガーされた行表示、キーフレーズ強調、部分スター評価、著者ブロック — 顧客レビューリストをブランドロックされたソーシャルプルーフ動画に変換。
アクティベーション条件: 顧客レビューをアニメーション化されたテスティモニアルクリップに変換時、スター評価付き引用動画、レビューリストからのソーシャルプルーフ動画作成時。
E. 解説 / 教育
14. explainer-video
機能: 一つのメッセージをペース配分されたナレーション付き30〜90秒のショートに変換 — スクリプト → ストーリーボード → シーン構築 → ナレーション/キャプション同期 → 編集 → ポリッシュ。単なるレンダリングステップではなく、完全なパイプライン。ほとんどのモーションツールが省略するスクリプトから画面へのギャップを処理。
アクティベーション条件: 解説動画、仕組み説明、オンボーディング、またはコンセプト動画作成時、機能をナレーション付きの仕組み説明クリップに変換時。
15. wrapped-video
機能: 「Spotify Wrapped」スタイルのレビューを構築 — 一つのテンプレート × データテーブル → 多くのパーソナライズされた9:16動画、各行からデータを投入。テンプレートは固定、データはユーザーごとに変化。
アクティベーション条件: ユーザーCSVからSpotify Wrappedスタイルの年間レビュー動画、ユーザーごとの統計動画作成時。
16. diagram-animation（書き直し）
機能: 図やチャートを一度に表示するのではなく、時間をかけて段階的に表示 — ノード/エッジのプログレッシブ表示、自己描画するフローコネクター、上昇する棒グラフ、カウントアップする数字。視聴者は構築される図を読み取り、突然存在する静止画像ではありません。アーキテクチャ図、フローチャート、データチャートを同じ方法で処理: 段階的な開示。
アクティベーション条件: 図、フローチャート、アーキテクチャ、チャートを段階的にアニメーション化時、ノードごとに表示時、棒を成長させ数字をカウントアップ時。
17. whiteboard-animation（書き直し）
機能: 「VideoScribe」スタイルの描画解説動画 — 手が線画や手書き文字をストロークごとにボードにスケッチし、ナレーションに合わせてペーシング。表示がモーションであり、手がその装置。良いコンテンツの代わりではなく、基本的なイラストを展開するレッスンのように感じさせる配信メカニズム。
アクティベーション条件: ホワイトボードスタイルの解説動画、描画アニメーション、ナレーションに合わせた手書きイラスト作成時。
18. isometric-animation（書き直し）
機能: アイソメトリック/2.5Dシーン — 積み重ねられたレイヤー、押し出されたブロック、分解図、スタガー表示とカメラドリフト付きアイソメトリックグリッド。フラットな図に完全な3Dなしで三次元性を与える。カメラがドリフトし、レイヤーが分離し、WebGLパイプラインなしで奥行きの手がかりを得る。
アクティベーション条件: アイソメトリック/2.5Dシーン、積み重ねレイヤー図、分解図、スタガー表示とカメラドリフト付きアイソメトリックグリッド構築時。
19. manim（書き直し）
機能: Manim Community Editionを使用してPythonで数学/物理/CSアニメーションを構築 — シーンとモブジェクト、アニメーションプリミティブ、LaTeX/MathTex数式モーフ、グラフとアップデータ（ValueTracker）、3Dと移動カメラ、フレームを先にレンダリングして検証するループ付きCLIレンダリングでMP4/GIF出力。3Blue1Brownのツールチェーンを、シーンコードを書けるエージェントが利用可能に。
アクティベーション条件: 数学アニメーション作成時、数式アニメーション化時、Manim使用時、3Blue1Brownスタイルの動画作成時、関数のプロットとアニメーション化時、数式間のモーフィング時、軌道カメラで3Dサーフェスレンダリング時。
F. キネティックタイポグラフィ
20. kinetic-typography
機能: CSS、GSAP SplitText、Framer Motion、Remotionでテキストをアニメーション化 — 文字/単語/行のスタガー、分割テキスト表示、可変フォントウェイトトランジション、パス上のテキスト、歌詞/タイトルカード。テキストがモーションの主題であり、何かの上に載るラベルではありません。
アクティベーション条件: 見出しアニメーション化、キネティックタイポグラフィ動画作成、アニメーションタイトルカード作成、分割テキスト表示、文字/単語/行ごとのスタガー、歌詞またはキャプション動画作成、可変フォントウェイトアニメーション化、パス上のテキスト配置時。
G. Webアニメーション
21. gsap-web
機能: GSAPによるコード駆動のWebモーション — タイムライン、ScrollTrigger、SplitText、Flip、Lenisスムーズスクロール同期。業界標準のタイムラインツールがクローズドプラグインではなくWebページに組み込まれている。
アクティベーション条件: GSAPを使用したスクロール駆動、ヒーロー、テキスト表示アニメーションのWeb上での構築時、ヒーローセクションを固定してタイムラインをスクロールに連動時。
22. 60fps-animation（元のスキル詳細を参照）
参照: iart-ai/web-motion-skills — GSAP/Framer/smooth-scroll
翻訳注: 原文が途中で切れていますが、スキル「60fps-animation」の内容は元のリポジトリを参照してください。