remotion-best-practices

---

使用するタイミング

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

使用方法

詳細な説明とコード例については、個別のルールファイルを参照してください。

• 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/display-captions.md - TikTok スタイルのページや単語のハイライトを使って、Remotion にキャプションを表示する方法
• rules/extract-frames.md - Mediabunny を使って、特定のタイムスタンプで動画からフレームを抽出する方法
• rules/fonts.md - Google Fonts とローカルフォントを Remotion に読み込む方法
• 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/import-srt-captions.md - @remotion/captions を使って Remotion に .srt 字幕ファイルをインポートする方法
• rules/lottie.md - Lottie アニメーションを Remotion に埋め込む方法
• 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 - Remotion の補間曲線 — 線形、イージング、スプリングアニメーション
• rules/transcribe-captions.md - 音声を書き起こして Remotion のキャプションを生成する方法
• rules/transitions.md - Remotion のシーン遷移パターン
• rules/transparent-videos.md - 透明度のある動画をレンダリングする方法
• rules/trimming.md - Remotion のトリミングパターン — アニメーションの冒頭や末尾をカットする方法
• rules/videos.md - Remotion に動画を埋め込む方法 — トリミング、音量、速度、ループ、ピッチ
• rules/parameters.md - Zod スキーマを追加して動画をパラメーター化する方法
• rules/maps.md - Mapbox を使って地図を追加し、アニメーション化する方法