Communitygithub.com

inspiriflow/awesome-motion-graphics

収集されたモーショングラフィックス編集のライブラリで、トーキングヘッドの縦長動画(1080x1920)用。各エフェクトはRemotionでレンダリングするためのビルド仕様書です。ユーザーが特定のエフェクト名(reel wall、glass widgets、orbit、billboard、zoom through、text ring、tier list、glass graph、stage light、punch-in、checklist、comment box、stamp、cover star、match cut、messages、rabbit hole...)を要求したり、「/edit <name>」と入力したり、「どんな編集ができますか?」と尋ねたり、自身のクリップにプレミアムなソーシャル動画エフェクトを適用したい場合に使用します。

awesome-motion-graphics とは?

このスキルは、トーキングヘッドスタイルの縦長動画(1080x1920)向けに設計された、多様なモーショングラフィックスエフェクトのライブラリです。各エフェクトは `effects/` ディレクトリ内の独立したMarkdownファイルとして定義されており、見た目、必要な入力、レイアウト、タイミングが詳細に記述されています。ユーザーがエフェクト名を指定すると、スキルは対応する仕様書を読み込み、不足情報をユーザーに尋ねながら、Remotionを使用して動画をレンダリングします。Claude CodeやCursor、CodexなどのAIエージェントと連携し、ソーシャルメディア向けの高品質な動画編集を自動化できる点が強みです。また、レシピの追加やトラブルシューティングガイドも含まれており、コミュニティによる拡張も容易です。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/inspiriflow/awesome-motion-graphics/tree/HEAD/skills/awesome-motion-graphics

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

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

ドキュメント

Awesome Motion Graphics

多数のソースから収集されたエフェクトレシピのライブラリ。effects/ 内の各レシピは仕様書であり、見た目、必要なもの、ユーザーが入力する内容、正確なレイアウトとタイミングを定義しています。

ワークフロー

  1. 名前が指定されていない場合? effects/ 内のすべてのファイルを、フロントマターの1行 summary とともにリストアップし、tags でグループ化します。ここで終了します。
  2. プロジェクトで初回実行? setup/house-style.md を実行し、エフェクトの needs に mask または head-track が含まれている場合は setup/mask-and-head-track.md を実行します。すでに存在するもの(HOUSE_STYLE.md、public/mask/、public/head-track.json)はスキップします。
  3. 該当する effects/<name>.md を読み込みます。すべての [INPUT] をユーザーの言葉で埋めます。不足しているものがあれば、特に実数についてはユーザーに尋ねます。統計情報、ビュー数、ロゴなどをでっち上げないでください。タイミングが「Xという単語の位置で」と指定されている場合:クリップを単語のタイムスタンプ付きで文字起こしし、それを使用します。
  4. エフェクト名をそのままコンポジション名として、HOUSE_STYLE.md に従ってビルドします。
  5. out/<name>.mp4 にレンダリングし、パスを報告し、4枚の静止画(開始、中間2枚、終了)を表示します。

extras/ にはエフェクト以外のレシピが含まれています:チャットスタイルのイントロ/エンディング(chat-render.md)と、複数の編集を1つのリールにまとめる方法(full-reel.md)。

すべてのレシピのデフォルト設定

  • 1080x1920、30 fps、ソースクリップは public/talking.mp4(コピーを使用し、オリジナルは編集しないこと)。
  • 読み物に安全な領域:x 120–960、y 260–1700。顔を覆わないこと。
  • 「リニアライト」とは:リニアに変換し、ブラー/色合い/ライトを適用し、sRGBに戻すこと。
  • 「最後のフレームでも動き続ける」とは:カメラのプッシュが完全に停止しないこと。

見栄えが悪い場合

症状修正方法
切り抜きがちらつく / 髪の毛にハローが出る時間経過に沿ってマスクをより滑らかにする;フェザリング前に1px収縮させる
速すぎる4秒に延長し、すべての動きをそれに合わせてスケーリングする
テキストがスマホで読みにくいすべてのテキストを+20%拡大し、スマホサイズで確認する
グラフィックが顔に触れる顔領域の外側、より低い位置に移動する
動きがロボットっぽいHOUSE_STYLE.mdからイージングとモーションブラーを再適用する
マシンが遅いまず半分サイズでプレビューレンダリングし、承認後にフル品質でレンダリングする

レシピの追加

effects/ 内に新しいファイルを作成し、以下のフロントマターと、他のファイルと同じ構成(Inputs、Build、Timing)の本文を記述します。

name: kebab-name
summary: 視聴者に何が見えるかを1行で
source: READMEのsource-id
needs: [mask, head-track, behind-me, reels, music]   # 任意のサブセット
duration: 3s
tags: [3d, glass, text, camera, data, layout]

関連スキル