HTML で動画を作る

仕組み

• アニメーションは普通の HTML / CSS / JS で書く。ページには window.__seek(t) を用意して、t 秒目の画面を出せるようにしておく
• ヘッドレスの Chrome を何個か立ち上げて、コマを分け合い、時刻を止めたまま1コマずつ撮る
• 区間ごとに別の ffmpeg で H.264 にして、最後に音と一緒につなぐ

映像っぽくする

• モーションブラー：シャッターが開いているあいだを何枚か撮って平均する。ページが __motion(t0, t1) で動く量を返せば、ほとんど動かないコマは1枚で済ませる
• フィルムグレイン：平均したあとに粒子を重ねる
• 高解像度で撮って縮める：文字の縦位置が整数 px にしか置かれないガタつきを消す

この仕組みで作った映像

下の2本は湘南藤沢高専 Discord キャンパスの PV。