YYL Remotion ビデオ

YYL Remotion ビデオ は何をしますか？

記事、スクリプト、ノート、明確なアウトラインを Remotion ビデオプロジェクト に変換します。 このスキルはビデオファーストです。クリック駆動のウェブプレーヤー、ウェブ presentation/、TTS 合成はこのワークフローに含まれません。

コア出力

my-video/
├── article.md
├── script.md
├── outline.md
├── notes.md
└── remotion/
    ├── src/Root.tsx
    ├── src/Composition.tsx
    ├── src/chapters/<NN>-<id>/
    │   ├── <Chapter>.tsx
    │   ├── narrations.ts
    │   └── timing.ts
    ├── public/assets/
    ├── preview-stills/
    └── out/

バンドルされているスキルリソース:

themes/       # カラー/タイポグラフィシステム
templates/    # コピー可能な Remotion TSX スターターポイント
references/   # クラフト、テーマ、テンプレートガイダンス

実行強度

ファイルを書き込む前に決定します:

強度	使用する場面	動作
Quick	450文字以内、60秒以内、テーマテスト、ドラフトデモ	1チャプター、少数のビート、直接実装
Standard	1-4分、通常の公開可能な解説	スクリプト+アウトライン、最初のチャプターをアンカーにしてから続行
Strict	4分超、ブランド/商用/高リスクコンテンツ	より完全な計画、より多くの静止画チェック、より遅いチャプターレビュー

1行で報告します:

<Quick/Standard/Strict> を使用します。理由は <長さ/リスク/ターゲット>。

ワークフロー

1. 入力ゲート

   • ユーザーがソーステキスト、スクリプト、ノート、または明確なアウトラインを提供した場合のみ進行します。
   • トピックのみが与えられた場合は、資料を求めます。完全なビデオをでっち上げないでください。

2. コンテンツファイル

   • ソース素材が提供された場合は article.md に保存します。
   • 最終的な話すテキストを script.md に保存します。
   • 開発計画を outline.md に保存します。
   • outline.md では、チャプター、ビート、画面コンテンツ、情報プール、アセットを計画します。
   • outline.md は、正確なアニメーションの実装を規定しません。

3. テーマ選択

   • このスキルにバンドルされているテーマのみを使用します: themes/command-film、 themes/studio-white、themes/research-desk。
   • web-video-presentation からテーマを再利用またはインポートしないでください。

4. テンプレート選択

   • ユーザーが既知のレイアウトやアニメーションメカニズムを要求した場合は、references/TEMPLATES.md を読んでください。
   • ラグジュアリーダークポートフォリオ、3D パースペクティブ水平カルーセル、プレミアムエージェンシーギャラリーリクエストには templates/luxury-perspective-gallery を使用します。

5. Remotion プロジェクト

   • 既存の remotion/ が存在する場合はそれを再利用します。
   • ない場合のみ作成します:

     npx create-video@latest --yes --blank --no-tailwind remotion
     

   • 選択したテンプレートに Tailwind が必要な場合は、Tailwind サポート付きでプロジェクトを作成するか、テンプレートファイルをコピーする前に Tailwind を追加します。
   • 依存関係は、remotion/node_modules がない場合、または依存関係がないために Remotion コマンドが失敗した場合にのみインストールします。

6. タイミング

   • 音声を合成しないでください。
   • ナレーションとビジュアルの複雑さから時間を見積もります。
   • デフォルトは fps = 30、width = 1920、height = 1080 です。
   • テキストは narrations.ts に保存し、推定 durationFrames は timing.ts に保存します。

7. 実装

   • 各チャプターの前に references/REMOTION-CRAFT.md を読んでください。
   • アニメーションには useCurrentFrame()、interpolate()、Easing、Sequence を使用します。
   • 主要なアニメーションに CSS トランジション / CSS アニメーション / GSAP を使用しないでください。
   • Tailwind は静的レイアウトのスタイル設定に使用できますが、Tailwind のアニメーションユーティリティは許可されていません。

8. 検証

   • 次のコマンドを実行します:

     cd remotion
     npm run lint
     

   • チャプターごとに少なくとも1枚、または短いフルビデオの場合は2〜4枚の静止画をレンダリングします:

     npx remotion still <composition-id> --frame=<フレーム> --scale=0.5 --output=preview-stills/<名前>.png
     

   • 静止画が正しく見える場合、mp4 をレンダリングします:

     npx remotion render <composition-id> out/<名前>.mp4
     

9. ノート

   • notes.md を、fps、解像度、総フレーム数、推定時間、チェック済み静止画、レンダリングされた mp4 パス、およびオーディオ/字幕はポストプロダクションであることを示す情報で更新します。

テーマ選択

テーマ	最適な用途	雰囲気
command-film	エージェント、ターミナル、自動化、開発者ツール	ダークなシネマティックコマンドルーム
studio-white	SaaS デモ、ローンチ、コース、製品チュートリアル	クリーンなホワイト製品スタジオ
research-desk	エッセイ、レポート、論文、ビジネス分析	落ち着いた分析デスク

完全なテーマノートについては、references/THEMES.md を読んでください。

テンプレート選択

テンプレート	最適な用途	雰囲気
luxury-perspective-gallery	プレミアムポートフォリオ、プロダクトショーケース、3D 水平カルーセル	ダークなサイバーミニマルエージェンシースライダー
charity-doodle-poster	非営利ポスター、手描きの動物ヒーロー、線が揺れるエディトリアルウェブエフェクト	レトロなインクブラシストップモーションポスター

完全なテンプレートノートについては、references/TEMPLATES.md を読んでください。

Remotion ルール

• Root.tsx で Composition を使用します。
• Sequence を使用してビートをタイムラインに配置します。
• モーションには useCurrentFrame() + interpolate() を使用します。
• 静的アセットは remotion/public/assets/ に配置し、staticFile() で参照します。
• 最終レンダリング前の静止画チェックは必須です。
• 最終的な mp4 は、ユーザーが後でポストプロダクションでオーディオを提供しない限り、無音です。