製品紹介用のデモ動画を手動録画で作ると UI 変更のたびに撮り直しになる。シナリオをコードとして持ち、コマンド一発で最新 UI の動画を再生成できる状態にするには、録画（ブラウザ自動化）と合成（プログラマブルな動画生成）を別工程に分離するとよい。見た目の調整（背景・フレーム・カード）を録画のやり直しなしで反復できる。

構成（実証済みの型）

• 録画: Playwright の recordVideo で製品 UI を操作しながら生録画。同時にクリック座標+タイムスタンプを JSON に記録しておくと、後からズームキーフレームの自動生成に使える。
• 合成: Remotion（React で動画をコード合成）でブランド単色背景・角丸ウィンドウフレーム（macOS 風トラフィックライト）・イントロ/アウトロカードを被せる。ブランド設定（色・ロゴ・URL）は config ファイルに分離すると複数製品で使い回せる。
• 参照する見た目の型（商用製品紹介動画の分解から）: 単色ブランド背景にウィンドウを浮かべる・カーソル常時可視・1カット3〜5秒・冒頭バッジとエンディングロゴ。参照元の動画は ffmpeg の fps+tile フィルタでコンタクトシート化すると構成を短時間で分析できる。

落とし穴（実測）

• Playwright の recordVideo にはマウスカーソルが一切映らない。addInitScript で mousemove に追従する擬似カーソル（fixed 配置の円、mousedown で縮む）を DOM 注入する。Playwright の mouse.move は実イベントを発火するのでリスナーがそのまま動く。
• Playwright が出力する webm は duration メタデータを持たないことがあり、尺取得や動画合成ツールでの読み込みが不安定になる。h264/yuv420p の mp4 へ変換してから尺を ffprobe で取り、合成に渡す。
• カットのテンポは合成側では直せない。シナリオ側の待機時間を詰めて、生録画の時点で間延びしない尺にする。

検証

シナリオを再実行して同じ構成の動画が再生成されること、擬似カーソルが全ページ遷移で消えないこと（DOMContentLoaded ガード付き init script）、合成後の尺が録画尺+カード尺と一致することを確認する。