Communitygithub.com

Remotion プロダクトモーション

目的に沿った動作、本物のインターフェースコンテンツ、決定論的アニメーション、オプションのサウンドを使用して、読みやすいRemotionプロダクトデモ、アプリ紹介、UI広告を作成、修正、レビューします。

Remotion プロダクトモーション とは?

このスキルは、プロダクトインタラクションを明確なビジュアルストーリーに変換するための体系的なガイドです。対象読者は、Remotionを使用してプロダクトデモやUI広告を作成する開発者やデザイナーです。このスキルは、静的なショットから連続的なカメラ移動まで、目的に応じた適切な動きを選択する方法を提供します。具体的な手順として、状況の確立、行動の表示、結果の可読性の確保、そして次のアクションへの注意の誘導を段階的に説明します。スキルは、Claude Code、Cursor、CodexなどのAIエージェントツールに対応しており、`scripts/motion.mjs` という依存関係のないヘルパーファイルを提供しています。決定論的UI、サウンドとレンダリング、コレオグラフィーに関する詳細なリファレンスも含まれており、誰でも再現可能な高品質なプロダクトモーションの作成を支援します。

対応~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/hamgarian/remotion-product-motion/tree/HEAD/skills/remotion-product-motion

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

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

ドキュメント

Remotion プロダクトモーション は何をしますか?

プロダクトインタラクションを明確なビジュアルストーリーに変換します。状況を確立し、アクションを示し、その結果を読みやすくし、次のアクションに注意を移します。動きはブリーフに適合させます。静的なショット、サイレントフィルム、控えめなトランジション、連続的なカメラ移動は、すべて有効な選択肢です。

フィルムを確立する

オーディエンス、プロダクトの成果、長さ、寸法、必要な画面、提供されたアセットを特定します。サウンド、カメラ移動、ネイティブUI動作、キャプションに関する明示的な選択を引き継ぎます。不足している必須要素を解決し、付随的なスタイリングには妥当なデフォルトを選択します。

クレームを計画する前に、実際のインターフェースと利用可能なコンテンツを検査します。認識可能なタイポグラフィ、プロポーション、色、ラベル、インタラクション動作を保持します。認証された正規のアセットを使用し、合成されたデモデータにはラベルを付けます。宣伝されたカウント、カウント単位、フィルター、重複排除方法のソースとスナップショット日付を記録します。代表的なサブセットは、カタログ全体のクレームを実証するものではありません。

各ショットのフレーム間隔、焦点ターゲット、アクション/結果、読み取り間隔、トランジション、オプションのサウンドキューを含む、コンパクトなショット計画を書きます。エンディングも含めます。ランドスケープとポートレートのフレーミングは、両方が要求された場合に別々に計画します。トリミングだけでは、コントロールやラベルが失われる可能性があります。

関連するガイダンスを選択する

  • カメラ移動、イージング、オーバーラップトランジションの計画、またはレイアウトやカーソルターゲットの調整を行う際は、コレオグラフィー を読んでください。
  • アニメーション、ネイティブCSS動作、モーションブラー、または個別の画面間のハードカットを実装する際は、決定論的UI を読んでください。
  • オーディオの配置、エクスポートの最適化、または納品するフィルムの検証を行う際は、サウンドとレンダリング を読んでください。そのビジュアル検証セクションはサイレント作品にも適用されます。

scripts/motion.mjs を、便利な再利用可能な数学として使用してください。これは依存関係がありません。ターゲットプロジェクトに適切な相対パスでコピーまたはインポートしてください。統合前にそのエクスポートと引数の契約を検査してください。progress、expoIn、expoOut、track はタイミングを処理し、cameraAt と project は構成されたフレーミングの評価を支援し、selectState はカットを選択し、cueStartFrame と duckGain はオーディオ配置を支援します。ヘルパーファイルはオプションであり、Remotionプロジェクトを作成するものではありません。このスキルは、任意のリポジトリデモから独立して動作します。

構築と検査

アニメーションをフレームと固定入力の純粋関数にします。個別の画面選択は時間サンプリングの外側、連続アニメーションフックはその内側、オーディオはその外側に保持します。この区別とそのクロスフェード例外については、決定論的リファレンスを参照してください。

最初に、代表的なアクションとハンドオフを1つ実装します。読み取り間隔、速度ピーク、カット境界、および宛先でレンダリングされたフレームを検査してから、パターンを繰り返します。アクションが不明瞭な場合は、タイミング、ステージング、または階層を変更します。装飾では、欠落した因果関係を補うことはできません。

カメラ移動は、コンテキストを明らかにするか、注意を誘導する必要があります。連続的な移動がブリーフに適している場合は、独立してタイミングを調整されたパンとドリーのトラックをオーバーラップさせ、その投影結果を検査します。親オブジェクトが動いていても、その焦点オブジェクトが画面上で動くことの証明にはなりません。静的なホールドや完全に静的な状態は、ブリーフに役立つ場合は選択します。グレイン、ブリージング、シェイク、永続的な動きは、オプションの美的判断です。

レイアウトを編集した後は、下流のフロー、カメラターゲット、カーソルヒットポイント、スクロール境界、フレーミングを再評価します。レンダリングが成功しただけでは、それらを検証できません。

証拠を提出する

プロジェクトの固定ツールチェーンを使用して、要求されたフォーマットをレンダリングします。リスクのあるトランジションの前後の連続フレームと、再生が利用可能な場合は通常速度でのエンコード結果を検査します。テキスト、実際のコンテンツ、カーソルの位置合わせ、トリミング、アセットの準備状況、長さ、エンディングを確認します。サウンドについては、測定された信号チェックと実際のリスニングを区別します。

出力パス、実際に実行されたコマンド/チェック、素材の制限、未解決の欠陥を報告します。リアルタイム再生またはオーディオ試聴が利用できなかった場合は、明示的に述べてください。コンタクトシートはビジュアルレビューをサポートしますが、ペーシングやオーディオ品質を確立するものではありません。外部への公開または送信は、ユーザーの承認範囲内でのみ行ってください。

関連スキル