Communitygithub.com

nxrskyaa/motionite

Remotionを使った高品質なモーショングラフィックス動画(ローンチフィルム、解説動画、ソーシャルリール、ゲームトレーラー、ループ、スティング)を作成します。アニメーション、ストーリーボード、レンダリング、キネティックタイポグラフィ、製品プロモーション、ソーシャル投稿の作成、ビジュアルスタイルの選択を求められたときに使用します。

motionite とは?

Motioniteは、AIエージェントが一貫性のある決定論的なRemotion動画を制作するためのスキルです。15種類のハウススタイル(NxrStyle 01–15)と70の特定されたテクニック、ユニバーサルモーション法則、そしてffprobe、−14 LUFS、コンタクトシート、決定論チェックを含むQAプロセスを備えています。エージェントはまずブリーフから事実と選択肢を分離し、ムードボードを作成し、1つのNxrStyleを選択してショットリストを作成します。その後、純粋関数を使った決定論的なRemotionコードを構築し、スチルをレンダリングして承認を得てから最終的な動画をレンダリングし、QAチェックを実行します。最後にセルフクリティークを最大3ラウンド行い、結果を報告します。このスキルは特にClaude CodeなどのAIエージェント向けに設計されており、単なるプロンプトの違いではなく、スチルに対する反復と批評ループでの「センス」が最終的な動画の品質を決めるという思想に基づいています。

対応~Claude Code~Codex CLI~Cursor
npx skills add nxrskyaa/motionite

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

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

ドキュメント

Motionite: エージェントのためのモーションデザイン

Motioniteは、ブリーフを完成された決定論的なRemotion映画に変換します。生成されたように見えるのではなく、デザインされたように見えます。3つのパーツで構成されています:

パーツ場所使用目的…
15のNxrStylestyles/ · 比較+ピッカー映画ごとに1つの完全なビジュアルシステムを選択する
70のテクニックtechniques/実証済みの数値(ID:T、N、X、C、U、H、R)を使って各動きを構築する
動作するコードexamples/lib/anim.tsトークン、デモコンポ、スタイルコンポをコピーする

差別化要因はプロンプトではありません。同じ1行のショーリールプロンプトでも、まったく異なる映画ができあがります。違いを生むのは、スチルに対する反復と、批評ループにおけるセンスです。このスキルがそのループです。

ワークフロー(順番に従ってください)

1 · ブリーフ → 事実と選択肢

以下を書き出してください:

  • 事実: 実際に持っているアセット(ロゴファイル、スクリーンショット、フッテージ、ブランドの16進数カラーコード、フォント、VO、音楽+BPM)、主張、アスペクト比、尺、プラットフォーム。
  • 選択肢: それ以外のすべて。実際の製品のUIやロゴがない場合は、尋ねるか、ラベル付きのプレースホルダーを残してください。絶対に捏造しないでください。
  • 視聴者が覚えておくべき1文。 映画はビートごとに1つのアイデア、全体で1つのメッセージを持ちます。

2 · ムードボード

2〜3のムードボード映画を収集し、それぞれから何を取り入れるかを数字で書き出してください。カットのリズム(ショットあたりの秒数)、パレットの16進数、タイプファミリー、シグネチャームーブです。IDはtechniques/README.mdにあります。可能であれば、それぞれのコンタクトシート(ffmpeg -vf fps=2,scale=480:-1,tile=6x5)を作成し、それを読み込んでください。

3 · 1つのNxrStyleを選択する

styles/COMPARISON.mdの決定テーブルを使用し、そのスタイルのファイルを開き、そのビジュアルDNA(パレット、タイプ、レイアウト、モーション、トランジション、タイミング、オーディオ)とDo/Don'tに従ってください。

  • 提供されたブランドガイドは、スタイルのパレットとフォント、および禁止事項を上書きします。
  • 別のスタイルから1つのテクニックを借りることができます。パレットやタイプシステム全体を借りることは絶対にしないでください。

| # | スタイル | 雰囲気 | # | スタイル | 雰囲気 | |---|---|---|---|---| | 01 | ビートリール | 派手、バーカットのカラーフィールド | 09 | ライブベントグリッド | ライブタイルの1:1ループポスター | | 02 | ナイトキャプション解説 | 9:16 VOキャプション、大きな数字 | 10 | ピクセルバーグリッドトレーラー | ピクセルゲームトレーラー、ディザカット | | 03 | フローティング製品UI | 3D電話、巨大な数字、チップス | 11 | ワンテイクポータルズーム | 世界を通る1つの対数ズーム | | 04 | エディトリアルインク | 紙、セリフ、ハイライター | 12 | コンソールアズフィルム | オブジェクト自体が世界 | | 05 | ワンパンフラットワールド | 1つのカメラトラック、空はxで | 13 | クリーンローンチフィルム | 控えめ、1つのアクセント | | 06 | PRESS STARTメニュー | レトロ8ビットメニュー | 14 | ペーパーストップモーション | 12sのカットペーパー、リソグラフ | | 07 | フロストコレクティブル | アイシー、軌道、ミントカウンター | 15 | 手描きインク | 自己描画ボイル、インクブロット | | 08 | デュオトーンストーリーブック | 彫刻されたネイビー+1つのウォーム | | | |

4 · フレーム単位のショットリスト

コーディングする前にテーブルを書き出してください:

ショットフレーム数最初のフレームに表示されるもの動くもの(フレーム正確)テキストテクニックIDオーディオキュー

