Remotion - React でのビデオ作成

Remotion を使用したプログラムによるビデオ作成の包括的なスキルセット。Remotion は React を使用してビデオをプログラムで作成するためのフレームワークです。

使用時機

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

• React コンポーネントを使用したビデオコンポジションの作成
• フレームベースのアニメーションを使用した要素のアニメーション化
• オーディオ、ビデオ、画像アセットの操作
• チャートとデータビジュアライゼーションの構築
• テキストアニメーションとキャプションの実装
• Three.js を用いた 3D コンテンツの使用
• トランジションとシーケンシングの適用
• Tailwind CSS と Lottie アニメーションの統合

コア コンセプト

Remotion では以下を使用してビデオを作成できます:

• React コンポーネント: 身近な React 構文でビデオコンテンツを構築
• フレームベースのアニメーション: すべてのアニメーションが useCurrentFrame() フックによって駆動される
• コンポジション: 期間、寸法、プロップスを含むビデオコンポジションを定義
• アセット: 画像、ビデオ、オーディオ、フォントをインポート・操作
• レンダリング: カスタマイズ可能な設定でビデオをプログラムでエクスポート

主な機能

• アニメーションのフレームごとの制御
• 動的なメタデータ計算
• メディア処理 (トリミング、ボリューム、スピード、ピッチ)
• キャプション生成と表示
• チャートを使用したデータビジュアライゼーション
• 3D コンテンツ統合
• プロフェッショナルなテキストアニメーション
• シーンのトランジションとシーケンシング

使用方法

詳細な説明とコード例については、個別のルールファイルをご覧ください:

コアアニメーション & タイミング

• references/animations.md - Remotion の基本的なアニメーション技術
• references/timing.md - 補間曲線: linear、easing、spring アニメーション
• references/sequencing.md - アイテムの遅延、トリミング、期間制限
• references/trimming.md - アニメーションの開始または終了をカット

コンポジション & メタデータ

• references/compositions.md - コンポジション、スティル、フォルダ、デフォルトプロップスの定義
• references/calculate-metadata.md - コンポジションの期間、寸法、プロップスを動的に設定

アセット & メディア

• references/assets.md - 画像、ビデオ、オーディオ、フォントのインポート
• references/images.md - Img コンポーネントを使用した画像埋め込み
• references/videos.md - トリミング、ボリューム、スピード、ループ、ピッチを備えたビデオ埋め込み
• references/audio.md - トリミング、ボリューム、スピード、ピッチ付きのオーディオ・サウンドの使用
• references/gifs.md - タイムラインと同期した GIF の表示

テキスト & タイポグラフィ

• references/text-animations.md - タイポグラフィとテキストアニメーションパターン
• references/measuring-text.md - テキスト寸法の測定、テキストフィッティング、オーバーフロー確認
• references/fonts.md - Google Fonts とローカルフォントの読み込み

キャプション & トランスクリプション

• references/display-captions.md - TikTok スタイルのページとワード強調表示によるキャプション表示
• references/import-srt-captions.md - @remotion/captions を使用した .srt 字幕ファイルのインポート
• references/transcribe-captions.md - キャプション生成のためのオーディオトランスクリプション

データビジュアライゼーション

• references/charts.md - チャートとデータビジュアライゼーションパターン

高度な機能

• references/3d.md - Three.js と React Three Fiber を使用した 3D コンテンツ
• references/lottie.md - Lottie アニメーションの埋め込み
• references/transitions.md - シーントランジションパターン

スタイル & レイアウト

• references/tailwind.md - Remotion での TailwindCSS の使用
• references/measuring-dom-nodes.md - DOM 要素の寸法測定

メディア処理 (Mediabunny)

• references/can-decode.md - ブラウザでビデオをデコード可能かどうかの確認
• references/extract-frames.md - 特定のタイムスタンプからビデオフレームを抽出
• references/get-audio-duration.md - オーディオファイルの期間を取得
• references/get-video-dimensions.md - ビデオファイルの幅と高さを取得
• references/get-video-duration.md - ビデオファイルの期間を取得

クイックスタート例

import { useCurrentFrame, useVideoConfig, interpolate } from "remotion";

export const MyComposition = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
    extrapolateRight: 'clamp',
  });

  return (
    <div style={{ opacity }}>
      <h1>Hello Remotion!</h1>
    </div>
  );
};

ベストプラクティス

1. 常に useCurrentFrame() を使用する - すべてのアニメーションを現在のフレームから駆動する
2. CSS アニメーションを回避する - ビデオでは正しくレンダリングされません
3. 秒単位で考える - フレーム計算では秒単位の時間に fps を掛ける
4. スムーズなアニメーションに補間を使用する - イージング関数を備えた組み込み補間
5. 補外をクランプする - 値が意図した範囲を超えるのを防ぐ
6. 頻繁にテストする - レンダリング前に Remotion Studio でプレビューする

リソース

• ドキュメント: https://www.remotion.dev/docs
• リポジトリ: https://github.com/remotion-dev/remotion
• スキルリポジトリ: https://github.com/remotion-dev/skills
• コミュニティ: Discord と GitHub Discussions
• ライセンス: MIT