Repolode
投稿する
OneMoh

OneMoh/html-explainer

HTMLからローカルでレンダリングし、ナレーション、焼き込み字幕、カバー画像付きの解説動画を作るAgent Skill。

代替できる製品:SynthesiaLumen5

GitHub で見る
スター
174
フォーク
20
未解決の Issue
2
最終コミット
5 日前

これは何？

html-explainerは解説動画を制作するためのAgent Skillです。エージェントにトピックを渡すと、リサーチ、ナレーション原稿の作成、音声合成によるナレーション、字幕とビートのタイミング調整、シーンHTMLの作成、フレームのレンダリングとffmpegによるエンコード、カバー画像の生成まで、一連のパイプラインを実行します。シーンはHTML/CSS/GSAPで記述し、ブラウザを録画するのではなく、アニメーションを正確なタイムスタンプにシークしてフレームごとにレンダリングするため、毎回同じフレームが出力されます。

ナレーションには、デフォルトで無料のedge-ttsエンジンを使うか、ローカルのenvファイルに保存したAPIキーが必要なVolcano Engine speech synthesis 2.0を使えます。字幕のタイミングにはTTSエンジンが返す単語単位のタイムスタンプを使い、シーンのアニメーションは固定のフレーム番号ではなく字幕テキストに連動するため、ナレーションを編集すると動画のタイミングも自動で調整されます。プロジェクトには23種類のビジュアルスタイルと、約40種類のモーションプリミティブが用意されています。

このSkillは、Claude Code、OpenAI Codex、WorkBuddyなど、SKILL.mdファイルを読み込むエージェントツールで動作します。レンダリングは1080pまたは4K、30または60 fpsに対応し、モーションブラーの追加や複数プロセスでのワーカー実行も可能です。コアのレンダリングにはPython 3.9以降、Node 18以降、ChromeまたはEdge、ffmpegが必要です。

主な機能

  • 01アニメーションを正確なタイムスタンプにシークしてシーンを決定論的にレンダリングし、録画時のタイミングの不具合を回避します。
  • 02ナレーション用に2つのエンジンを利用できます。デフォルトの無料のedge-ttsか、APIキーが必要なVolcano Engine TTSを選べます。
  • 03TTSの単語単位のタイムスタンプから字幕のタイミングを決め、アニメーションを字幕テキストに連動させます。
  • 0423種類のビジュアルスタイルテンプレートと、約40種類のモーションプリミティブを収録しています。
  • 05MP4、SRT、VTTファイルに加えて、16:9、3:4、オプションで9:16のカバー画像を生成します。
  • 061080pと4K、30または60 fpsでの出力に対応し、モーションブラーの追加や並列レンダリングも利用できます。

ユースケース

  • 記事やドキュメントページを、ナレーション付きの解説動画にする。
  • AIコーディングエージェントを使い、ナレーションと字幕の一貫したトピック動画シリーズを制作する。
  • デフォルトのedge-tts音声を使い、動画ごとのAPI料金をかけずにオフラインで動画を生成する。
  • パイプラインを再実行しても同じフレームが得られる、再現性の高い解説動画をレンダリングする。

トピック

#agent-skill#video-generation#text-to-speech#html-to-video#claude-code#tts#subtitles#agent-skills#claude-code-skill#claude-code-skills

よくある質問

html-explainer とは？
HTMLからローカルでレンダリングし、ナレーション、焼き込み字幕、カバー画像付きの解説動画を作るAgent Skill。 html-explainerは解説動画を制作するためのAgent Skillです。エージェントにトピックを渡すと、リサーチ、ナレーション原稿の作成、音声合成によるナレーション、字幕とビートのタイミング調整、シーンHTMLの作成、フレームのレンダリングとffmpegによるエンコード、カバー画像の生成まで、一連のパイプラインを実行します。シーンはHTML/CSS/GSAPで記述し、ブラウザを録画するのではなく、アニメーションを正確なタイムスタンプにシークしてフレームごとにレンダリングするため、毎回同じフレームが出力されます。
html-explainer は無料で使えますか？ライセンスは？
html-explainer は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
html-explainer は今もメンテナンスされていますか？
活発にメンテナンス中。html-explainer の最終コミットは 2026年10月14日 です。
html-explainer は何に使えますか？
記事やドキュメントページを、ナレーション付きの解説動画にする。 AIコーディングエージェントを使い、ナレーションと字幕の一貫したトピック動画シリーズを制作する。 デフォルトのedge-tts音声を使い、動画ごとのAPI料金をかけずにオフラインで動画を生成する。 パイプラインを再実行しても同じフレームが得られる、再現性の高い解説動画をレンダリングする。
html-explainer はどこで入手できますか？
ソースコードとインストール手順は GitHub にあります：https://github.com/OneMoh/html-explainer

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト