remotion-best-practices

使用するタイミング

Remotion のコードを扱う際は、ドメイン固有の知識を得るためにこのスキルを使用してください。

新しいプロジェクトのセットアップ

既存の Remotion プロジェクトがない空のフォルダーまたはワークスペースでは、次のコマンドでひな形を作成してください。

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

my-video を適切なプロジェクト名に置き換えてください。

プレビューの開始

動画をプレビューするには、Remotion Studio を起動してください。

npx remotion studio

オプション：1 フレームのレンダリング確認

レイアウト、色、タイミングを手早く確認するために、CLI で単一フレームをレンダリングできます。
簡単な編集や純粋なリファクタリングの場合、または Studio や以前のレンダリングですでに十分な確信がある場合は、省略してください。

npx remotion still [composition-id] --scale=0.25 --frame=30

30 fps の場合、--frame=30 は 1 秒の位置です（--frame はゼロ始まりです）。

キャプション

キャプションや字幕を扱う場合は、詳細について ./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 - Remotion のチャートとデータビジュアライゼーションのパターン（棒グラフ、円グラフ、折れ線グラフ、株価チャート）
• rules/compositions.md - コンポジション、静止画、フォルダー、デフォルト props、動的メタデータを定義する
• rules/extract-frames.md - Mediabunny を使用して、指定したタイムスタンプで動画からフレームを抽出する
• rules/fonts.md - Remotion で Google Fonts とローカルフォントを読み込む
• 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 コンポーネントを使用して Remotion に画像を埋め込む
• 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 と Bézier イージング、スプリングを使ったタイミング設定
• 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 を使用して Remotion のコンポジションに AI 生成のナレーションを追加する