gongnyang / awesome-ai-motion

Awesome AI Motion 
 A motion field guide your AI agent can read. 
 637 techniques · 128 reference clips · 11 recipes · 7 design routes 
 한국어 · Website · Agent skill · Full catalog 
Choose motion for what a scene needs to communicate. Each effect card gives you a definition, tuned parameters, examples, sources and prompts for Claude Code and Codex.
## Quick start
### 1. Get the guide
 [code] 
Browsing the website, reading cards and using the skill require no dependency installation.
For local rendering, use Node.js 20+, ffmpeg on PATH, and Playwright with Chromium installed.
Run the following only when those rendering dependencies are missing:
 [code] 
### 2. Connect the skill
Link this checkout into Claude Code’s skill directory:
 [code] 
Or copy it instead of creating a link. Choose one method; the destination should be unused.
 [code] 
For Codex, use the same link or copy under `~/.codex/skills/`. Copies need updating when the guide changes.
Then ask the agent to choose an effect for the scene:
 [code] 
### 3. Render your first clip
Render a copy with your own text, an embeddable stage and a separate output directory:
 [code] 
Open `.staging/my-first-motion/clip.mp4`, `preview.gif` or `poster.jpg`. The source effect stays available for reuse.
Use an output directory outside `effects/` and `recipes/` to keep reference clips intact.
## Sixteen high-impact clips
Large camera moves, bold reveals and shape changes show the range of the guide. Click a preview to read its card.
 Infinite Canvas Pan MP4 
 Camera Fly-through MP4 
 Infinite Zoom MP4 
 Deep Multi-layer Parallax MP4 
 Kinetic Type Sweep MP4 
 Giant Mask Reveal MP4 
 Particle Scatter & Assemble MP4 
 Morph Match Cut MP4 
 3D Card Flip Stack MP4 
 Perspective Tilt Reveal MP4 
 Shader Directional Warp Wipe MP4 
 Noise Dissolve Transition MP4 
 Light Sweep MP4 
 Scroll-scrub Cinema Scene MP4 
 Ken Burns MP4 
 Overlapping Action MP4 
## Eight recipes in motion
Watch effects combine into a scene, including the educational opening hook. Click a name or preview to read the recipe.
 Educational Opening Hook MP4 
 Shorts Hook MP4 
 Title Opener MP4 
 Product UI Demo MP4 
 Data Story MP4 
 Concept Explainer MP4 
 Before and After MP4 
 Scroll Deck Scene MP4 
Use the website for slow playback and comparisons of up to four clips. The full catalog includes every technique and its clip status.
## Find your next scene
| Start here | Use it for |
|---|---|
| Website | Browse, play, filter and compare clips |
| Docs contents | Navigate the guide without reading every card |
| Full catalog | All techniques grouped by motion family |
| Decision tables | Choose by purpose or medium |
| Recipes | Combine effects into a timed scene |
| Design routes | Plan a promo, short, deck or other deliverable; route documents are in Korean |
| Agent workflow | Purpose, card, adaptation, render and verification |
| Source data | Query effect metadata directly |
A card lives at `effects/ /README.md`. Rendered effects also inc