SKILL.md
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 |