使用タイミング
Remotionコードを扱う際に、このスキルを使用してドメイン固有の知識を取得してください。
新規プロジェクトのセットアップ
空のフォルダや既存のRemotionプロジェクトがないワークスペースでは、以下を使用してプロジェクトをスキャフォールディングします：
npx create-video@latest --yes --blank --no-tailwind my-video
my-video を適切なプロジェクト名に置き換えてください。
プレビューの開始
動画をプレビューするためにRemotion Studioを起動します：
npx remotion studio
オプション：1フレームレンダリング確認
CLIを使用して1フレームだけをレンダリングし、レイアウト、色、タイミングなどを確認できます。 軽微な編集やリファクタリングのみの場合、またはStudioや以前のレンダリングですでに十分な確信がある場合は、この手順をスキップしてください。
npx remotion still [composition-id] --scale=0.25 --frame=30
30fpsの場合、--frame=30 は1秒の位置です（--frame は0ベースです）。
キャプション
キャプションや字幕を扱う場合は、./rules/subtitles.md ファイルを読み込んで詳細情報を取得してください。
FFmpegの使用
動画のトリミングや無音検出など、一部の動画操作にはFFmpegを使用する必要があります。./rules/ffmpeg.md ファイルを読み込んで詳細情報を取得してください。
無音検出
動画ファイルや音声ファイルから無音部分を検出・トリミングする必要がある場合は、./rules/silence-detection.md ファイルを読み込んでください。
オーディオビジュアライゼーション
オーディオを可視化する（スペクトラムバー、波形、低音反応エフェクトなど）必要がある場合は、./rules/audio-visualization.md ファイルを読み込んで詳細情報を取得してください。
サウンドエフェクト
サウンドエフェクトを使用する必要がある場合は、./rules/sfx.md ファイルを読み込んで詳細情報を取得してください。
使用方法
詳細な説明とコード例については、個別のルールファイルを参照してください：
- rules/3d.md - Three.jsとReact Three Fiberを使用したRemotionの3Dコンテンツ
- rules/animations.md - Remotionの基本的なアニメーションスキル
- rules/assets.md - 画像、動画、音声、フォントのRemotionへのインポート
- rules/audio.md - Remotionでの音声・サウンドの使用 - インポート、トリミング、音量、速度、ピッチ
- rules/calculate-metadata.md - コンポジションの長さ、サイズ、propsを動的に設定
- rules/can-decode.md - Mediabunnyを使用してブラウザで動画がデコード可能か確認
- rules/charts.md - チャート・データ可視化パターン（棒グラフ、円グラフ、折れ線グラフ、株価チャート）
- rules/compositions.md - コンポジション、スチル、フォルダ、デフォルトprops、動的メタデータの定義
- rules/extract-frames.md - Mediabunnyを使用して指定タイムスタンプのフレームを動画から抽出
- rules/fonts.md - RemotionでのGoogleフォント・ローカルフォントの読み込み
- rules/get-audio-duration.md - Mediabunnyを使用して音声ファイルの長さ（秒）を取得
- rules/get-video-dimensions.md - Mediabunnyを使用して動画ファイルの幅と高さを取得
- rules/get-video-duration.md - Mediabunnyを使用して動画ファイルの長さ（秒）を取得
- rules/gifs.md - Remotionのタイムラインと同期したGIFの表示
- rules/images.md - Imgコンポーネントを使用した画像の埋め込み
- rules/light-leaks.md - @remotion/light-leaks を使用したライトリークオーバーレイ効果
- rules/lottie.md - RemotionへのLottieアニメーションの埋め込み
- rules/measuring-dom-nodes.md - RemotionでのDOM要素の寸法計測
- rules/measuring-text.md - テキストの寸法計測、コンテナへのテキストフィット、オーバーフローの確認
- rules/sequencing.md - Remotionのシーケンスパターン - アイテムの遅延、トリミング、長さ制限
- rules/tailwind.md - RemotionでのTailwindCSSの使用
- rules/text-animations.md - Remotionのタイポグラフィ・テキストアニメーションパターン
- rules/timing.md - interpolate、ベジェイージング、スプリングによるタイミング制御
- rules/transitions.md - Remotionのシーントランジションパターン
- rules/transparent-videos.md - 透明度付き動画のレンダリング
- rules/trimming.md - Remotionのトリミングパターン - アニメーションの先頭または末尾をカット
- rules/videos.md - Remotionへの動画埋め込み - トリミング、音量、速度、ループ、ピッチ
- rules/parameters.md - Zodスキーマを追加して動画をパラメータ化可能にする
- rules/maps.md - Mapboxを使用した地図の追加とアニメーション
- rules/silence-detection.md - FFmpegのloudnormとsilencedetectを使用した適応型無音検出
- rules/voiceover.md - ElevenLabs TTSを使用したAI生成ナレーションのRemotionコンポジションへの追加