siyuanfeng636-cpu/agentic-motion-graphics

Что это?

Ключевые возможности

• 01Собирает каждый кадр из HTML, CSS, SVG и таймлайнов GSAP, а не с помощью генерации видео.
• 02Выравнивает озвучку по пословным временным меткам с помощью whisper.cpp или faster-whisper.
• 03Создаёт закадровую озвучку через OpenAI TTS или ElevenLabs и обрезает паузы с помощью ffmpeg.
• 04Синтезирует музыкальную подложку с темпом 120 BPM и звуковые эффекты интерфейса на Python.
• 05Запускает линтер, создание снимков и рендеринг в headless-режиме через CLI HyperFrames.
• 06Поставляется в виде каталога навыка, который Claude Code может обнаруживать автоматически.

Сценарии использования

• Создание видео о запуске продукта или анонсе функции на основе сайта или журнала изменений.
• Преобразование большой технической статьи или научной работы в поясняющее видео с анимацией и озвучкой.
• Преобразование длинных видео в вертикальные ролики с субтитрами, синхронизированными с речью по словам.
• Анимация статичных слайдов в HTML или Markdown для докладов.

Быстрый старт

1. 1

   Установите FFmpeg и Node.js 22 или новее (пример для macOS с Homebrew).

   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 отрендерите проект в MP4 с помощью HyperFrames.

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

Что важно знать

• !Примеры настройки в README ориентированы на macOS (Homebrew), поэтому для других платформ потребуется отдельная настройка.
• !Для этапа TTS нужен API-ключ OpenAI или ElevenLabs — это платные сервисы.
• !Для работы пайплайна требуется множество зависимостей, включая Node.js 22 или новее, FFmpeg, Whisper и Python-инструменты для работы с аудио.

Темы

Частые вопросы

Что такое agentic-motion-graphics?

Навык для Claude Code и Python-пайплайн, которые создают моушн-графику из HTML, анимаций GSAP, озвучки TTS и пословной разметки Whisper. Agentic Motion Graphics — это навык для Claude Code и похожих ИИ-агентов, который создаёт видео в виде кода, а не сгенерированных кадров. Агент пишет сценарий сцены, собирает каждый кадр с помощью HTML, CSS, SVG и таймлайнов GSAP, а затем рендерит видео в MP4 через CLI HyperFrames в headless Chromium.

agentic-motion-graphics можно использовать бесплатно? Какая у него лицензия?

agentic-motion-graphics распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.

agentic-motion-graphics всё ещё поддерживается?

Активно поддерживается. Последний коммит в agentic-motion-graphics — 25 сент. 2026 г..

Для чего можно использовать agentic-motion-graphics?

Создание видео о запуске продукта или анонсе функции на основе сайта или журнала изменений. Преобразование большой технической статьи или научной работы в поясняющее видео с анимацией и озвучкой. Преобразование длинных видео в вертикальные ролики с субтитрами, синхронизированными с речью по словам. Анимация статичных слайдов в HTML или Markdown для докладов.

Как установить agentic-motion-graphics?

Установите FFmpeg и Node.js 22 или новее (пример для macOS с Homebrew).: 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 отрендерите проект в MP4 с помощью HyperFrames.: npx hyperframes render --output dist/output.mp4 --fps 30

Где скачать agentic-motion-graphics?

Исходный код и инструкции по установке — на GitHub: https://github.com/siyuanfeng636-cpu/agentic-motion-graphics