telop lab

AI動画編集のためのテロップ型集

YouTube・切り抜き・ビジネス系で実際に使われているテロップ表現を、機械可読なスタイル定義＋HTML/CSS実装としてまとめたカタログ。AIエージェントに telops.json のURLを渡すだけで、動画にそのまま焼き込めます。

– styles 8 categories SVG multi-stroke renderer MCP server MIT license

AIエージェントからの使い方

0. MCPサーバー（いちばん簡単）

MCP対応クライアントにこのURLを登録するだけで、スタイル検索・詳細取得・overlay URL生成のツールが使えます:

https://telop-lab.com/mcp

# tools: search_telops / get_telop / list_categories / build_overlay_url

Claude Desktop・Devin・Cursor等のMCP設定に "telop-lab": {"url": "https://telop-lab.com/mcp"} を追加。

または: JSONを直接読ませる

telops.json（全200スタイルの機械可読な定義）も公開しています。エージェントへの指示例:

「https://telop-lab.com/telops.json から動画の雰囲気に合うテロップを選んで、
 overlay.html を使って字幕PNGを作り、ffmpegで焼き込んで」

1. カタログ取得

GET /telops.json  →  { fonts, styles: [{ id, name, cat, font, fill, stroke, layout, pos, anim, sample, use, tags }] }

2. プレビュー / PNGレンダリング

overlay.html?id=va-white-black&text=まじで!?&pos=bottom
  #id: スタイルID / text: 表示文（|で囲むとアクセント色） / pos: top|center|bottom
  #&animate=1 で出現アニメ付きプレビュー

3. 動画への焼き込み（apply.mjs）

# 単発
node apply.mjs input.mp4 --style va-white-black --text "まじで!?" --start 0.5 --end 3 -o out.mp4

# 複数キャプション
node apply.mjs input.mp4 --captions caps.json -o out.mp4
# caps.json: [{"style":"kr-clip-double","text":"絶対楽しい","start":0,"end":2.4}, ...]

内部では overlay.html を Playwright で透過PNG化 → ffmpeg の overlay+fade で合成。フォントは全てGoogle Fonts（OFL）なので商用・OSS配布OK。