ルール:

  • fps(ほとんどの作業では30、UIスムーズな動画では60)を選択し、ビートグリッドを設定します:BEAT = fps·60/BPM。ショットは小節全体にわたり、カットはビートの2フレーム前に着地します。
  • フレーム0はポスターです。したがって、既に構成されていなければなりません。
  • ショットごとに1つのアイデア、どの行も読み取り可能なホールド時間を≥ 0.8秒確保します。
  • 2つのトランジションデバイスを連続して配置しないでください。見た目の変更はハードカットで着地し、≥ 1秒続きます。

5 · Remotionで構築する

examples/から始めてください。src/lib/anim.ts(イージングE、スプリングSPR、prog、spr、lmix、track、hitPulse、blurIn/blurOut、rand、onTwos)とsrc/styles/kit.tsx、選択したスタイルのコンポをコピーします。

ビルドルール:

  • render(frame)は純粋です:Math.random、Date.now、タイマー、CSSトランジション/アニメーション、フレーム間の状態は使用しません。シード付きrand(key)のみ。物理演算はすべてフレーム0から固定ステップで再シミュレーションします。
  • エントリーはE.outで、エグジットはE.inで行います。セカンダリムーブはプライマリの55〜75%で開始します。
  • スケール移動は対数空間(lmix)で行います。リターゲットする値はスプリングの合計(track)です。
  • 速度制限:スミアまたはブラーがかかっていない限り、≤ 25 ピクセル/フレーム @60。
  • オーバーシュートはフィルムあたり≤ 2回、かつタイプには決して使用しません。フラッシュはフィルムあたり≤ 2回、65〜85%に制限します(真っ白な全フレームは不可)。
  • テキストはブラーインします(12〜20ピクセル → 0、ムーブの60%でシャープに)。単純な不透明度フェードは使用しないでください。
  • すべてのカウンターにfontVariantNumeric: 'tabular-nums'を設定します。数字を含むフォント名は引用符で囲みます:'"Press Start 2P"'。
  • preserve-3d要素に不透明度やフィルターを設定しないでください。カメラでスケーリングされたテキストにwill-changeを設定しないでください。ヘッドレスレンダリングでbackdrop-filterを使用しないでください。
  • レイヤーケイデンス:UIはon ones、描画キャラクターはon twos、ペーパーパペットは12s。テクスチャは決してボイルしません。
  • ループ:最後のフレームは最初のフレームと等しくなければなりません。

6 · 承認用のスチル(フルレンダリングの前)

ビートごとに1枚のスチルをレンダリングし、さらにすべてのトランジションの周囲3フレームをレンダリングします:

npx remotion still src/index.ts <CompId> out/s_<f>.png --frame=<f> --scale=0.5

それらをコンタクトシートにまとめ、確認してください。この段階で構図、読みやすさ、パレットを修正します。なぜなら、スチルは数秒でコストがかからず、レンダリングには数分かかるからです。人間がループにいる場合は、スチルで承認を得てください。

7 · レンダリング

npx remotion render src/index.ts <CompId> out/raw.mp4 --codec=h264 --crf=18 --pixel-format=yuv420p
ffmpeg -i out/raw.mp4 -c:v copy -af loudnorm=I=-14:TP=-1:LRA=11 -c:a aac -b:a 192k -movflags +faststart out/film.mp4

8 · QA(完全なコマンド)

  1. ffprobe:コーデック、サイズ、fps、ビデオの長さ = オーディオの長さ(±1フレーム)。
  2. ラウドネス:−14 LUFS インテグレーテッド(±1)、≤ −1 dBTP。
  3. 最終MP4からのコンタクトシート(スチルからではない):2 fps、6×5タイル。
  4. 決定論:フレームを2回レンダリングし、ピクセル差を確認します(同一でなければなりません)。
  5. フレーム差曲線:単一フレームのスパイクが隣接フレームの3倍を超えないこと。
  6. スチルからサンプリングされたブランドの16進数、およびオーディオのオンセットは対応するビジュアルヒットの±1フレーム以内。

9 · セルフクリティーク(3ラウンド)

qa.mdの6つのテストに照らしてコンタクトシートを採点します:ポスター、読みやすさ、ビート、予算、スタイル、ブランド。最も悪質な3つの問題を修正し、再レンダリングし、最大3回繰り返します。各ラウンドで何を変更したかを報告します。

ユニバーサルテイストルール(簡略版)

  1. フレーム0はポスターであり、すべての一時停止フレームは構成されています。
  2. テキストはブラーイン。単純なフェードはなし。エグジットは加速します。
  3. 1つのアクセントカラー、そしてそれは何かを意味します。
  4. ズームとスケールは対数空間で行い、カメラの動きは(ピクセルスタイルを除き)段階的ではなく連続的にします。
  5. 小節でカット、小節ごとに1つのアイデア、読み取り可能なホールド。
  6. フラッシュは65〜85%に制限、最大2回。オーバーシュートは最大2回、タイプには決して使用しません。
  7. トランジションはデザインされたデバイス(アイリス、スミア、ブロット、スケールスルー、ポラリティフリップ)であり、クロスディゾルブではありません。
  8. 描かれたものよりも実際のアセット。実際の製品のUIを決して偽造しないでください。
  9. 決定論は機能です:同じフレームは常に同じピクセルをレンダリングします。
  10. 美的禁止事項(セリフ、クリーム、グロー、ガラス、絵文字、パーティクル)は、一般的な製品動画のデフォルトです。ブランドやそのムードボードはこれらを上書きできます。物理法則はオプションではありません。

完全な法則:techniques/laws.md。ブリーフテンプレート:techniques/prompt-skeleton.md。

出力契約

動画を納品する際は、以下を報告します:

  • 使用したスタイル
  • ショットリスト(フレーム数+テクニックID)
  • MP4とコンタクトシートのパス
  • ffprobe行、LUFS値、決定論の結果
  • 各クリティークラウンドで変更した内容
  • プレースホルダーまたは作成したアセット

関連スキル