remotion-expert

Remotion エキスパート - 高パフォーマンスな動画生成

Remotion v4.0+、React 19、Next.js 16 のシニアスペシャリストです。プログラムによる動画生成、サブフレーム単位のアニメーション精度、2026年向けのAI駆動型動画ワークフローを専門としています。

🧭 概要

Remotionを使うと、Reactでプログラムによって動画を作成できます。このスキルにより、LLMの機能を拡張し、複雑なアニメーション、動的なデータ駆動型動画、高忠実度のレンダリングパイプラインに対応できるようになります。

主な機能

• プログラムによるアニメーション：useCurrentFrameとinterpolateを使って、フレーム単位で正確に制御できます。
• 動的なコンポジション：外部データに応じて変化する、パラメーター化された動画を作成できます。
• 最新のスタック：React 19.3、Next.js 16.2、Tailwind CSS 4.0向けに最適化されています。
• AIオーケストレーション：Remotion Skillsと連携し、指示に基づいて動画を編集できます。

---

🛠️ 目次

1. クイックスタート
2. 必須ルールとアンチパターン
3. 基本概念
4. 高度なパターン
5. 「してはいけないこと」一覧
6. リファレンス

---

⚡ クイックスタート

2026年向けに推奨されるBunを使って、新しいプロジェクトのひな形を作成します：

bun create video@latest my-video
cd my-video
bun start

基本的なコンポジションパターン

import { AbsoluteFill, interpolate, useCurrentFrame, useVideoConfig } from 'remotion';

export const MyVideo = () => {
  const frame = useCurrentFrame();
  const { fps, durationInFrames } = useVideoConfig();

  // Animate from 0 to 1 over the first second
  const opacity = interpolate(frame, [0, fps], [0, 1], {
    extrapolateRight: 'clamp',
  });

  return (
    <AbsoluteFill style={{ 
      backgroundColor: 'white', 
      justifyContent: 'center', 
      alignItems: 'center' 
    }}>
      <h1 style={{ opacity, fontSize: 100 }}>Remotion 2026</h1>
    </AbsoluteFill>
  );
};

---

🛡️ 必須ルールとアンチパターン

1. CSSアニメーションは禁止：標準のCSS @keyframesやtransitionは絶対に使用しないでください。これらは決定論的ではなく、レンダリング時に失敗します。interpolate()またはspring()を使用してください。
2. 決定論的なロジック：すべての計算がframeから導出されるようにしてください。コンポーネント内では、シード値を設定している場合を除き、Math.random()やDate.now()を避けてください。
3. Zodによる検証：パラメーター化された動画の型安全性を確保するため、defaultPropsには必ずZodを使用してください。
4. アセットのプリロード：ローカルアセットにはstaticFile()を使用し、リモートアセットがレンダリング時にアクセス可能であることを確認してください。

---

🧠 基本概念

1. フレームベースのアニメーション

すべては現在のフレームを基準に決まります。

const frame = useCurrentFrame();
const scale = interpolate(frame, [0, 20], [0, 1], { easing: Easing.bezier(0.25, 0.1, 0.25, 1) });

2. コンポジションのアーキテクチャ

コンポジションは「エントリーポイント」です。キャンバスを定義します。

<Composition
  id="Main"
  component={MyComponent}
  durationInFrames={300}
  fps={60}
  width={1920}
  height={1080}
  defaultProps={{ title: 'Hello' }}
/>

---

🚀 高度なパターン

AI駆動型の動画編集（2026年）

「Remotion Skills」と連携すると、自然言語の指示でコンポジションを変更できます。

// Pattern: Instruction-driven prop updates
export const aiUpdateHandler = async (instruction: string, currentProps: Props) => {
  // Logic to map LLM output to Remotion props
  return updatedProps;
};

動的なメタデータの計算

コンポジションのレンダリング前にデータを取得し、長さやサイズを設定します。

export const calculateMetadata = async ({ props }) => {
  const response = await fetch(`https://api.v2.com/video-data/${props.id}`);
  const data = await response.json();
  return {
    durationInFrames: data.duration * 60,
    props: { ...props, content: data.content }
  };
};

---

🚫 「してはいけないこと」一覧（よくある間違い）

• 使用しないでください：setTimeoutやsetIntervalは使用しないでください。レンダラーと同期しません。
• 使用しないでください：2026年のワークフローではnpmを使用せず、インストールと実行を1秒未満で行えるbunを優先してください。
• 忘れないでください：要素を遅らせるには、必ず<Sequence>を使用してください。フレームオフセットを手動で設定すると、エラーが発生しやすくなります。
• 使用しないでください：Tailwind 3.xのパターンは使用せず、レスポンシブな動画レイアウトにはTailwind 4.0のネイティブなコンテナークエリーを活用してください。
• 使用しないでください：アニメーションの進行状況にuseStateを使用しないでください。アニメーションの状態は常にframeから導出する必要があります。
• 注意してください：useMemoを使わずにレンダーループ内で負荷の高い計算を行わないでください。コンポーネントは毎フレームレンダリングされることを忘れないでください。
• 使用しないでください：window.requestAnimationFrameに依存する外部ライブラリは使用しないでください。Remotionのレンダラーではキャプチャされません。
• ハードコードしないでください：フレーム数をハードコードせず、定数や2 * fpsのような相対計算を必ず使用してください。

---

📚 リファレンス

• アニメーションとタイミング - 精密な補間とスプリング。
• コンポジションとProps - 複雑な動画プロジェクトの構成。
• メディアとアセット - 動画、音声、Lottieの扱い。
• シーケンスとシリーズ - タイムラインのオーケストレーション。
• Next.jsとの連携 - 動画向けのSSRとServer Actions。

---

更新日：2026年1月22日 - 20:00