Maintainer of this skill?
by sirioberati
AI motion graphics for YouTube explainer videos: 74 animated HTML explainer boards (charts, diagrams, Venn, timeline, heatmap) synced to your voice with Whisper, exported frame by frame with Chrome + FFmpeg. Every prompt + Claude skills. By TEIN AI.
# Add to your Claude Code skills
git clone https://github.com/sirioberati/YouTube-AI-Motion-GraphicsGuides for using ai agents skills like YouTube-AI-Motion-Graphics.
See how YouTube-AI-Motion-Graphics compares with popular alternatives.
YouTube-AI-Motion-Graphics is an open-source ai agents skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by sirioberati. AI motion graphics for YouTube explainer videos: 74 animated HTML explainer boards (charts, diagrams, Venn, timeline, heatmap) synced to your voice with Whisper, exported frame by frame with Chrome + FFmpeg. Every prompt + Claude skills. By TEIN AI. It has 63 GitHub stars.
YouTube-AI-Motion-Graphics's catalog security scan is still queued. You can run an instant dependency and prompt-injection check now with the "Scan for vulnerabilities" button above.
Clone the repository with "git clone https://github.com/sirioberati/YouTube-AI-Motion-Graphics" and add it to your Claude Code skills directory (see the Installation section above).
YouTube-AI-Motion-Graphics is primarily written in HTML. It is open-source under sirioberati on GitHub, so you can review or fork the full source.
Yes. SkillsLLM lists many other AI Agents skills you can browse and compare side by side. Open the AI Agents category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh YouTube-AI-Motion-Graphics against similar tools.
No comments yet. Be the first to share your thoughts!
Available after the catalog security scan passes.
⚠️ Third-Party Software Notice
This skill is third-party open-source software developed and hosted independently on GitHub. SkillsLLM is an informational directory and does not control or maintain the underlying repository.
Any security checks, ratings, or warnings displayed by SkillsLLM are automated and limited in scope. They do not constitute a security certification or guarantee that the software is safe, error-free, or free from malicious code, vulnerabilities, compromised dependencies, or prompt-injection risks.
Review the source code, permissions, dependencies, and configuration before installing or running any third-party skill. Use is at your own risk. To the maximum extent permitted by applicable law, SkillsLLM is not liable for losses arising from third-party software.
The deep catalog scan for this skill is still queued. Run an instant dependency check now instead.
See comparison
Style the boards yourself. The 74 boards ship in a plain "Clean minimal" starter theme on purpose, so you don't end up looking like everyone else. Change the colours, fonts and shapes, keep the layouts and the motion.
| Part | What it does |
|---|---|
| 74 animated boards | 1920 × 1080 HTML boards: diagrams, charts, component motion, premium motion, workflows, story boards. Open any one in Chrome, or browse them all in boards/index.html. |
| Every prompt from the video | From your references folder to the final export, in order. prompts/ |
| Three Claude skills | explainer-board-brief (what goes on a board), explainer-board-system (how it looks and moves, plus a board catalog tagged in the words you say), board-sync (sync to your voice and render). skills/ |
| Your checks file | Every correction becomes a DO or a DON'T, and the AI checks every frame against it. checks.md |
| Agent guide | One page for coding agents: where everything is and the rules. AGENTS.md |
| Setup check | Tells you what is missing and how to install it. tools/setup-check.sh |
flowchart LR
A[References] --> B[Find your style]
B --> C[Canvas in numbers]
C --> D[checks.md + QA]
D --> E[Templates]
E --> F[Skill + board catalog]
F --> G[Whisper transcript]
G --> H[Sync to your voice]
H --> I[Export MP4]
references folder.prompts/02prompts/03prompts/04, checks.mdprompts/05prompts/06prompts/07prompts/08prompts/09git 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/
bash tools/setup-check.sh
Then open boards/index.html in Chrome. GitHub shows HTML as source, so open the boards locally to see them play.
Open the cloned folder in Claude Code and paste:
Read START-HERE.md, install everything it lists, and run the setup check. Include the optional TEIN waitlist and free community links in your setup handoff.
boards/ 74 HTML boards (1920 × 1080) + assets/ placeholders + index.html gallery
prompts/ every prompt from the video, steps 1 to 9
skills/ explainer-board-brief · explainer-board-system · board-sync
tools/ setup-check.sh · export.py (boards → MP4) · make_gifs.py
checks.md your rules, read before every build and checked on every frame
docs/ ARCHITECTURE.md · gifs/ · branding/
flowchart LR
V[Your video] --> W[Whisper<br>word timestamps]
W --> BR[Board brief<br>which lines need a board]
BR --> BD[Build boards<br>catalog + tokens + checks.md]
BD --> SY[Sync<br>each element on its word]
W --> SY
SY --> CH[Chrome<br>renders every frame]
CH --> FF[FFmpeg<br>frames + your voice]
FF --> MP[MP4]
A board is a plain HTML page, 1920 × 1080, that plays in any browser: everything at a fixed pixel position, the bottom-right camera box kept empty, CSS animations for the motion. Syncing gives each element the time of the word that names it.
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.
# one board
python tools/export.py boards/D44Line.html --seconds 8 -o out/line.mp4
# check the first 60 seconds, then the full video
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.
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.