 Venn |  Timeline |  2×2 matrix |
 Slope chart |  Heatmap |  Chart focus |
 Scribble fill |  Node graph |  Versus cards |
 Loop |  Odometer |  Magnifier lens |
12 of the 74 boards. See them all ↓
74 animated explainer boards for YouTube videos that sync to your voice. Made with Claude Design and Claude Code.
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.
Join the TEIN AI waitlist → · Setup · Prompts · Board gallery · License
Want more open-source AI workflows?
Join the TEIN AI waitlist for updates on new workflows, tools, and releases.
Join the waitlist at tein.ai →
Join our free community →
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]
- Get inspired. Save animations and UIs you like into a
referencesfolder. - Find your style in Claude Design from those references. →
prompts/02 - Give it your canvas in numbers: size, padding, the empty camera box, the end screen. →
prompts/03 - Start your checks file, fix boards, and let the AI QA itself. →
prompts/04,checks.md - Make templates for everything. →
prompts/05 - Turn it all into a skill, with a board catalog tagged in the words you say. →
prompts/06 - Transcribe your video with Whisper, word by word, and plan the boards. →
prompts/07 - Sync every board to your voice. →
prompts/08 - Export the MP4, frame by frame. →
prompts/09
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/
bash tools/setup-check.shThen 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 6You 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.
 Bar chart comparing amounts, 'this one is way bigger' |  Line chart 'it went up', 'over time', growth |  Share and big numbers 'X percent', one big number, a share |
 Pyramid 'it all builds on', foundations | Cycle / loop 'loop', 'repeat', 'over and over', feedback |  Funnel 'out of all of these, only', narrowing down |
Timeline 'first… then… in 2024', history | Venn 'where these overlap', 'both' | 2×2 matrix 'trade-off', 'fast but expensive' |
 Tree 'it's made of', 'breaks down into' |  Numbered steps 'step one, step two', how-to |  Terminal 'run this command', 'type this' |
 Chapter divider + lower third 'part two', 'now let's move on to' |  Kinetic quote the one line people should remember |  Device connections 'connected to', 'talks to' |
 Waterfall 'it adds up to', 'where the cost goes' |  Stacked bars 'the total is made of' |  Grouped bars 'compared on price, speed and quality' |
Slope chart 'before and after', 'it went from X to Y' |  Dot plot 'cheap but slow', two qualities at once |  KPI row + sparklines 'the numbers', stars, views, members |
 Ranking table 'the best one is', ranking tools |  Gauge + progress 'how risky', 'how real', a score on a scale | Heatmap 'every day', activity over time |
 Share split 'how much is X, how much is Y' |
 Price card reveal 'it costs', a price |  Table: cascade + row focus 'and the answer is this row' | Chart: build + focus bar 'look at this bar' |
 App window: build + focus area 'in the app, click here', a UI area |  Code panel: type + line focus 'this line does', explaining code |  Receipt prints out 'the bill', 'what you pay' |
Node graph: build + pulse + focus 'the data flows through', a pipeline |  Phone: spring + scroll + notify 'on your phone', a notification |  Chips: cloud → filter 'out of all these options, pick' |
 KPI tiles: flip + count + focus 'the number that matters' | Versus cards: enter + winner 'X vs Y, and the winner is' |  Folder tree: grow + open 'open this folder' |
Magnifier lens 'look closer', finding one value |  Stack: deal + pull one out 'pick one out of the pile' |
 Focus pull walking through a list, 'first this, then this' (focus pull) |  Keyframes 'it moves from here to there' (keyframes) |  Kinetic type a punchline with numbers |
 Mask line reveal a statement title | Odometer roll the payoff number |  Scramble decode a name appearing: a skill, a file, a command |
 Line draw + follow 'from here to there' (line draw) |  Card flip 'before / after', question to answer |  Deck fan-out 'there are N of these', options, versions |
 Live cable 'connected', stays linked while moving |  Loader → done 'it runs… and it's done' |  Chat + typing 'I asked it', talking to an agent |
 Letter wave one emphasised word |  Confetti burst 'it worked', 'done', a win |  Liquid text fill 'filling up', progress, capacity |
Scribble fill 'colour it in' (scribble fill) |  Cross out + rewrite 'not this, that', old way to new way |  Rotating word 'it does X, Y and Z' |
 Scribble checklist 'done, done, next' (checklist) |  Highlighter sweep the two phrases that matter (scribble highlight) |
 Node graph 'the workflow', a pipeline as a system |  Render pipeline 'how code becomes a video' |  Steps on a track 'the whole process in N steps' |
 File anatomy 'the skill file', 'the prompt file' |  Folder tree 'where do I find it' |  Diff view 'change this to that' |
 Error → fix 'it broke, here's the fix' |  Decision flowchart 'which one do I pick' |  Request → response 'what is an API', request and response |
 Agenda / chapter map 'here's what we'll cover', chapters |  Myth vs fact correcting a belief, 'everyone thinks… but' |  3 things to remember 'three things to remember' |
 Versus ledger 'X vs Y on several things' |  Scorecard 'which one should I use' |  End-screen layout the sign-off, end screen |
- Change the theme in
tokens.mdandbrand.css, or tell Claude: "restyle every board inboards/in my style from my references, keep the layout and the motion." - Swap the placeholders in
boards/assets/for your own camera and footage, with the same file names. - Every time you fix a board, say "add it to checks.md".
Want more open-source AI workflows?
Join the TEIN AI waitlist → · Join our free community →
MIT. Use it, change it, ship it. See LICENSE.