YouTube AI Motion Graphics

# YouTube AI Motion Graphics

Gives you 74 animated explainer boards in HTML for YouTube videos, plus every prompt and three Claude skills that sync the boards to your voice and export an MP4.

Made by sirioberati on GitHub. These notes are Mindket's, written from its README; the project's own files and license are in its repository.

## About

What it is: YouTube AI Motion Graphics is a kit of 74 animated boards for explainer videos, each an HTML page sized 1920 × 1080. It also holds every prompt from the maker's video and three Claude skills. Together they take you from a transcript of your voice to an MP4 whose boards move in time with your words.

Who it suits: It suits YouTubers and course makers who explain ideas with diagrams, charts and short animated scenes. You style the boards yourself, since they ship in a plain starter theme.

```table
Industry | Who uses it | How they use it | Example
Video creation | YouTubers and explainer channels | Sync animated boards to a voice-over and export an MP4 | A Timeline board that follows the narration
Education | Teachers and course makers | Show comparisons, matrices and charts as animated boards | A 2×2 matrix or a Venn board
Business content | Teams who explain products or ideas | Lay out choices with versus cards and node graphs | A Versus cards board
```

You can skip it if you want ready-made styling, since the boards are meant to be restyled.

Where to use it:

- Chrome: open any board's HTML file, or browse all boards from one index page
- Claude Code: the three skills install into its skills folder
- Claude Design: used to find your style from reference material
- Whisper: transcribes your video word by word
- FFmpeg with Chrome: exports the final MP4 frame by frame

```table
Use case | Who | What they get back
Explainer diagrams | Video makers | Boards such as Venn, Timeline, 2×2 matrix and Node graph
Charts and data | Video makers | Boards such as Slope chart, Heatmap and Chart focus
Motion effects | Designers | Boards such as Scribble fill, Odometer and Magnifier lens
Voice-synced film | Creators | An MP4 exported frame by frame, with every board timed to your voice
```

How to set it up: You need a few things in place first.

- Claude Code, since the skills install into its skills folder
- Chrome, to open the boards and export the video
- git, to clone the repository
- Any other tools the setup check reports as missing

1. Clone the repository from GitHub and move into its folder.
2. Run the setup script of the board-sync skill.
3. Copy the skills into your Claude skills folder.
4. Run the setup check. It names any missing tool and tells you how to get it.

```bash
cd YouTube-AI-Motion-Graphics
bash skills/board-sync/setup.sh
cp -R skills/* ~/.claude/skills/
bash tools/setup-check.sh
```

How to use it: Open any board in Chrome to see it, or browse all of them from the index page. Then follow the nine-step workflow, with a prompt for each step, beginning with a references folder and ending with the exported video.

- Get inspired: collect animations and interfaces you admire in a references folder
- Work out your visual style in Claude Design, using the references you gathered
- Describe the canvas with real measurements: its size, padding, the empty camera area and the end screen
- Begin a checks file, correct boards and have the AI inspect them itself
- Make templates, then turn them into a skill with a catalog of boards
- Transcribe the video with Whisper, match each board to your speech, then export the MP4

```table
Tool | What it does
explainer-board-brief | Decides what goes on a board
explainer-board-system | Defines how boards look and move, and keeps a catalog of boards tagged with everyday words
board-sync | Syncs boards to your voice and renders the video
setup-check.sh | Reports missing tools and says how to install them
checks.md | Your list of DOs and DON'Ts, built from corrections and used to review each frame
```

Example: Open the Timeline board in Chrome and change its colours and fonts to match your channel. The layout and motion stay as they are. Then run the transcribe, sync and export prompts to get an MP4 with the boards timed to your narration.

For newcomers and experts: If you are new, open the board index in Chrome and click through a few boards. Then run the setup check to see what your computer still needs.

If you know the field, the build is straightforward. The boards are HTML pages animated with GSAP. Whisper gives word-level timings, and the export drives Chrome and FFmpeg so the result is frame-exact. Your checks file turns each correction into a rule, and the board catalog tags each layout with the words you use for it.

```flow
Collect references
Pick a style in Claude Design
Set canvas, checks and templates
Turn them into a skill
Transcribe and sync to your voice
Export the MP4 one frame at a time
```

Good to know:

- The 74 boards use a plain starter theme called Clean minimal, so restyle them
- An AGENTS.md file tells coding agents what lives where and which rules apply
- The README has a License section, so check it before you reuse the boards

## On GitHub, 7 November 2026

- Stars: 159
- Forks: 35
- Watching: 1
- Open issues and pull requests: 0
- Language: HTML
- License: MIT
- Topics: ai-agents, ai-video, animation, claude, claude-code, claude-design, claude-skills, content-creation, data-visualization, explainer-boards, explainer-video, ffmpeg

## Links

- Code: https://github.com/sirioberati/YouTube-AI-Motion-Graphics
- Website: https://tein.ai/
- Releases: https://github.com/sirioberati/YouTube-AI-Motion-Graphics/releases
- Issues: https://github.com/sirioberati/YouTube-AI-Motion-Graphics/issues
- Star history: https://www.star-history.com/#sirioberati/YouTube-AI-Motion-Graphics&Date

## Get the code

```
git clone https://github.com/sirioberati/YouTube-AI-Motion-Graphics.git
```

Then follow the setup in its README. Nothing in this kit runs by itself.

README.md  6 KB