YouTube-AI-Motion-Graphics

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 ↓

YouTube AI Motion Graphics

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.

What's inside

The workflow, in 9 steps

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]

1. Get inspired. Save animations and UIs you like into a references folder.
2. Find your style in Claude Design from those references. → prompts/02
3. Give it your canvas in numbers: size, padding, the empty camera box, the end screen. → prompts/03
4. Start your checks file, fix boards, and let the AI QA itself. → prompts/04, checks.md
5. Make templates for everything. → prompts/05
6. Turn it all into a skill, with a board catalog tagged in the words you say. → prompts/06
7. Transcribe your video with Whisper, word by word, and plan the boards. → prompts/07
8. Sync every board to your voice. → prompts/08
9. Export the MP4, frame by frame. → prompts/09

Quick start

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.sh

Then open boards/index.html in Chrome. GitHub shows HTML as source, so open the boards locally to see them play.

Set up with your coding agent

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.

How it works

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.

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

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'

Charts

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'

Component motion

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'

Premium motion

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)

Workflows and code

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

Story and comparisons

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'

…