showheyohtaki / motion-explainer

# Motion Explainer
**Teach the words of your craft. Make the world more creative.**
**English** | 日本語 | 中文 | 한국어 | Español
A prompt that lets you make **"24 names" explainer animations for your own field**: three looping videos with 8 animated cards each, and a one-page cheat sheet, showing the names every practitioner in your field should know.
Give this repository to a coding AI (Claude Code, Codex, Cursor, and so on), tell it your field, and it walks you through the whole set.
*Two sets made this way. The camera set's look is the default; change it freely when your field needs another look (the motion graphics set is one example).*
## Why I made this
The videos in this series that I've posted on X have received all kinds of comments.
Among them, one from someone who had seen my posts caught my eye:
"What was holding me back wasn't a lack of imagination. It was not knowing what this kind of movement is called."
When I read that, I thought, strongly: "Yes, that's exactly it."
The picture is already there in your head, and so is the sense of "I want it to move like this." What's missing isn't talent or imagination. I think it's a "shared language" for handing that image over to AI.
That's why I think it would help so many people if experts in every field posted explainers of the "terms of the trade" you need to really work with AI. With that in mind, I've shared how to make them.
I hope this repository helps many "teachers" emerge, and that thanks to them, more creative directors do wonderful work together with AI. That would be wonderful.
If you make one, post it with #MotionExplainer. I'll come and see it.
— Shohei Ohtaki (@showheyohtaki)
## How to use
1. Install Node.js 18+ and ffmpeg, then in this folder:
 [code] 
2. Open the folder with your coding AI and paste this, written in your own language:
 [code] 
 The set is made in the language you write in: the names your field uses in that language, the labels, the cheat sheet and the post. If that language is not English, every name also carries its English name underneath, so anyone can see what to type into an AI. A version in English or another language is optional; the AI asks once at the end.
 **The look:** say nothing and you get the look of the examples. Add a few words and it follows them, for example "make it colorful" or "use our brand color #1A73E8".
3. Work with it. It stops twice for you: when the **list of 24 names** is ready, and when the **look** of the cards is decided. Your expertise matters most at the first stop. Then it builds, renders and checks the videos, and helps you with the cheat-sheet image, an independent review and the post text.
## What is in here
 [code] 
## The examples
| Set | Look | Labels | Files |
|---|---|---|---|
| Camera moves & transitions | Gray wireframe scenes in a camera viewfinder, one blue for the subject | English, Japanese | `examples/camera-moves` ・ names |
| Motion graphics | Navy stage with four colors, each card like a cut from a motion-desig