# Motion Catalogue

> Domain navigator for motion, animation, 3D, and generative media skills. Routes to the right skill for GSAP, Framer Motion, Three.js, Lottie, shaders, generative art, video, and AI media generation.

- Skill: `podo/motion-catalogue` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add podo/motion-catalogue`
- Raw SKILL.md: https://api.skillmd.com/api/skills/podo/motion-catalogue/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: podo (https://skillmd.com/u/podo)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/podo/motion-catalogue

---


# motion-catalogue

Domain navigator for motion design, animation, 3D, shaders, and generative media.
Activate when the user asks for a skill in one of these areas.

→ For the full catalogue across all domains: use `design-catalogue`.

## When to use

Activate when the user:
- Asks about animation libraries (GSAP, Framer Motion, Lottie, CSS animations)
- Wants 3D (Three.js, WebGPU, shaders, WebGL, R3F)
- Needs generative art (p5.js, algorithmic art, creative coding)
- Wants video/media generation (Remotion, fal.ai, generative media)

## Motion & Animation

| Skill | Best for |
|-------|----------|
| [`gsap-skills`](../gsap-skills/SKILL.md) | Official GSAP: 8 skills — core, timeline, ScrollTrigger, Flip, Draggable, SplitText |
| [`framer-motion-skills`](../framer-motion-skills/SKILL.md) | 6 Framer Motion skills: core, Next.js, variants, scroll, gestures, layout |
| [`motion-design-skill`](../motion-design-skill/SKILL.md) | Official LottieFiles: timing, easing, choreography, Disney 12 principles |
| [`animate-skill`](../animate-skill/SKILL.md) | Emil-inspired Next.js/React patterns: hover, toast, text reveal, modals |
| [`animate-css-skill`](../animate-css-skill/SKILL.md) | Animate.css v4 + scroll triggers + RTL + prefers-reduced-motion |
| [`css-animation-skill`](../css-animation-skill/SKILL.md) | Scrapes live app design language → standalone animation file |
| [`wiggle-claude-skill`](../wiggle-claude-skill/SKILL.md) | Animates SVG logos → Lottie JSON → GIF + MP4 |
| [`emilkowalski-skill`](../emilkowalski-skill/SKILL.md) | Animation decision framework, easing curves, interaction principles |
| [`claudedesignskills`](../claudedesignskills/SKILL.md) | 22-skill bundle: Three.js, GSAP, R3F, Framer, Babylon, A-Frame, PixiJS, Rive, Lottie |
| [`hyperframes`](../hyperframes/SKILL.md) | "Write HTML → render video": GSAP/CSS/Lottie/Three.js + TTS (HeyGen) |

## Generative Art & Creative Coding

| Skill | Best for |
|-------|----------|
| [`algorithmic-art`](../algorithmic-art/SKILL.md) | Generative art with p5.js, flow fields, particle systems |
| [`p5js-hermes`](../p5js-hermes/SKILL.md) | p5.js creative coding: noise, particles, GLSL, audio-reactive |
| [`remotion`](../remotion/SKILL.md) | Programmatic video with React |

## 3D, Shaders & Media

| Skill | Best for |
|-------|----------|
| [`shader-dev`](../shader-dev/SKILL.md) | GLSL shaders: ray marching, fluid simulation, WebGL effects |
| [`cloudai-threejs`](../cloudai-threejs/SKILL.md) | Three.js 3D scenes, animations, WebGL |
| [`webgpu-claude-skill`](../webgpu-claude-skill/SKILL.md) | Three.js TSL, node materials, GPU compute, WGSL — r183+ |
| [`threejs-ecs-ts`](../threejs-ecs-ts/SKILL.md) | Three.js + Entity Component Systems + TypeScript |
| [`threejs-claude-skill-package`](../threejs-claude-skill-package/SKILL.md) | 24 skills: WebGL, WebGPU, R3F, physics, IFC/BIM architecture |
| [`fal-ai-skills`](../fal-ai-skills/SKILL.md) | fal.ai image/video and 3D model generation |
| [`generative-media-skills`](../generative-media-skills/SKILL.md) | 41 workflows: Midjourney v7, Flux Kontext, Kling 3.0, Veo3, Suno audio |