Remotion Video Creation

---
name: remotion-video-creation
description: Remotion のベストプラクティス - React で動画を作成する。3D、アニメーション、音声、字幕、チャート、トランジションなどをカバーするドメイン固有の29のルール。
metadata:
  tags: remotion, video, react, animation, composition, three.js, lottie
---

## 使用場面

Remotion のコードを扱い、ドメイン固有の知識が必要な場合にこのスキルを使用してください。

## 使い方

詳細な説明とコード例については、各ルールファイルをお読みください：

* [rules/3d.md](rules/3d.md) - Three.js と React Three Fiber を使用して Remotion で 3D コンテンツを作成する
* [rules/animations.md](rules/animations.md) - Remotion の基本的なアニメーションスキル
* [rules/assets.md](rules/assets.md) - Remotion で画像、動画、音声、フォントをインポートする
* [rules/audio.md](rules/audio.md) - Remotion での音声とサウンドの使用——インポート、トリミング、音量、速度、ピッチ
* [rules/calculate-metadata.md](rules/calculate-metadata.md) - コンポジションの長さ、サイズ、プロパティを動的に設定する
* [rules/can-decode.md](rules/can-decode.md) - Mediabunny を使用してブラウザが動画をデコードできるか確認する
* [rules/charts.md](rules/charts.md) - Remotion のチャートとデータビジュアライゼーションパターン
* [rules/compositions.md](rules/compositions.md) - コンポジション、静止画、フォルダー、デフォルトプロパティ、動的メタデータの定義
* [rules/display-captions.md](rules/display-captions.md) - TikTok スタイルのページと単語ハイライトに対応した Remotion での字幕表示
* [rules/extract-frames.md](rules/extract-frames.md) - Mediabunny を使用して指定タイムスタンプの動画フレームを抽出する
* [rules/fonts.md](rules/fonts.md) - Remotion で Google フォントとローカルフォントを読み込む
* [rules/get-audio-duration.md](rules/get-audio-duration.md) - Mediabunny を使用して音声ファイルの長さ（秒）を取得する
* [rules/get-video-dimensions.md](rules/get-video-dimensions.md) - Mediabunny を使用して動画ファイルの幅と高さを取得する
* [rules/get-video-duration.md](rules/get-video-duration.md) - Mediabunny を使用して動画ファイルの長さ（秒）を取得する
* [rules/gifs.md](rules/gifs.md) - Remotion のタイムラインと同期した GIF を表示する
* [rules/images.md](rules/images.md) - Img コンポーネントを使用して Remotion に画像を埋め込む
* [rules/import-srt-captions.md](rules/import-srt-captions.md) - @remotion/captions を使用して .srt 字幕ファイルを Remotion にインポートする
* [rules/lottie.md](rules/lottie.md) - Remotion に Lottie アニメーションを埋め込む
* [rules/measuring-dom-nodes.md](rules/measuring-dom-nodes.md) - Remotion で DOM 要素のサイズを測定する
* [rules/measuring-text.md](rules/measuring-text.md) - テキストサイズの測定、コンテナへのテキスト適合、オーバーフローの確認
* [rules/sequencing.md](rules/sequencing.md) - Remotion のシーケンスパターン——遅延、トリミング、項目の長さ制限
* [rules/tailwind.md](rules/tailwind.md) - Remotion で TailwindCSS を使用する
* [rules/text-animations.md](rules/text-animations.md) - Remotion のタイポグラフィとテキストアニメーションパターン
* [rules/timing.md](rules/timing.md) - Remotion の補間曲線——線形、イージング、スプリングアニメーション
* [rules/transcribe-captions.md](rules/transcribe-captions.md) - Remotion で字幕を生成するための音声文字起こし
* [rules/transitions.md](rules/transitions.md) - Remotion のシーントランジションパターン
* [rules/trimming.md](rules/trimming.md) - Remotion のトリミングパターン——アニメーションの最初または最後をトリミングする
* [rules/videos.md](rules/videos.md) - Remotion への動画埋め込み——トリミング、音量、速度、ループ、ピッチ