remotion

Remotion - React による動画制作

Remotion は React を使ってプログラムから動画を作成するためのフレームワークです。本スキルセットは、Remotion を使ったプログラムによる動画作成に関する包括的なスキル群です。

使用するタイミング

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

• React コンポーネントによる動画コンポジションの作成
• フレームベースのアニメーションによる要素のアニメーション化
• 音声、動画、画像アセットの操作
• チャートおよびデータ可視化の構築
• テキストアニメーションとキャプションの実装
• Three.js を使った 3D コンテンツの活用
• トランジションとシーケンスの適用
• Tailwind CSS および Lottie アニメーションの統合

基本概念

Remotion では次の要素を使って動画を作成できます。

• React コンポーネント: 使い慣れた React の構文で動画コンテンツを構築
• フレームベースのアニメーション: すべてのアニメーションを useCurrentFrame() フックで駆動
• コンポジション: 長さ、サイズ、プロップスを指定して動画コンポジションを定義
• アセット: 画像、動画、音声、フォントをインポートして操作
• レンダリング: カスタマイズ可能な設定でプログラムから動画を書き出し

主な機能

• アニメーションのフレーム単位での制御
• 動的なメタデータの計算
• メディア処理（トリミング、音量、速度、ピッチ）
• キャプションの生成と表示
• チャートによるデータ可視化
• 3D コンテンツの統合
• 高度なテキストアニメーション
• シーンのトランジションとシーケンス

使い方

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

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

• references/animations.md - Remotion の基本的なアニメーション技法
• references/timing.md - 補間カーブ: リニア、イージング、スプリングアニメーション
• 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. 滑らかなアニメーションには interpolate を使用する - イージング関数を備えた組み込みの補間を利用します
5. extrapolation をクランプする - 値が意図した範囲を超えないようにします
6. こまめにテストする - レンダリング前に Remotion Studio でプレビューします

リソース

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