Video Overlay Kit

VideoOverlayKit

動画用のBロールを作成できます。エージェントに希望を伝えるだけで、MP4が完成します。

無料 · レンダリングごとの費用ゼロ · MIT · MCP駆動 · お使いのマシン上で動作

---

動画用のBロールを作成できます。エージェントに希望を伝えるだけで、MP4が完成します。

レンダリングごとの費用はかかりません。デフォルトテーマにはWednesday Solutionsのデザインシステムを採用しています。ショート動画をたくさん公開する人や、After Effectsを習得したくない人向けに作られています。Claude Code、Codex、OpenCode、Cursor、Clineなど、またはModel Context Protocolに対応したMCP互換エージェントであれば、どれでも利用できます。

同じシーン仕様で、縦向きと横向きの両方に対応します。縦向きはTikTok／Instagram Reels／YouTube Shortsに、横向きはYouTube／デスクトップ／テレビに適しています。キャンバスの縦横比に合わせて、キットがレイアウトを自動で切り替えます。

list-reveal · タイトルと3つのポイントがタイミングに合わせて表示されます

縦向き · 1080×1920

横向き · 1920×1080

_{縦向き 仕様 · mp4   •   横向き 仕様 · mp4}

flow · AからB、Cへと続くプロセス

縦向き · 1080×1920

横向き · 1920×1080

_{縦向き 仕様 · mp4   •   横向き 仕様 · mp4}

comparison · 2つのものを対比します

縦向き · 1080×1920

横向き · 1920×1080

_{縦向き 仕様 · mp4   •   横向き 仕様 · mp4}

hub · 中心となるコンセプトに、周囲から要素がつながります

縦向き · 1080×1920

横向き · 1920×1080

_{縦向き 仕様 · mp4   •   横向き 仕様 · mp4}

上記のクリップはすべて実際に出力されたものです。長さは5〜6秒です。デフォルトテーマにはWednesday Solutionsのデザインシステムを採用しています。高画質版は、任意のmp4リンクをクリックしてご覧ください。

---

まずはこちら

MCP 対応のコーディングエージェント（Claude Code、Codex、OpenCode、Cursor、Cline など）の新しいセッションに貼り付けてください。セットアップはエージェントがすべて行います。リポジトリをクローンし、依存関係をインストールして、MCP を設定に組み込み、正常に動作することを確認します。

Set up github.com/alichherawalla/video-overlay-kit as an MCP server in
my coding agent.

1. Clone the repo to ~/code/video-overlay-kit (or ask me where to put it
   if that path is taken).
