Remotion

ユーザーの変更を保持しながら Remotion プロジェクトを構築・保守します。ファイルが予期せず変更された場合は、ユーザーが確認しない限り、意図的なものとして扱います。

ワークフロー

package.json、ロックファイル、既存のコンポジション、現在の差分、npx remotion versions を検査します。パッケージマネージャーとプロジェクト構造を再利用し、すべての remotion / @remotion/* パッケージを同じ正確なバージョンに保ちます。
要求された出力（コンポジション/ソースの変更、Studio プレビュー、レンダリングされたメディア、埋め込み Player、またはレンダリングサービス）を確認します。
決定論的なフレーム駆動型のビジュアルを実装し、レンダリング入力をシリアライズ可能に保ちます。
Studio でプレビューします。ユーザーがメディアファイルを要求した場合のみレンダリングします。
ffprobe でレンダリングされたメディアを検証し、代表的なフレームを検査します。
変更されたファイル、プレビュー/レンダリングの証拠、および配信証明を報告します。Prismer では、ルーズなサンドボックスパスは配信結果とは見なされません。

Prismer アーティファクトと配信契約

ユーザーがレンダリングメディアを要求した場合、最終ファイルを $PRISMER_ARTIFACTS_DIR（ディスパッチ <artifacts_dir>）に書き込みます。プロジェクトのスキャフォールド、フレーム、プローブ、その他の中間生成物は $PRISMER_SCRATCH_DIR または既存のプロジェクトツリーに配置します。その後、要求された各最終ファイルを正確に1回配信します：

cloud deliver "$PRISMER_ARTIFACTS_DIR/launch-video.mp4"

ファイルを書き込んだりレンダリングしたりしても、ファイルは添付されません。cloud deliver の成功レシートが配信のオラクルです。プレビューフレーム、一時オーディオ、または重複エンコードを、ユーザーが要求しない限り配信しないでください。ディスパッチアーティファクトディレクトリが存在しない場合は、結果をユーザー承認のプロジェクト出力パスに保持し、レシートを偽造するのではなく配信が利用できなかったことを報告します。

プロジェクト作成とコンポジション

空でないプロジェクトにスキャフォールドしないでください。適切なプロジェクトが存在しない場合、Node.js と Git が利用可能であることを確認してから実行します：

npx create-video@latest --yes --blank --no-tailwind my-video
cd my-video
npm install

意味のあるディレクトリ名を使用します。ユーザーが要求した場合、またはプロジェクトがすでに使用している場合にのみ Tailwind を追加します。続行する前に、生成されたマニフェスト、設定、グローバル CSS を検査します。ジェネレーターリリースでは、--no-tailwind が要求された場合でも Tailwind の依存関係とインポートが出力される可能性があります。プロジェクトがそれらを使用しない場合にのみそれらを削除し、Remotion パッケージバージョンを整合させておきます。

Prismer サンドボックスイメージでは、スキャフォールディング、npm ci、remotion add、プローブ、レンダリングなど、不足しているパッケージをインストールまたは呼び出す可能性のあるすべてのコマンドに対して、コマンドスコープの書き込み可能な npm キャッシュを使用します：

npm_config_cache="${PRISMER_SCRATCH_DIR:-/tmp}/npm-cache" npm ci

サンドボックスの所有権の不一致を回避するために、ユーザーのグローバル npm 設定を変更しないでください。

静的なコンポジションメタデータをインラインに保ちます：

<Composition
  id="LaunchVideo"
  component={LaunchVideo}
  durationInFrames={300}
  fps={30}
  width={1920}
  height={1080}
  defaultProps={{title: 'Launch day'}}
/>

calculateMetadata() は、期間、寸法、またはプロパティが入力、リモートデータ、またはメディア検査に本当に依存する場合にのみ使用します。Studio がプロップの編集をコードに保存できるように、defaultProps をインラインに保ちます。マルチシーンビデオの場合は、名前付きの <Sequence> 境界を使用し、すべてのタイミングを 1 つの fps 認識計画から導出します。

フレーム駆動型アニメーション

useCurrentFrame()、interpolate()、スプリング、またはイージングを使用してレンダリングアニメーションを駆動します。CSS トランジション、CSS アニメーション、実時間タイマー、または Tailwind アニメーションユーティリティは使用しないでください。これらは決定論的なレンダリングではありません。

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

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

  return (
    <AbsoluteFill style={{justifyContent: 'center', alignItems: 'center'}}>
      <Interactive.Div
        name="Hero title"
        style={{
          opacity: interpolate(frame, [0, fps], [0, 1], {
            extrapolateLeft: 'clamp',
            extrapolateRight: 'clamp',
            easing: Easing.bezier(0.16, 1, 0.3, 1),
          }),
          scale: interpolate(frame, [0, fps], [0.9, 1], {
            extrapolateLeft: 'clamp',
            extrapolateRight: 'clamp',
            easing: Easing.spring({damping: 200}),
            output: 'perceptual-scale',
          }),
          fontSize: 88,
        }}
      >
        Launch day
      </Interactive.Div>
    </AbsoluteFill>
  );
};

合成された transform 文字列よりも、個別の scale、translate、rotate CSS プロパティを優先します。外挿が意図的でない限り、有限アニメーションの両端をクランプします。

Studio 編集可能なマークアップ

Studio で選択、ドラッグ、サイズ変更、回転、スタイル設定、キーフレーム設定が可能な HTML および SVG 要素には Interactive.* を使用します。<Img> はすでにインタラクティブです。

各インタラクティブ要素に短く、ハードコードされた、説明的な name を付けます。
1 回限りのテキストは要素の直接の子として配置します。
Studio の書き戻しが重要な場合は、スタイルオブジェクト、interpolate() の範囲、出力、イージング、および外挿をインラインに保ちます。
useVideoConfig() から fps、width、height、durationInFrames などのサポートされている値のみをデストラクチャリングします。
抽出されたスタイル定数、オブジェクトのスプレッド、計算されたエフェクト配列、編集可能なキーフレーム範囲内の任意の変数は避けます。

カスタムコンポーネントの場合は、実装する前に公式の Remotion ドキュメントで現在の make-component-interactive API を確認します。

アセット、メディア、タイミング

ローカルアセットは public/ に配置し、staticFile() で参照します：

import {Audio, Video} from '@remotion/media';
import {AnimatedImage, CanvasImage, staticFile} from 'remotion';

export const MediaLayer = () => (
  <>
    <Video src={staticFile('clip.mp4')} />
    <Audio src={staticFile('music.mp3')} />
    <CanvasImage src={staticFile('logo.png')} />
    <AnimatedImage src={staticFile('sticker.gif')} />
  </>
);

Chrome バックエンドのアニメーション画像パスが不適切な場合は、@remotion/gif を使用します。エコシステムパッケージは npx remotion add <package> でインストールし、Remotion パッケージバージョンを整合させます。

再現可能なサンドボックスレンダリングには、ローカルまたはコンテンツアドレス指定のメディアを優先します。ソースまたはコンポジションプロップに Cookie、ベアラートークン、署名付き URL、またはマップ認証情報を焼き付けないでください。非同期アセット、フォント、キャプション、マップタイルの場合は、delayRender() / continueRender() を cancelRender() とペアにして、不足している依存関係がタイムアウトまでハングする代わりに明示的に失敗するようにします。

サポートされているコンポーネントでは from、durationInFrames、trimBefore を使用します。サポートされていないコンポーネントは <Sequence> でラップします：

<Sequence name="Product demo" from={2 * fps} durationInFrames={6 * fps}>
  <Video src={staticFile('demo.mp4')} trimBefore={1 * fps} />
</Sequence>

メディアの長さを意図した使用可能なセグメントに一致させます。シーンタイミングを 1 つの計画に保ち、トランジションが誤って重なったり空白フレームを残したりしないようにします。

エフェクトには、ショットを生成する最も複雑でない手法を使用します：

HTML、SVG、CSS。
要素または HtmlInCanvas ラッパーでの Remotion エフェクト。
最初の 2 つで生成できない場合のみ、カスタムエフェクトまたはシェーダー。

エフェクト配列は安定させておきます。エフェクト配列の形状を条件付きで変更する代わりに、別々の要素をレンダリングします。

キャプションとマルチメディア検査

キャプションを Remotion の Caption[] 形状に正規化し、取り込みタイムスタンプをミリ秒単位で保持します：

import type {Caption} from '@remotion/captions';

const caption: Caption = {
  text: 'Hello',
  startMs: 0,
  endMs: 800,
  timestampMs: null,
  confidence: null,
};

ミリ秒からフレームへの変換は、コンポジションの fps を使用してコンポジション境界でのみ行います。利用可能な場合は単語のタイミングを維持し、キャプションを読み取り可能なページにグループ化し、フレームクロックからアニメーションを駆動し、実際の出力寸法で折り返しと安全領域を確認します。

タイムスタンプパーサーを自作する代わりに、現在の @remotion/captions パーサーを SRT に使用します。キャプションを実装する前に、parse-srt、createTikTokStyleCaptions、および選択された文字起こしプロバイダーの現在の API を確認します。

オーディオ可視化には、フレームウィンドウ処理されたオーディオデータで @remotion/media-utils を使用します。リアルタイムアナライザーからバーや波形を駆動しないでください。チャートやテキストアニメーションの場合は、最初に最終的なジオメトリを計算し、フレームベースのクリッピング、不透明度、または変換で表示することで、バー、ラベル、グリフのレイアウトを安定させます。

ブラウザ側の期間、寸法、トリミング、クロッピング、メタデータ、およびコンテナ処理には Mediabunny を使用します。なじみのない API を使用する前に、https://mediabunny.dev/llms.txt を参照してください。mediabunny および @mediabunny/* のバージョンをプロジェクトの Remotion バージョンと互換性のある状態に保ちます。

マップ

ショットに応じて 1 つの手法を選択します：

手法	使用する場合
準備されたラスター	アニメーションオーバーレイを使用した決定論的な静的/衛星画像で十分な場合。
Mapbox	洗練されたスタイル、グローブレンダリング、または 3D 建物が必要な場合。
MapLibre	Mapbox API キーなしでオープンソースのベクターランタイムが推奨される場合。
MapTiler	ホストされたスタイルまたは地理注釈がプロジェクトに適合する場合。
CesiumJS	地形、グローブスケールの 3D、またはフライトカメラモーションが必要な場合。

マップ認証情報をコミットしないでください。画像、タイル、スタイルのライセンスと帰属を確認します。フレームキャプチャの前に、タイル、画像、フォント、カメラの初期化を待ちます。カメラの動きを Remotion のフレームクロックから駆動し、再現性が重要な場合は地理入力をローカルまたはコンテンツアドレス指定に保ち、実際のレンダリング環境でヘッドレス Chromium/WebGL を確認します。

Studio、レンダリング、検証

外部ブラウザを開かずに Studio を起動します：

npx remotion studio --no-open

出力された URL を使用します。/<composition-id> でコンポジションを直接開きます。たとえば、http://localhost:3000/LaunchVideo のようにします。

便利な Studio フラグ：

引数	目的
`--log=<level>`	`error`、`warn`、`info`、または `verbose` を設定します。
`--port=<number>`	特定のポートを要求します。
`--force-new`	同じプロジェクトとポートで別のインスタンスを起動します。

迅速な決定論的なレイアウトチェックのために、1 フレームをレンダリングします：

npx remotion still LaunchVideo out.png --scale=0.25 --frame=30

30 fps の場合、フレーム 30 は 1 秒です。既存のビジュアルテストで十分な証拠がすでに得られている場合は、これをスキップします。

レンダリング前に、CLI が意図したコンポジションを認識していることを確認します：

npx remotion versions
npx remotion compositions

デフォルトでは、Remotion に互換性のあるブラウザを管理させます。Prismer イメージには Playwright ブラウザが含まれている場合もありますが、その存在は互換性の保証ではありません。完全な Chrome バイナリはサンドボックスクラッシュパッドポリシーの下で失敗する可能性があり、新しい Headless Shell はスチルレンダリングに合格してもマルチフレームレンダリングに失敗する可能性があります。--browser-executable は、隣接フレームレンダリングテストに合格したイメージ所有のバージョンペア実行ファイルに対してのみ渡します。ブラウザを探してファイルシステム全体を検索したり、起動の成功を互換性の証拠として扱ったりしないでください。

ユーザーがメディアファイルを要求した場合のみレンダリングします：

npx remotion render LaunchVideo out.mp4 --codec=h264
npx remotion still LaunchVideo out.png --frame=0

Prismer サンドボックスは Node と FFmpeg を提供し、Remotion はプロジェクトキャッシュ内の互換性のあるブラウザを管理します。透明性やロスレス出力が必要でない限り、広範な再生のために MP4 の H.264 ビデオと AAC オーディオを優先します。書き込み可能な npm キャッシュのオーバーライドを各コマンドにスコープします：

npm_config_cache=/tmp/npm-cache npx remotion render LaunchVideo out.mp4 --codec=h264

CJK コンテンツの場合は、固定フォントを明示的にロードして待機します。システムのフォールバックファミリーが存在することだけに依存しないでください。隣接するエンコードフレームと孤立したスチルの両方を検査します。ヘッドレスレンダラーは、フォールバックフォントの実行中に正しいスチルを生成する可能性がありますが、完全なレンダリング中にちらついたりグリフが失われたりする可能性があります。

メディア検査を配信のオラクルとして扱います：

ffprobe -v error \
  -show_entries format=duration:stream=codec_name,width,height \
  -of compact out.mp4

期間、寸法、コーデック、および予想されるオーディオストリームを確認します。アニメーションまたはテキストが多いセクションのいくつかの隣接フレームを含む代表的なフレームを検査するか、可能な場合は結果を再生します。レンダリングコマンドが成功しただけでは配信の証拠にはなりません。孤立したスチルは正しいが、エンコードされたレンダリングに部分的なフレームやちらつきフレームがある場合は、プログラムによる renderStill() API を 1 つのバンドルされたサーブ URL と 1 つのブラウザインスタンスで使用して検証済みのフレームシーケンスを出力し、サンドボックスの FFmpeg でアセンブルします。CLI をループしてフレームごとに再バンドルしないでください。フォールバックを報告し、アセンブルされたファイルを再度プローブします。

Player、エディター、レンダリングサービス

インタラクティブな React プレビューには Remotion の <Player> を使用します。コンポジションを Player とレンダリングパスの両方で使用可能に保ちます。ビジュアルロジックをフォークしないでください。

ワークロードに応じてレンダリングアーキテクチャを選択します：

ブラウザ/クライアントレンダリング：制限されたユーザーローカル作業向け。
Node ワーカーとキュー：制御されたサーバー向け。
Remotion Lambda：AWS ネイティブのエラスティックレンダリング向け。
現在の公式 Vercel または Cloudflare 統合：ホスティングプラットフォームとインストールされている Remotion バージョンに一致する場合。

非自明なレンダリングは非同期にする必要があります。ジョブ ID を返し、進行状況と失敗を公開し、出力を永続的に保存し、リトライを冪等にします。

エディターの場合は、コンポジションプロップとタイムライン状態を明示的にモデル化します。レンダリング入力をシリアライズ可能でバージョン管理し、信頼できないプロップを検証し、リモートアセットアクセスを制限し、プレビュー状態を永続的なプロジェクト状態から分離します。

Remotion のレンダリングサーフェスは React です。Vue、Angular、または Svelte ホストの場合は、現在の公式統合を使用し、React コンポジション境界を明示的に保ち、記憶されたスターターに依存しないでください。

現在のドキュメントとアップグレード

記憶された API よりも現在の公式ドキュメントを優先します。Remotion ドキュメントの URL に .md を追加して Markdown を取得します。例：

https://www.remotion.dev/docs/sequence.md

Remotion ドキュメントの検索は ...

Remotion (Prismer-AI/PrismerCloud)

PrismerCloud) とは？

お気に入りのAIに質問する

ドキュメント

Remotion

ワークフロー

Prismer アーティファクトと配信契約

プロジェクト作成とコンポジション

フレーム駆動型アニメーション

Studio 編集可能なマークアップ

アセット、メディア、タイミング

キャプションとマルチメディア検査

マップ

Studio、レンダリング、検証

Player、エディター、レンダリングサービス

現在のドキュメントとアップグレード

Individual skills in this repo

Prismer-AI/PrismerCloud

関連スキル

steipete/video-frames

steipete/summarize

openclaw/openclaw

obra/superpowers

affaan-m/ECC

affaan-m/everything-claude-code