Communitygithub.com

aievolutionpl/social-motion-agent

637のエフェクトと11のレシピ(awesome-ai-motion)からシーンに最適なモーションを選択し、時間の純粋関数として実装します。アニメーションシーン、タイトルリビール、トランジション、チャート構築、フック、キャプションの計画や構築に使用します。

social-motion-agent とは?

このスキルは、アニメーション制作において「なんとなく」でモーションを選ぶのをやめ、637種類のエフェクトカードと11のレシピ(awesome-ai-motion)から適切なものをクエリして選択、実装するためのエージェントツールです。GSAPベースのスニペットを時間の純粋関数(JavaScript)に変換し、`translateY` や `opacity` のみを使ったシンプルな実装を推奨します。対応プラットフォームはClaude Code、Cursor、Codexを想定しており、`motion-ui-polish` や `vstudio` パイプラインと連携します。動画(ショート、説明動画、プレゼンテーションなど)の最初の5秒間の設計や、教育的なフックの構築に特に強力で、クエリパラメータ(目的、メディア、家族名など)で候補を絞り込み、カードの `use_when` や `avoid` を読んで適切な効果を選びます。カードのパラメータ名は一部韓国語ですが、値やイージング、スニペットは言語に依存しません。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/aievolutionpl/social-motion-agent/tree/HEAD/.agents/skills/motion-effect-picker

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

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

ドキュメント

モーションエフェクトピッカー

出典: tools/repos/awesome-ai-motion (MIT; GSAPは無料ライセンスの下でバンドルされています。ATTRIBUTIONS.md を参照)。637枚のエフェクトカード、そのうち128枚はレンダリング済みクリップとHTMLテンプレート付き、11のレシピ、決定表。インデックス全体を読まずにクエリしてください。

手順

  1. シーンの意図と媒体を一文で述べる(「動画の冒頭、ショートを開く質問」など)。
  2. クエリ:
python -S studio.py motion find reveal --purpose attention --medium shorts --rendered --limit 8
python -S studio.py motion show mask-reveal
python -S studio.py motion recipe            # レシピ一覧
python -S studio.py motion recipe edu-hook   # 時間とパラメータ付きの手順

目的: attention, explanation, comparison, sequence, emphasis, transition, data, feedback, atmosphere, branding。 媒体: explainer, shorts, scrolldeck, presentation, product-demo, data-story, web-ui。 --family、--level も使用可能。 3. 候補を2〜3個選び、各カードの use_when、avoid、params、ease、pairs_with を読む。まずカードのデフォルト値を使い、その後調整する。 4. 共通ルールに従って構成する: 1シーンにつき1フォーカス、1メインアクション+最大2つのサポートアクション、終了状態は読めるだけ十分に保持、transform と opacity のみを使用。 5. 時間の純粋関数として実装する。カードの snippet はGSAPですが、それを翻訳し、インポートしないでください:

  • 秒から進行度へ: p = clamp((t - start) / duration); スガーは start + i * gap
  • templates/motion-helpers.js からのイージング(easeOut、easeIn、easeInOut、backOut、elasticOut、spring): power3.out は easeOut(3)
  • yPercent: 110 -> 0 は overflow: hidden ウィンドウ内の行で translateY(110% -> 0%)
  1. motion-ui-polish(トークンとゲート)を使って構築し、開始時、メインアクション時、終了状態のフレームを確認し、カードの good_example と比較する。

テンプレートが存在する場合

show が html_template を出力したら、それを開いて構造とタイミングを確認し、ジョブの source/ にコピーし、テキストまたはデータを置き換えます。タイムラインは維持します。Playwrightの依存関係をインストールせずにカタログの render.mjs を実行しないでください。パイプラインは vstudio またはHTMLレンダラーを通じてレンダリングします。

最初の5秒間(教育・解説動画)

0〜1秒: 質問または驚くべき結果。1〜3秒: メカニズムまたは比較への手がかり。3〜5秒: 読めるホールド付きの学習の約束。1画面につき1つの主張。カメラの大きな動きは、質問または結果を明らかにするためだけに使用します。motion recipe edu-hook から始め、次に mask-reveal、split-compare、count-up、annotation-callout を使用します。

制限

  • カードのパラメータ名は一部韓国語です。値、範囲、ease、snippet は言語に依存しません。説明とプロンプトは英語で返されます。
  • planned カードにはクリップやテンプレートがありません。パラメータとプロンプトのみを使用します。
  • 使いすぎたエフェクトは生成的に見えます。1つのエフェクトを1シーン内の複数の要素に繰り返したり、同じ瞬間に3つのエフェクトを重ねたりしないでください。

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

関連スキル