2. Run `npm install` inside the cloned directory.
3. Find my MCP config file and add a `video-overlay-kit` entry that runs
   `node <absolute-cloned-path>/bin/mcp.mjs`. Pick the right path for my
   agent:
     - Claude Code: `.mcp.json` in the current repo, otherwise
       `~/.claude/mcp_settings.json`.
     - Codex / OpenCode: their MCP config (usually `~/.codex/mcp.json`
       or similar — ask me if you can't find it).
     - Cursor / Cline: their MCP settings in the IDE config.
   Preserve any existing MCP servers in the config.
4. Verify the server starts by sending it a `tools/list` JSON-RPC request
   over stdio and confirming the tools `list_icons`, `validate_scene`, and
   `render_scene` come back.
5. Tell me to restart my agent so the new MCP server is picked up.

After setup, read the README at the cloned repo so you know how to author
scene specs. Default to the Wednesday Solutions light theme and 5-second
duration unless I say otherwise.

Claude Code を再起動します。次に、動画を作るよう依頼してください。

「『すべてのインシデントに対応するランブック』というタイトルで、drift、prompt injection、exfil attempts の3行を含む5秒のオーバーレイを作ってください。」

エージェントがアイコンを選び、シーンの仕様を書いて、MP4 をレンダリングし、ファイルパスを渡します。あとはエディターに取り込むだけです。

MCP を自分で設定する場合は、手動セットアップに進んでください。

---

作成できるもの

8つの構成要素があります。1つの4〜6秒のシーンに、自由に組み合わせて使えます。

title-overlay

フレーム上部に表示する、納品物のタイトルバーです。すべてのシーンで使用してください。これから見る動画の内容をひとことで伝えます。

タイトルを読んだ人が、動画の内容をすぐに理解できない場合は、書き直してください。

バーはフレームの上部に配置され、その下には細いラベンダー色のアクセントが入ります。80ptの太字で、中央揃えです。位置は固定されているため、選ぶことはできません。

{ "kind": "title-overlay", "id": "agenda",
  "text": "How to control AI traffic",
  "startFrame": 0, "endFrame": 150 }

list-reveal

1〜5行の縦並びのリストです。各行には任意でアイコンを付けられ、指定したフレームで表示されます。

表示したい項目が1〜5個ある場合に使います。

{ "kind": "list-reveal", "id": "outcomes",
  "position": { "x": 0.5, "y": 0.55 },
  "startFrame": 20, "endFrame": 150,
  "rows": [
    { "text": "One gateway in front of every model",          "iconName": "IconShield",   "revealAtFrame":  0 },
    { "text": "Input policy. Output policy.",                 "iconName": "IconFilter",   "revealAtFrame": 35 },
    { "text": "Every prompt, every dollar, every output",     "iconName": "IconChartBar", "revealAtFrame": 70 }
  ]
}

flow

2〜5個のノードを横に並べたシーケンスです。各ノードが表示されると、次のノードに向かって矢印が描かれ、その次のノードが表示されます。

順序に意味がある場合に使います。「インシデントを検知」から「ランブックを起動」、そして「封じ込め」へと進む流れがその例です。

{ "kind": "flow", "id": "incident-flow",
  "startFrame": 20, "endFrame": 150,
  "nodes": [
    { "iconName": "IconAlertOctagon", "label": "Incident" },
    { "iconName": "IconBook2",        "label": "Runbook" },
    { "iconName": "IconCircleCheck",  "label": "Contained" }
  ]
}

comparison

設定可能な仕切りを中央に置き、2つのアイコンを左右に並べます。それぞれの側にラベルと、任意でサブラベルを設定できます。

二者を対比する場合に使います。従来の方法と新しい方法の対比が典型的な例です。

仕切りに表示する文字列は設定できます。対比には "vs" がデフォルトで、加算または移行の関係を表す場合は "+" または "→" に変更します。

{ "kind": "comparison", "id": "old-vs-new",
  "startFrame": 20, "endFrame": 180,
  "left":  { "iconName": "IconClockHour3", "label": "Old way", "subLabel": "Manual review" },
  "right": { "iconName": "IconBolt",       "label": "New way", "subLabel": "Automated checks" },
  "divider": { "label": "vs", "showLine": true }
}

hub

中央に1つのアイコンを置き、その周囲に2〜4個の衛星アイコンを配置します。まず中央のアイコンが表示され、その後、中央から線が伸びるアニメーションとともに各衛星アイコンが表示されます。

中心となるものがあり、ほかのものがそれに結び付いている場合に使います。ポリシー、ログ記録、コスト、切り替えを制御するゲートウェイがその例です。

{ "kind": "hub", "id": "gateway-hub",
  "startFrame": 20, "endFrame": 150,
  "center": { "iconName": "IconShield", "label": "Gateway" },
  "satellites": [
    { "iconName": "IconLock",     "label": "Policy" },
    { "iconName": "IconActivity", "label": "Logging" },
    { "iconName": "IconCoin",     "label": "Cost" },
    { "iconName": "IconRefresh",  "label": "Swap" }
  ]
}

icon、text、lottie

自由に使える構成要素です。キャンバス上の好きな場所に Tabler アイコンを1つ配置したり、位置を自由に決められるテキストブロックを置いたり、アニメーション済みの Lottie アニメーションを使ったりできます。上記の複合コンポーネントでは合わない場合に使ってください。

{ "kind": "icon", "id": "hero", "name": "IconShieldCheck",
  "position": { "x": 0.5, "y": 0.45 }, "sizePx": 240,
  "startFrame": 10, "endFrame": 150 }

これらの全フィールドを説明したリファレンスを読むユーザーはほとんどいません。エージェントがスキーマを読み取ってくれます。すべてのフィールドを確認したい場合は、リファレンスセクションに進んでください。

---

外観をカスタマイズする

このキットには Wednesday Solutions のカラーパレットが付属しています。温かみのあるオフホワイトのキャンバスに、ラベンダーのアクセントを配しています。各シーンでは、デフォルトでトラックの背後にアンビエントブルームのグラデーションが表示され、タイトルテキストには夕焼けのグラデーションが適用されます。これが、すぐに使える「洗練された」見た目です。

すべてシーン仕様を通じて設定できます。JSON を編集する代わりに、エージェントに平易な言葉で指示します。

エージェントへの指示	仕様での動作
「ダークモードでレンダリングして」	theme: "dark"
「背景を黒にして」	background: "#000000"
「単色の背景で、ブルームなし」	bloom: false
「グラデーションなしで、タイトルを単色にして」	titleGradient: false
「チームの写真を背景に配置して」	backgroundImage: { source: "team.jpg" }
「アクセントをラベンダーではなく赤にして」	palette: { accent: "#E74C3C" }
「透明な背景にして。自分で合成します」	background: "transparent"

コーデックは自動で切り替わります。単色の背景は H.264 MP4 としてレンダリングされます。transparent を設定すると、実際のアルファチャンネルを持つ ProRes 4444 MOV としてレンダリングされます。

毎回指示しなくても、すべてのシーンのデフォルトテーマを変更したい場合は、src/scene/theme.ts を編集してください。パレットは 1 つのオブジェクトです。16 進数の値を変更すると、すべてのコンポーネントに反映されます。

---

手動セットアップ

上記のワンショットプロンプトを使用した場合は、この手順をスキップしてください。

git clone [email protected]:alichherawalla/video-overlay-kit.git
cd video-overlay-kit
npm install

キットをプロジェクトの .mcp.json またはグローバルな ~/.claude/mcp_settings.json に追加します。

{
  "mcpServers": {
    "video-overlay-kit": {
      "command": "node",
      "args": ["/absolute/path/to/video-overlay-kit/bin/mcp.mjs"]
    }
  }
}

Claude Code を再起動します。video-overlay-kit の下に 3 つのツールが表示されます。

• list_icons(query?, limit?) は、Tabler ライブラリを部分文字列で検索します。約 5,000 個のラインアイコンを利用できます。
• validate_scene(spec) は、レンダリング前にスキーマチェックを実行します。
• render_scene(spec, outPath?) は、MP4（背景が透明の場合は .mov）にレンダリングし、ファイルパスを返します。

初回のレンダリング時に、ヘッドレス Chrome が一度だけダウンロードされます（約 93 MB）。

---

CLI

MCP を使わずに利用することもできます。

npm run render examples/list-reveal.json
# -> examples/list-reveal.mp4

npm run render path/to/spec.json /where/to/save.mp4

JSON を編集すると自動リロードされる、仕様のライブ反復処理を行うには、次を実行します。

npm run preview
# opens Remotion Studio at http://localhost:3000

---

このキットを作った理由

短尺の B2B 動画の多くは、オーバーレイグラフィックを重ねたトーク動画です。上部にタイトルを表示し、合図に合わせて 3 つのポイントを列挙します。アイコンを 1 つか 2 つ加えれば完成です。うまく作れば、オーバーレイは話し手と同じくらいメッセージを伝えます。

現在の選択肢は 3 つです。編集者に依頼する（リール 1 本あたり ₹500～2000、反復に時間がかかり、個人への依存が生じる）、Submagic のような SaaS に登録する（月額 $20、スタイルが固定され、AI 生成の品質にはばらつきがある）、または After Effects を習得する（実際の時間投資が必要で、ターミナルからスクリプトで操作できない）。

このキットは 4 つ目の選択肢です。小規模なコンポーネントライブラリにより、すべてのリールでビジュアル表現を統一できます。エージェントがシーン仕様を作成し、レンダラーが MP4 を生成します。すべてローカルで動作します。

---

リファレンス

以下にスキーマ全体を示します。仕様を手動で作成する際は、参照用に開いておいてください。

シーン仕様：トップレベル

フィールド	型	デフォルト	説明
id	string	必須	シーンのスラッグです。デフォルトの出力ファイル名として使用されます。
durationFrames	int	必須	フレーム数で表した合計の長さです。指定した fps で 4～6 秒にする必要があります。検証されます。
fps	int	30	フレームレートです。
width	int	1080	キャンバスの幅（px）です。
height	int	1920	キャンバスの高さ（px）です。デフォルトは縦向きの 9:16 です。
theme	"light" | "dark"	"light"	カラーパレットを選択します。Light は Wednesday Solutions のデフォルトです。
background	string	（テーマに準拠）	CSS カラーまたは "transparent" です。テーマのキャンバスカラーを上書きします。
backgroundImage	object	なし	{ source, opacity, fit, tint, tintOpacity } です。トラックの背後に表示されます。
palette	object	なし	シーン単位で部分的にカラーパレットを上書きします。パレットを参照してください。
tracks	Track[]	必須	トラックのリストです。

共通のトラックフィールド

フィールド	型	デフォルト	説明
kind	enum	必須	title-overlay、list-reveal、flow、comparison、hub、icon、text、lottie。
id	string	必須	シーン内で一意の値です。
startFrame	int	必須	トラックが表示されるフレームです。
endFrame	int	必須	トラックが削除されるフレームです。
enter	Motion	{ kind: "fade", durationFrames: 8 }	入場アニメーションです。
exit	Motion	{ kind: "none", durationFrames: 8 }	退場アニメーションです。

Motion（enter と exit）

{ kind, durationFrames, ease }。使用可能な kind の値：

kind	動作
fade	不透明度が変化します。
slide-up / slide-down / slide-left / slide-right	指定した方向から 80px 移動して入場します。
scale	不透明度とともに、0.85 から 1.0 に拡大します。
none	モーションなしです。

ease：linear、easeIn、easeOut、easeInOut。デフォルトは easeOut です。

位置

すべてのトラックの position フィールドは、キャンバスの幅と高さに対する 0～1 の割合 { x, y } です。トラックの幾何学的な中心がその位置に配置されます。

パレット

src/scene/theme.ts で定義されているトークンです。ライトパレット（デフォルト）：

トークン	色	用途
background	#F0EDF8	キャンバス
ink	#0B0B0D	主要テキストとアイコンの線
inkMuted	#3A3A4A	セカンダリテキスト
inkDim	#6B6B7E	ターシャリテキスト
accent	#7A5BDC	ラベンダー。コネクターとタイトルのアクセントバーに使用します。
accentDeep	#5A3DB8	より濃いラベンダー。押下状態専用です。
hairline	#CCCAE0	極細の境界線

ダークパレットではこれらが反転します。シーンごとの上書きは palette: { accent: "#E74C3C", ... } で行います。

トラックごとのフィールドリファレンス

以下では、各トラック種別で、上記の共通フィールドに加えて使用できるフィールドを説明します。

title-overlay

フィールド	型	説明
text	string	タイトルテキストです。

位置はフレームの上部に固定されています。position フィールドはありません。

list-reveal

フィールド	型	説明
position	{ x, y }	リストブロックの中心です。
rows	Row[] (1-5)	リストの行です。
rows[].text	string	行のラベルです。
rows[].iconName	string?	任意の Tabler アイコン名です。
rows[].revealAtFrame	int	この行が表示されるフレーム（startFrame からの相対値）です。

flow

フィールド	型	説明
position	{ x, y }	フローブロックの中心です。
nodes	Node[] (2-5)	シーケンスです。
nodes[].iconName	string	Tabler アイコンです。
nodes[].label	string	アイコンの下に表示するラベルです。
direction	"horizontal"	v1 では水平方向のみです。
revealCadenceFrames	int	ノードを順に表示する間隔（フレーム数）です。デフォルトは 35 です。

comparison

フィールド	型	説明
position	{ x, y }	比較ブロックの中心です。
left, right	Side	それぞれ { iconName, label, subLabel? } です。
divider.label	string	中央に表示するテキストです。デフォルトは "vs" です。
divider.showLine	boolean	垂直線を描画するかどうかです。デフォルトは true です。
revealCadenceFrames	int	左、右、区切りを表示する間隔（フレーム数）です。デフォルトは 25 です。

hub

フィールド	型	説明
position	{ x, y }	ハブの中心です。
center.iconName、center.label	string	中央のノードです。
satellites	Satellite[] (2-4)	それぞれ { iconName, label } です。
revealCadenceFrames	int	中央と各サテライトを表示する間隔（フレーム数）です。デフォルトは 22 です。

配置は個数に応じて自動的に決まります。サテライトが 2 つの場合は上下に配置されます。3 つの場合は上向きの三角形を形成します。4 つの場合は東西南北の位置に配置されます。

icon

フィールド	型	デフォルト	説明
name	string	必須	Tabler アイコン名です。
position	{ x, y }	必須	キャンバス上の位置です。
sizePx	int	160	アイコンのサイズです。
color	string	（テーマの ink）	CSS カラーです。
strokeWidth	number	2	線の幅です。

text

フィールド	型	デフォルト	説明
text	string	必須	テキストです。\n に対応しています。
position	{ x, y }	必須	キャンバス上の位置です。
fontSizePx	int	56	フォントサイズです。
color	string	（テーマの ink）	CSS カラーです。
fontWeight	400 | 500 | 600 | 700 | 800	600	ウェイトです。
fontFamily	string	（キットの Aeonik スタック）	CSS フォントスタックです。
align	"left" | "center" | "right"	"center"	配置です。
maxWidthPx	int	制限なし	折り返し幅です。

lottie

フィールド	型	デフォルト	説明
source	string	必須	URL または public/ からの相対パスです。
position	{ x, y }	必須	位置です。
sizePx	int	400	幅と高さ（正方形）です。
loop	boolean	false	アニメーションをループ再生します。
playbackRate	number	1	再生速度の倍率です。

backgroundImage

フィールド	型	デフォルト	説明
source	string	必須	URL、data:、または public/ パスです。
opacity	number	1	0〜1 です。
fit	"cover" | "contain"	"cover"	CSS の object-fit です。
tint	string?	なし	画像の上に描画する CSS カラーです。
tintOpacity	number	0	ティントレイヤーの不透明度です。

レイヤーは background color、画像、ティント、トラックの順に重なります。

制約

• 長さは 4〜6 秒です。検証されます。
• アスペクト比は 9:16、1080×1920 です。デフォルト値です。
• フレームレートは 30 fps です。
• Tabler アイコンとラインスタイルの Lottie のみサポートされています。
• テーマは Wednesday Solutions のパレットです。src/scene/theme.ts で編集できます。

出力形式

背景	コーデック	コンテナ	用途
任意の CSS カラー	H.264	.mp4	リールに挿入する全画面の B ロールです。
"transparent"	ProRes 4444	.mov	アルファ付きのトーキングヘッド映像への合成です。

プロジェクト構成

video-overlay-kit/
├── bin/mcp.mjs              # MCP launcher
├── mcp/server.ts            # MCP server: list_icons, validate_scene, render_scene
├── scripts/render.ts        # CLI entry (npm run render)
├── src/
│   ├── Root.tsx, index.ts   # Remotion entry
│   ├── scene/
│   │   ├── types.ts         # Zod schema for the whole spec
│   │   ├── theme.ts         # Palette and font family
│   │   └── Scene.tsx        # Top-level renderer
│   ├── components/          # One file per track kind
│   ├── motion/              # Enter and exit transforms
│   └── lib/render.ts        # Shared by CLI and MCP
└── examples/                # Sample specs with their rendered MP4s and GIFs

拡張

新しいトラック種別（たとえば quote）を追加するには、次の手順を実行します。

1. src/scene/types.ts に QuoteTrackSchema を追加し、TrackSchema に含めて、型をエクスポートします。
2. src/components/Quote.tsx を作成します。Remotion の useCurrentFrame() と ../motion/primitives の trackStyle を使用します。色は usePalette() から、フォントは src/scene/theme.ts の FONT_FAMILY から取得します。
3. src/scene/Scene.tsx にケースを登録します。
4. エージェントが新しい種別の存在を認識できるよう、mcp/server.ts のスキーマヒントを更新します。

レンダラーと MCP ツールのハンドラーを変更する必要はありません。振り付けされたコンポーネントのひな形として、Flow.tsx または Hub.tsx をコピーしてください。

---

費用

レンダリングごとの費用はゼロです。ローカルの CPU とディスクのみを使用します。個人および小規模チームでの使用は無料です。商用利用する場合は、各依存関係のライセンスを確認してください。

クレジット

• Remotion は React ベースの動画レンダリングエンジンです。
• Tabler Icons はアイコンライブラリです。
• LottieFiles は Lottie アニメーションのマーケットプレイスです。
• Model Context Protocol は、キットを Claude Code に公開するために使用される標準です。

プロジェクトを支援する

VideoOverlayKit は無料で、MIT ライセンスのもとで提供されています。このキットによって時間やレンダリング予算を節約できた場合、最も簡単な支援方法はGitHub でプロジェクトをスポンサーすることです。スポンサーからの支援は、新しいコンポーネント、より優れたデフォルト設定、そして私が夜に作業するよりも早くリリースできるバグ修正に役立てられます。

Wednesday Solutions（wednesday.is）は、このデザインシステムを手がけるスタジオです。カスタムビルド、ブランドに合わせたテーマ、または規制の厳しい業界での AI 機能のリリース支援をご希望の場合は、こちらからチームにお問い合わせください。

---

♥ を込めて Wednesday Solutions が制作

ライセンス

MIT。

イシュー、貢献

イシューはgithub.com/alichherawalla/video-overlay-kitで報告してください。src/scene/types.tsのスキーマが仕様となります。新しいトラック種別を追加する場合は、まず仕様の形を提案し、その後にコンポーネントを追加してください。