remotion-best-practices

使用するタイミング

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

キャプション

キャプションや字幕を扱うときは、詳細について ./rules/subtitles.md ファイルを読み込んでください。

FFmpeg の使用

動画のトリミングや無音部分の検出など、一部の動画操作には FFmpeg を使用する必要があります。詳細については、./rules/ffmpeg.md ファイルを読み込んでください。

オーディオの可視化

オーディオを可視化する必要がある場合（スペクトラムバー、波形、低音に反応するエフェクトなど）は、詳細について ./rules/audio-visualization.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 - コンポジションの長さ、サイズ、プロパティを動的に設定する
• rules/can-decode.md - Mediabunny を使用して、ブラウザーで動画をデコードできるか確認する
• rules/charts.md - Remotion のチャートとデータ可視化のパターン（棒、円、折れ線、株価チャート）
• rules/compositions.md - コンポジション、静止画、フォルダー、デフォルトプロパティ、動的なメタデータの定義
• 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 - タイポグラフィとテキストアニメーションのパターン
• rules/timing.md - Remotion の補間曲線（線形、イージング、スプリングアニメーション）
• rules/transitions.md - シーン遷移のパターン
• rules/transparent-videos.md - 透過動画のレンダリング
• rules/trimming.md - Remotion のトリミングパターン（アニメーションの冒頭や末尾をカットする）
• rules/videos.md - Remotion への動画の埋め込み（トリミング、音量、速度、ループ、ピッチ）
• rules/parameters.md - Zod スキーマを追加して、動画をパラメーター化できるようにする
• rules/maps.md - Mapbox を使用して地図を追加し、アニメーション化する
• rules/voiceover.md - ElevenLabs TTS を使用して、AI 生成のナレーションを Remotion コンポジションに追加する