{
  "$mulmocast": { "version": "1.1" },
  "lang": "ja",
  "canvasSize": { "width": 1080, "height": 1920 },
  "title": "movie: スキームテスト",
  "speechParams": {
    "provider": "kotodama",
    "speakers": {
      "Presenter": { "provider": "kotodama", "voiceId": "jikkyo_baby" }
    }
  },
  "imageParams": {
    "images": {
      "sample_video": {
        "type": "movie",
        "source": {
          "kind": "path",
          "path": "../../test/assets/hello.mp4"
        }
      }
    }
  },
  "beats": [
    {
      "text": "Beat1。動画を全画面背景として表示するパターンです。テキストオーバーレイ付き。",
      "speaker": "Presenter",
      "image": {
        "type": "html_tailwind",
        "html": [
          "<div class='h-full w-full overflow-hidden relative bg-black'>",
          "  <div style='position:absolute;inset:0;overflow:hidden'>",
          "    <video src='movie:sample_video' autoplay muted loop style='width:100%;height:100%;object-fit:cover;filter:brightness(0.7)'></video>",
          "  </div>",
          "  <div style='position:absolute;top:50%;left:40px;right:40px;transform:translateY(-50%);text-align:center'>",
          "    <div style='display:inline-block;background:rgba(59,130,246,0.85);padding:12px 32px;border-radius:12px'>",
          "      <span style='color:white;font-size:80px;font-weight:900'>全画面背景</span>",
          "    </div>",
          "    <div style='color:white;font-size:48px;font-weight:900;margin-top:20px;text-shadow:0 4px 16px rgba(0,0,0,0.9)'>動画をフルスクリーン表示</div>",
          "  </div>",
          "</div>"
        ],
        "animation": { "movie": true }
      }
    },
    {
      "text": "Beat2。画面の一部にだけ動画を表示するパターン。上半分に動画、下半分にテキストカードを置いています。",
      "speaker": "Presenter",
      "image": {
        "type": "html_tailwind",
        "html": [
          "<div class='h-full w-full flex flex-col bg-gray-900'>",
          "  <div style='flex:1;overflow:hidden;border-bottom:4px solid #3B82F6'>",
          "    <video src='movie:sample_video' autoplay muted loop style='width:100%;height:100%;object-fit:cover'></video>",
          "  </div>",
          "  <div style='flex:1;display:flex;align-items:center;justify-content:center;padding:40px'>",
          "    <div style='text-align:center'>",
          "      <div style='color:#F59E0B;font-size:64px;font-weight:900;margin-bottom:16px'>上半分に動画</div>",
          "      <div style='color:white;font-size:44px;line-height:1.5'>下半分はテキストカード。<br>動画は画面の一部にだけ表示。</div>",
          "    </div>",
          "  </div>",
          "</div>"
        ],
        "animation": { "movie": true }
      }
    },
    {
      "text": "Beat3。角丸の小さなウィンドウで動画をピクチャーインピクチャー風に表示するパターンです。",
      "speaker": "Presenter",
      "image": {
        "type": "html_tailwind",
        "html": [
          "<div class='h-full w-full relative' style='background:linear-gradient(135deg,#1E293B 0%,#0F172A 100%)'>",
          "  <div style='position:absolute;top:80px;right:40px;width:400px;height:300px;border-radius:24px;overflow:hidden;border:3px solid rgba(255,255,255,0.3);box-shadow:0 8px 32px rgba(0,0,0,0.5)'>",
          "    <video src='movie:sample_video' autoplay muted loop style='width:100%;height:100%;object-fit:cover'></video>",
          "  </div>",
          "  <div style='position:absolute;top:50%;left:40px;right:40px;transform:translateY(-50%);text-align:left'>",
          "    <div style='color:#60A5FA;font-size:40px;font-weight:700;margin-bottom:12px'>PiP スタイル</div>",
          "    <div style='color:white;font-size:72px;font-weight:900;line-height:1.2'>右上に小さな<br>動画ウィンドウ</div>",
          "    <div style='color:rgba(255,255,255,0.6);font-size:36px;margin-top:20px'>角丸 + ボーダー + シャドウで浮遊感</div>",
          "  </div>",
          "</div>"
        ],
        "animation": { "movie": true }
      }
    },
    {
      "text": "Beat4。円形にマスクした動画を中央に配置するパターン。プロフィール動画やアバター風の見せ方です。",
      "speaker": "Presenter",
      "image": {
        "type": "html_tailwind",
        "html": [
          "<div class='h-full w-full flex flex-col items-center justify-center' style='background:linear-gradient(180deg,#312E81 0%,#1E1B4B 100%)'>",
          "  <div style='width:500px;height:500px;border-radius:50%;overflow:hidden;border:6px solid #A78BFA;box-shadow:0 0 60px rgba(167,139,250,0.4)'>",
          "    <video src='movie:sample_video' autoplay muted loop style='width:100%;height:100%;object-fit:cover'></video>",
          "  </div>",
          "  <div style='color:white;font-size:64px;font-weight:900;margin-top:40px'>円形マスク</div>",
          "  <div style='color:#C4B5FD;font-size:40px;margin-top:12px'>アバター / プロフィール風</div>",
          "</div>"
        ],
        "animation": { "movie": true }
      }
    },
    {
      "text": "Beat5。左右分割で、左に動画、右にテキストを並べるスプリットレイアウトです。",
      "speaker": "Presenter",
      "image": {
        "type": "html_tailwind",
        "html": [
          "<div class='h-full w-full flex flex-row bg-black'>",
          "  <div style='flex:1;overflow:hidden'>",
          "    <video src='movie:sample_video' autoplay muted loop style='width:100%;height:100%;object-fit:cover'></video>",
          "  </div>",
          "  <div style='flex:1;display:flex;align-items:center;justify-content:center;padding:32px;background:linear-gradient(180deg,#1E3A5F 0%,#0D1B2A 100%)'>",
          "    <div style='text-align:center'>",
          "      <div style='color:#38BDF8;font-size:56px;font-weight:900;margin-bottom:20px'>左右分割</div>",
          "      <div style='color:white;font-size:40px;line-height:1.5'>左半分が動画<br>右半分がテキスト</div>",
          "      <div style='margin-top:24px;width:120px;height:4px;background:#38BDF8;border-radius:2px;margin-left:auto;margin-right:auto'></div>",
          "    </div>",
          "  </div>",
          "</div>"
        ],
        "animation": { "movie": true }
      }
    }
  ]
}