telop lab

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

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

– styles 8 categories SVG multi-stroke renderer MIT license

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

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

「https://<host>/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-vspo-double","text":"絶対楽しい","start":0,"end":2.4}, ...]

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