2026年8月21日
cssアニメーションを書き出す
cssアニメーションをmp4またはymm4(動画編集ソフト)用に書き出すプログラムを作りました
概要
CSS アニメーションで定義されたモーションを、高品質な動画ファイル(MP4 / 透過 WebM)および「ゆっくりMovieMaker4(YMM4)」のプロジェクトファイル(.ymmp)へ書き出すためのレンダリングエンジン / CLI ツールです。
詳細
決定論的なコマ送りレンダリング
Chrome DevTools Protocol (CDP) の Animation ドメインを用いて仮想時間を制御。マシンスペックやリアルタイム再生速度に依存せず、指定したフレームレートで正確にキャプチャします。
高速なストリーミングエンコード
キャプチャした PNG フレームをパイプ経由(image2pipe)で直接 FFmpeg に流し込み、ディスクへの無駄な中間ファイル書き出しを行いません。
透過動画のサポート
アルファチャンネル付きの背景透過 WebM(VP9 コーデック)出力に対応しており、動画編集ソフトへの素材合成に最適です。
ゆっくりMovieMaker4 (YMM4) 連携 & キーフレーム最適化
CSS で記述した transform(移動・回転・拡縮)や opacity(不透明度)を解析・サンプリングし、既存 .ymmp ファイル内のアイテムのキーフレームとして上書き反映できます。
RDP (Ramer-Douglas-Peucker) アルゴリズムと極値検出により、冗長な中間点を最大 90% 削減。YMM4 タイムライン上で管理しやすいクリーンなキーフレームを自動生成します。
モジュラー設計 & REST/SSE API サーバー
コア機能は独立した Rust クレート(css2mp4-core)として設計。CLI に加え、Axum ベースのローカル API サーバー(serve)を標準搭載しており、Web UI や外部ツールからのリアルタイムプレビュー・進捗監視が可能です。
てな物を作りました(githubからコピペ)
スクリーンショット
技術スタック
rust,CDP,FFmpegなど