remotion

Remotion のエントリーポイント

Remotion は React から動画をレンダリングします。コンポジションは、frame と fps をコンテキストとして受け取り、それらの値からレイアウトとスタイルを決定論的に計算する React コンポーネントです。ヘッドレスブラウザーがフレームごとにキャプチャします。作成時の仕様全体は /remotion-core に記載されています。コンポジションのコードを書く前にお読みください。

1. プロジェクトの状態から始める

最初に一致した行を適用し、それより下の状態の行は評価しないでください。

状態	アクション
既存の HyperFrames HTML を Remotion に明示的に移行する	references/routes/hyperframes-to-remotion.md を読み、そのワークフローに直接進みます。意図の確認は省略します。
既存の Remotion プロジェクトで特定の操作を行う：調査、診断、検証、プレビュー、レンダリング、デプロイ	その操作のみを実行します。意図の確認とワークフローのルーティングは省略し、/remotion-cli と必要なドメインスキルを読み込みます。
既存のプロジェクトを特定の内容に編集する	編集を行います。意図の確認は実行しないでください。
BRIEF.md が存在する	workflow と flow を読み、そのワークフローを実行します。ブリーフに関する質問はしないでください。
ブリーフはないが、remotion.config.ts または src/Root.tsx が存在する	プロジェクトファイルから作業を再開します。既存のコンポジションから該当するワークフローを推測します。一意に特定できない場合は、ルーティングに関する質問のみを 1 つ尋ね、意図の確認は実行しないでください。
新規作成	意図の確認（references/intent-interview.md）を実行してから、§ 2 の表に従って一度だけルーティングします。

新規作成の依頼で動画の題材や入力が特定されていない場合は、ルーティングする前に動画の内容を尋ねてください。何かを尋ねる前に、ユーザーの希望を確認します（references/intent-interview.md の手順 1）。入力が figma.com の場合は、受付方法は変わりますが、ルーティングは変わりません。

プロジェクトの Remotion バージョンを最新に保つ

スキャフォールドされたプロジェクトでは、package.json に remotion@<version> が固定されています。プロジェクトを再開するときは、レンダリングに影響するコマンドを初めて実行する前に、一度だけアップグレードを確認してください。

npx remotion upgrade --dry-run

この確認は読み取り専用で、利用可能なアップグレードを報告します。プロジェクトのバージョンが古い場合は、npx remotion upgrade を適用してから、npx remotion studio でコンポジションが引き続き読み込まれることを確認します。実行結果の要約には、変更前と変更後のバージョンを記載してください。アップグレード後にコンポジションが壊れた場合は、package.json を元に戻し、固定されているバージョンで続行してください。

2. 新規作成をルーティングする

最初に一致した行を使用します。依頼の中でたまたま言及されている単語やファイル形式ではなく、求められている 成果物 に基づいて一致させてください。

優先度	依頼	ワークフロー
1	既存の HyperFrames HTML コンポジションを明示的に移行する	/hyperframes-to-remotion
2	プレゼンテーション、ピッチデック、またはスライドごとのデックを作成する	/remotion-slideshow
3	既存のトークヘッド映像にキャプションまたは字幕を追加する	/remotion-captions
4	既存の映像を変更せずに、デザインされたグラフィックオーバーレイを追加する	/remotion-overlay
5	ナレーションなしで、音楽トラックに同期したビート動画を作成する	/remotion-music-video
6	10 秒未満の、短くナレーションなしのモーション重視のコンテンツを作成する	/remotion-motion-graphics
7	データを可視化する — チャート、カウンター、グラフ、動きのあるインフォグラフィック	/remotion-data-viz
8	ウェブサイト、製品、またはアプリをマーケティングまたは紹介する	/remotion-product-launch
9	独自のビジュアルを用いて、トピック、概念、または記事を解説する	/remotion-explainer
10	その他のカスタム動画またはコンポジション	/remotion-general

ルートを確定する前に、references/routes/<workflow>.md を読みます。候補がその仕様を満たさない場合は、ルーティングを続けてください。一致したルートファイルのみを読みます。

よくある曖昧さを解消する

• ナレーションがなく、動きそのものがメッセージとなる短いアニメーションタイトル、ロゴ演出、短いスタッター効果、または単独のローワーサードには、/remotion-motion-graphics を使用します。
• 既存の映像に字幕を付ける場合は /remotion-captions、デザインされた情報カードを重ねる場合は /remotion-overlay に振り分けます。
• 音楽ファイルを /remotion-music-video に振り分けるのは、そのビートグリッドが作品の構成を決める場合に限ります。
• データが主なメッセージとなるデータチャートには、/remotion-data-viz を使用します。
• 専門的なナラティブワークフローは最大約3分まで対応します。それより長い作品は /remotion-general に振り分けます。

3. 一度だけ振り分け、その後は参照しない

新規作成の場合、インテントレイヤー（references/intent-interview.md）は、最後に BRIEF.md を作成します。ワークフローが読み取る振り分け用の成果物はこのブリーフのみであり、それ以降にこのスキルやインタビューを再度参照することはありません。

4. プロジェクトをスキャフォールドする

# Interactive scaffold (recommended for first-time)
npx create-video@latest

# Non-interactive blank scaffold
npx create-video@latest --blank ./

# Start Studio dev server
npm run dev

作成を進める前に、該当するワークフローの SKILL.md を読んでください。

5. 必要に応じてドメインスキルを読み込む

必要なもの	スキル
コンポジションの構成、useCurrentFrame、interpolate、spring、Sequence、タイミング契約	/remotion-core
モーションのルール、アニメーションパターン、スプリング物理、interpolate のレシピ、イージング	/remotion-animation
spring、interpolate、タイミングカーブ、キーフレームのスタッガーパターン	/remotion-keyframes
デザイン仕様、カラーパレット、タイポグラフィ、ナレーション、ビートの計画	/remotion-creative
画像、音声、動画素材、字幕、カラーグレーディング、TTS	/remotion-media
CLI：render、studio、lambda、bundle、upgrade、still	/remotion-cli
データチャート、D3、recharts、カスタム SVG アニメーション	/remotion-data-viz

ドメインスキルがエンドツーエンドの成果物を担当することはありません。現在のワークフローで必要なものだけを読み込んでください。