remotion-best-practices

使用するタイミング

Remotion プロジェクトで作業するときは、いつでもこのスキルを使用してください。以下が含まれます。

• 新しい動画コンポジションやアニメーションの作成
• 既存の Remotion コンポーネントの編集
• Remotion プロジェクトへのアセット（画像、音声、動画）の追加
• アニメーションシーケンス、トランジション、エフェクトの構築
• Remotion プロジェクトのディレクトリに関するあらゆるタスク

主なトリガー： 「Remotion」という単語、remotion-videos/ を含むパス、remotion.config.ts のようなファイル、または React でアニメーション動画コンテンツを作成する依頼。

使用方法

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

• 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 を使用した .srt 字幕ファイルの Remotion へのインポート
• 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 - シーンのトランジションパターン
• rules/trimming.md - Remotion のトリミングパターン：アニメーションの冒頭または末尾をカット
• rules/videos.md - Remotion への動画の埋め込み：トリミング、音量、速度、ループ、ピッチ
• rules/parameters.md - Zod スキーマを追加して、動画をパラメーター化可能にする
• rules/maps.md - Mapbox を使った地図の追加とアニメーション