動く吹き出しアイコン デモ（イラスト版）
再生ボタンを押すと、セリフが1文字ずつ表示され、話している人のアイコン動画だけが動きます。 女性は左・男性は右に配置したイラスト版のサンプルです。今回は最初から「抜くため一色背景」で作ったので、人物を欠かさずに背景を透明にできました。さらに、各セリフに合わせた動きのクリップを用意してあり、セリフごとに身振りが切り替わります。クリップごとに違っていた人物の大きさは、頭の大きさを基準に全クリップで揃えてあります。ページの背景（このグラデーション）がそのまま透けて見えます。静的サイト向けで、サーバー側の処理は使っていません。
自分のサイトで使うには
このフォルダ（index.html と assets/）をそのままサイトに置くだけで動きます。
セリフを変えたいときは、このファイル末尾のスクリプトにある SCRIPT 配列を書き換えてください。
人物を変えたいときは assets/ の動画とポスター画像を同じ名前で差し替えます。
背景の透明は、生成時に一色（マゼンタ）背景で作り、その色だけを抜いたアルファ付きWebM（ファイル名に -chroma）で実現しています。淡い背景から抜いた前版と違い、肌や白い服が一緒に消えることがありません。WebMの透明に未対応のブラウザでは、透明なポスター画像（webp・静止画）が表示されます。
配置はスクリプト内の PEOPLE の side（女性＝left／男性＝right）で決まります。各セリフの動きは SCRIPT の clip で指定した専用クリップです（両手を広げる、指さして説明する、顎に手を当てて考える、など）。clip を消すと、その人の汎用クリップで再生されます。口の動きは「話している風」で、音声の音節まで正確に一致するものではありません。
※ いまの2人は画風が少し違います（男性：すっきりしたデジタルイラスト調／女性：水彩調）。セットで使うなら、どちらかのタッチに寄せて作り直すと統一感が出ます。