[Feature] type: "movie" beatへのTailwind HTMLオーバーレイ合成機能

[isamu]

概要

現在の type: "movie" beatは、動画に対してキャプション画像を ffmpeg overlay で合成する仕組みはありますが、Tailwind CSSアニメーション付きHTMLを動画上に重ねる機能はありません。

一方、MulmoCastには既に html_tailwind image pluginがあり、Tailwindを使った高品質なアニメーション表現が可能です。この資産を type: "movie" の上にオーバーレイとして再利用できれば、以下が実現できます:

• タイトルテロップ/下三分字幕/話者名バッジの動的表示
• キラキラ・パーティクル等の装飾演出 (animate-ping, animate-bounce など)
• データ可視化オーバーレイ (チャート、カウンタ)
• ブランド統一されたテンプレ演出

提案する仕様

movieParams または beat 直下に overlays フィールドを追加する:

overlays?: {
  html?: string;              // Tailwind HTML直接指定
  elements?: SwipeElement[];  // html_tailwindと同じ宣言形式
  startTime: number;          // 秒
  duration: number;           // 秒
  position?: {                // 配置 (省略時は全画面)
    x?: string; y?: string;
    width?: string; height?: string;
  };
  fps?: number;               // デフォルト 30
  transition?: \"fade\" | \"none\";
}[];

MulmoScript 例

```json
{
"$mulmocast": { "version": "1.0" },
"beats": [
{
"speaker": "Narrator",
"text": "AIで動画制作が劇的に変わります。",
"image": {
"type": "movie",
"source": { "kind": "path", "path": "intro.mp4" }
},
"movieParams": {
"fillOption": { "style": "aspectFill" }
},
"overlays": [
{
"html": "

AI × 動画

",
"startTime": 0.5,
"duration": 3.0,
"transition": "fade"
},
{
"html": "

✨

",
"startTime": 2.0,
"duration": 1.5
},
{
"elements": [
{ "type": "text", "text": "田中太郎", "style": "bottom-20 left-10 bg-black/70 text-white px-4 py-2 rounded" }
],
"startTime": 4.0,
"duration": 5.0
}
]
}
]
}
```

実装方針

1. オーバーレイのフレーム列レンダ: 既存の `html_tailwind.ts` の `animation` モードを流用し、`startTime/duration/fps` に応じてPNG連番を生成
2. 透過動画化: PNG連番 → `ffmpeg -c:v libvpx-vp9 -pix_fmt yuva420p overlay.webm` (アルファ付きWebM)
3. 合成: `src/actions/movie.ts` の overlay filter パイプラインを拡張
   ```
   [0:v][1:v]overlay=x=X:y=Y:enable='between(t,startTime,startTime+duration)'
   ```
4. 複数overlayは `filter_complex` で多段overlayチェーン

ユースケース

• YouTubeショート/解説動画の自動生成: 既存動画素材 + AIによる字幕 + Tailwindテロップで製品品質に到達
• MulmoCast-Slidesテンプレ資産の再利用: スライド用Tailwindコンポーネントを動画演出に転用

関連

• `src/utils/image_plugins/html_tailwind.ts` (既存のHTML→動画変換)
• `src/actions/movie.ts` (ffmpeg overlay処理)
• `mulmoMovieMediaSchema` (`src/types/schema.ts:174-179`)