gongnyang/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.

git clone https://github.com/gongnyang/awesome-ai-motion.git
cd awesome-ai-motion

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:

npm install                          # Optional if global playwright is available
npx playwright install chromium      # Skip if Chromium is already installed
ffmpeg -version                      # Verify ffmpeg is on PATH

Link this checkout into Claude Code’s skill directory:

mkdir -p ~/.claude/skills
ln -s "$PWD" ~/.claude/skills/awesome-ai-motion

Or copy it instead of creating a link. Choose one method; the destination should be unused.

mkdir -p ~/.claude/skills
cp -R "$PWD" ~/.claude/skills/awesome-ai-motion

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:

Choose motion for a product reveal. Read the effect card and use its default parameters.

Render a copy with your own text, an embeddable stage and a separate output directory:

node scripts/render.mjs effects/mask-reveal \
  --embed --text "Make it move" --out .staging/my-first-motion

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.

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

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.

A card lives at effects/<slug>/README.md. Rendered effects also include index.html, clip.mp4, preview.gif and poster.jpg.

See CONTRIBUTING.md for new effects, improved defaults and reference clips. Keep motion legible, use the shared stage, and verify the rendered result. index.json is the canonical catalog. Update the relevant source or generator, then regenerate the docs and website:

node scripts/build.mjs
node scripts/check.mjs

Original work is covered by MIT. Source references and component licenses are recorded in ATTRIBUTIONS.md and each effect card. GSAP and bundled fonts retain their own licenses. Consult the attribution notice when redistributing those assets.