mcpField
R
remotion

remotion

github.com/oakossクリエイティブ・メディア20124 回インストール11 週間前に更新
リポジトリ

remotion について

Remotionは、Reactコンポーネントから動画を作成するツールキットで、アニメーション動画やデータ駆動の映像を制作する開発者向けです。フレーム単位でアニメーションを制御し、メディア、字幕、トランジション、レンダリングに対応します。

主な機能

  1. 01Reactコンポーネントによる動画構成
  2. 02補間とスプリングを使ったフレーム駆動アニメーション
  3. 03シーケンス構成とシーントランジション
  4. 04音声、動画、画像、GIFの処理
  5. 05字幕とテキストアニメーション
  6. 06動画レンダリングと動的メタデータ

活用シーン

  1. 01Reactコンポーネントからアニメーション動画を作成
  2. 02トランジションと音声を含む複数シーン動画の制作
  3. 03字幕と単語単位のハイライトを生成
  4. 04コンテンツに応じた長さの動画をレンダリング

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/oakoss/agent-skills --skill remotion

インストール後、Claude Code で/remotionを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
advanced-features.md
animations-and-timing.md
captions-and-text.md
compositions-and-sequencing.md
media-and-assets.md
transitions.md

詳細

Remotion

概要

Remotion を使うと、React コンポーネントでプログラムによる動画を作成できます。コンポジションでは、幅、高さ、fps、再生時間を明示して、レンダリング可能な動画を定義します。すべてのアニメーションは useCurrentFrame() で制御する必要があります。CSS アニメーションと Tailwind のアニメーションクラスは、レンダリング時にアーティファクトが発生するため使用できません。Remotion のコンポジション、アニメーション、オーディオ、キャプション、トランジション、メディア処理、レンダリングにはこのスキルを使用してください。一般的な React UI 開発を目的としたものではありません。

クイックリファレンス

パターンAPI／アプローチ主なポイント
基本的なアニメーションuseCurrentFrame() + interpolate()常に extrapolateRight: 'clamp' でクランプします
スプリングアニメーションspring({ frame, fps })滑らかで弾まない動きには { damping: 200 } を指定します
コンポジション<Composition id, component, durationInFrames, fps, width, height>必ず寸法を明示的に設定します
動的メタデータ<Composition> の calculateMetadataレンダリング前に再生時間、寸法、props を設定します
シーケンス<Sequence from, durationInFrames>useCurrentFrame() はローカルフレームを返します（0 から開始）
シリーズ<Series> と <Series.Sequence>順次再生します。重ね合わせには負のオフセットを指定します
トランジションfade()、slide()、wipe() を使う <TransitionSeries>合計再生時間 = シーンの再生時間の合計 − トランジションの再生時間
オーディオ／動画@remotion/media の <Audio>／<Video>ローカルアセットには staticFile() を使用します
キャプションcreateTikTokStyleCaptions()page.tokens を使ってトークン単位で単語をハイライトします
画像remotion の <Img>ネイティブの <img> や Next.js の <Image> は使用しないでください
GIFremotion の <AnimatedImage>タイムラインと同期します。速度の調整には playbackRate を使用します
フォント@remotion/google-fonts または @remotion/fontsトップレベルで loadFont() を呼び出します。準備が完了するまでレンダリングはブロックされます
3D コンテンツ@remotion/three の <ThreeCanvas>width／height を設定する必要があります。R3F の useFrame() は使用できません
テキストの計測@remotion/layout-utils の measureText()、fitText()先にフォントを読み込み、計測時とレンダリング時でプロパティを一致させます
パラメーター<Composition schema> の Zod スキーマトップレベルは z.object() にする必要があります。正確な Zod バージョンが必要です（Remotion のドキュメントを確認してください）
透過動画--pixel-format=yuva420p --codec=vp9ブラウザーでは WebM、編集ソフトウェアでは ProRes 4444 を使用します
マップuseCurrentFrame() を使う Mapboxinteractive: false、fadeDuration: 0 を設定し、--gl=angle --concurrency=1 でレンダリングします

よくある間違い

間違い正しい方法
CSS アニメーションや setTimeout を使用するタイムラインに同期したアニメーションには interpolate() と useCurrentFrame() を使用する
ネイティブの <img>、<video>、<audio> タグを使用する適切なプリロードのために、Remotion の <Img>、<Video>、<Audio> を使用する
動画の長さをハードコードするcalculateMetadata を使用し、コンテンツに応じて長さを動的に設定する
コンポジションの幅／高さを指定しないレンダリングの問題を避けるため、必ず寸法を明示的に定義する
React Three Fiber の useFrame() を使用する<ThreeCanvas> 内では Remotion の useCurrentFrame() を使用する
シーケンスに premountFor を設定し忘れる再生前にコンポーネントをプリロードできるよう、必ずシーケンスを事前マウントする
interpolate() の出力をクランプしない値が目標範囲を超えないように、extrapolateRight: 'clamp' を設定する
<ThreeCanvas> 内で layout="none" を指定せずに <Sequence> を配置する<ThreeCanvas> 内のすべての <Sequence> に layout="none" を設定する

委任

  • 利用可能な Remotion コンポーネントとその props を確認する：Explore エージェントを使用して、コンポジションの定義とアセットの使用箇所をコードベースから検索します
  • トランジションと音声を含む複数シーンの動画を作成する：Task エージェントを使用して、シーケンス、トランジション、音声トラックを順に構成します
  • 動的データを使った動画生成パイプラインを計画する：Plan エージェントを使用して、パラメーター化されたコンポジションとレンダリングのワークフローのアーキテクチャを設計します

参考資料

コメント

Markdown 対応