remotion-overlay について
既存動画にタイミングを指定したアニメーショングラフィックを重ねるRemotionワークフローです。カードやローワーサード、コールアウトを追加したい制作者向けです。
主な機能
- 01Reactグラフィックのレイヤー表示
- 02タイムスタンプによる表示指定
- 03カード・ローワーサード・コールアウトのアニメーション
活用シーン
- 01既存映像へのローワーサード追加
- 02指定時刻での情報カード表示
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/remotion-overlayを入力して読み込まれたか確認します。
詳細
Remotion オーバーレイワークフロー
既存の背景動画に、アニメーション付きのグラフィックカード、ローワーサード、コールアウトバッジ、情報ポップアップを重ねます。
契約と前提条件
- 入力： 既存の動画ファイルと、オーバーレイするグラフィックおよびタイムスタンプのスケジュールのリスト。
- 出力：
<OffthreadVideo>で背景動画をレンダリングし、React グラフィックを重ねる Remotion コンポジション。 - トリガー： 「グラフィックのオーバーレイを追加」「カードで動画に注釈を付ける」「動画にローワーサードを重ねる」。
コンポジションの構造
<AbsoluteFill>の中に<OffthreadVideo src={staticFile('input.mp4')} />を含めます。- レイヤー化された
<Sequence>コンポーネントで、指定したタイムスタンプにグラフィックカードをレンダリングします。
コメント
Markdown 対応