sirioberati/YouTube-AI-Motion-Graphics

选用指南

AI 根据 README 整理 · 2026/10/28 21:26:48

适用场景

适用于制作解释性视频的动效，如数据图表、流程展示和组件动效，特别适合语音同步的动画解说。

查看 README 依据

lens</strong></sub></td></tr> </table> <p align="center"><em>12 of the 74 boards. <a href="#the-boards">See them all ↓</a></em></p> <h1 align="center">YouTube AI Motion Graphics</h1> <p align="center"><strong>74 animated explainer boards for YouTube videos that sync to your voice. Made with Claude Design and Claude Code.</strong></p> <p align="center">AI motion graphics for explainer videos: HTML + GSAP boards, charts and diagrams, Whisper word-level sync, and a frame-exact Chrome + FFmpeg export to MP4. Includes every prompt and three Claude skills.</p>

<tr><td align="center" width="33%"><a href="boards/D43Bars.html"><img src="docs/gifs/D43Bars.gif" alt="Bar chart" width="100%"></a><br><strong>Bar chart</strong><br>_{comparing amounts, 'this one is way bigger'}</td><td align="center" width="33%"><a href="boards/D44Line.html"><img src="docs/gifs/D44Line.gif" alt="Line chart" width="100%"></a><br><strong>Line chart</strong><br>_{'it went up', 'over time', growth}</td><td align="center" width="33%"><a href="boards/D45Numbers.html"><img src="docs/gifs/D45Numbers.gif" alt="Share and big numbers" width="100%"></a><br><strong>Share

使用方式

通过命令行使用，克隆仓库后运行设置脚本，然后打开 boards/index.html 浏览，并运行 export.py 导出视频。

查看 README 依据

6. **Turn it all into a skill**, with a board catalog tagged in the words you say. → [`prompts/06`](prompts/06-make-the-skill.md) 7. **Transcribe** your video with Whisper, word by word, and plan the boards. → [`prompts/07`](prompts/07-transcribe.md) 8. **Sync** every board to your voice. → [`prompts/08`](prompts/08-sync.md) 9. **Export** the MP4, frame by frame. → [`prompts/09`](prompts/09-export.md) ## Quick start ```bash git clone https://github.com/sirioberati/YouTube-AI-Motion-Graphics.git cd YouTube-AI-Motion-Graphics bash skills/board-sync/setup.sh cp -R skills/* ~/.claude/skills/

**The export** never screen-records. `tools/export.py` opens each board in Chrome, pauses every animation and moves it to the exact time of each frame (a virtual clock, so nothing is dropped), screenshots it, renders in parts with several workers, saves each part as MKV so a stopped render can be resumed, joins them with FFmpeg with your voice, then checks the frame count. ```bash # one board python tools/export.py boards/D44Line.html --seconds 8 -o out/line.mp4 # check the first 60 seconds, then the full video

部署要求

需要 Chrome、Python 3.10+、Playwright 和 FFmpeg，以及 faster-whisper 用于转写。

查看 README 依据

python tools/export.py timeline.json --audio my-voice.wav -o out/test.mp4 --first 60 python tools/export.py timeline.json --audio my-voice.wav -o out/video.mp4 --workers 6 ``` You need **Chrome**, **Python 3.10+**, **Playwright** and **FFmpeg** (plus faster-whisper for transcripts). Full details: [docs/ARCHITECTURE.md](docs/ARCHITECTURE.md). ## The boards Click any board to open its HTML. Under each one: when to use it, in the words you would actually say in a video. Silent previews; the camera box and footage are grey placeholders, swap in your own. ### Diagrams <table>

已知限制

动效板为灰色占位内容，相机框和素材需自行替换；README 未提及支持录屏导出。

查看 README 依据

python tools/export.py timeline.json --audio my-voice.wav -o out/test.mp4 --first 60 python tools/export.py timeline.json --audio my-voice.wav -o out/video.mp4 --workers 6 ``` You need **Chrome**, **Python 3.10+**, **Playwright** and **FFmpeg** (plus faster-whisper for transcripts). Full details: [docs/ARCHITECTURE.md](docs/ARCHITECTURE.md). ## The boards Click any board to open its HTML. Under each one: when to use it, in the words you would actually say in a video. Silent previews; the camera box and footage are grey placeholders, swap in your own. ### Diagrams <table>