siyuanfeng636-cpu/agentic-motion-graphics

これは何？

主な機能

• 01生成動画ではなく、HTML、CSS、SVG、GSAPのタイムラインから各フレームを構築します。
• 02whisper.cppまたはfaster-whisperを使って、ナレーションを単語単位のタイムスタンプに対応付けます。
• 03OpenAI TTSまたはElevenLabsでナレーションを生成し、ffmpegで無音部分をトリミングします。
• 04Pythonで120 BPMのBGMとUI効果音を合成します。
• 05HyperFrames CLIを通じて、lint、スナップショット、headlessレンダリングを実行します。
• 06Claude Codeが自動検出できるスキルディレクトリとしてパッケージ化されています。

ユースケース

• Webサイトや変更履歴から、製品ローンチ動画や新機能告知動画を制作する。
• 長い技術記事や論文を、ナレーション付きのアニメーション解説動画にする。
• 長尺動画を、字幕付きで縦型の短尺動画に変換し、単語ごとの字幕を付ける。
• 静的なHTMLやMarkdownのスライドを、講演向けにアニメーション化する。

クイックスタート

1. 1

   FFmpeg と Node.js 22 以降をインストールします（Homebrew を使う macOS の例）。

   brew install ffmpeg node
2. 2

   TTS スクリプトでナレーション音声を生成します。

   python3 scripts/tts_engine.py --text "Opus 5.5 solved motion graphics with code." --output audio/voiceover.mp3
3. 3

   templates/boilerplate から、HyperFrames でプロジェクトを MP4 にレンダリングします。

   npx hyperframes render --output dist/output.mp4 --fps 30

使う前に知っておきたいこと

• !README のセットアップ例は macOS（Homebrew）を前提としているため、他のプラットフォームでは個別にセットアップする必要があります。
• !TTS の利用には OpenAI または ElevenLabs の API キーが必要です。いずれも有料サービスです。
• !このパイプラインには Node.js 22 以降、FFmpeg、Whisper、Python の音声ツールなど、多くの依存関係があります。

トピック

よくある質問

agentic-motion-graphics とは？

HTML、GSAPアニメーション、TTSナレーション、Whisperの単語単位タイミング情報からモーショングラフィックス動画を生成する、Claude Code向けスキルとPythonパイプライン。 Agentic Motion Graphicsは、生成映像ではなくコードで動画を作成する、Claude CodeなどのAIエージェント向けスキルです。エージェントがシーンスクリプトを作成し、HTML、CSS、SVG、GSAPのタイムラインで各フレームを構築して、headless Chromium上でHyperFrames CLIを使ってMP4にレンダリングします。

agentic-motion-graphics は無料で使えますか？ライセンスは？

agentic-motion-graphics は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

agentic-motion-graphics は今もメンテナンスされていますか？

活発にメンテナンス中。agentic-motion-graphics の最終コミットは 2026年9月25日 です。

agentic-motion-graphics は何に使えますか？

Webサイトや変更履歴から、製品ローンチ動画や新機能告知動画を制作する。 長い技術記事や論文を、ナレーション付きのアニメーション解説動画にする。 長尺動画を、字幕付きで縦型の短尺動画に変換し、単語ごとの字幕を付ける。 静的なHTMLやMarkdownのスライドを、講演向けにアニメーション化する。

agentic-motion-graphics のインストール方法は？

FFmpeg と Node.js 22 以降をインストールします（Homebrew を使う macOS の例）。: brew install ffmpeg node TTS スクリプトでナレーション音声を生成します。: python3 scripts/tts_engine.py --text "Opus 5.5 solved motion graphics with code." --output audio/voiceover.mp3 templates/boilerplate から、HyperFrames でプロジェクトを MP4 にレンダリングします。: npx hyperframes render --output dist/output.mp4 --fps 30

agentic-motion-graphics はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/siyuanfeng636-cpu/agentic-motion-graphics