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 | Official GSAP: 8 skills — core, timeline, ScrollTrigger, Flip, Draggable, SplitText |
framer-motion-skills | 6 Framer Motion skills: core, Next.js, variants, scroll, gestures, layout |
motion-design-skill | Official LottieFiles: timing, easing, choreography, Disney 12 principles |
animate-skill | Emil-inspired Next.js/React patterns: hover, toast, text reveal, modals |
animate-css-skill | Animate.css v4 + scroll triggers + RTL + prefers-reduced-motion |
css-animation-skill | Scrapes live app design language → standalone animation file |
wiggle-claude-skill | Animates SVG logos → Lottie JSON → GIF + MP4 |
emilkowalski-skill | Animation decision framework, easing curves, interaction principles |
claudedesignskills | 22-skill bundle: Three.js, GSAP, R3F, Framer, Babylon, A-Frame, PixiJS, Rive, Lottie |
hyperframes | "Write HTML → render video": GSAP/CSS/Lottie/Three.js + TTS (HeyGen) |
Generative Art & Creative Coding
| Skill | Best for |
|---|---|
algorithmic-art | Generative art with p5.js, flow fields, particle systems |
p5js-hermes | p5.js creative coding: noise, particles, GLSL, audio-reactive |
remotion | Programmatic video with React |
3D, Shaders & Media
| Skill | Best for |
|---|---|
shader-dev | GLSL shaders: ray marching, fluid simulation, WebGL effects |
cloudai-threejs | Three.js 3D scenes, animations, WebGL |
webgpu-claude-skill | Three.js TSL, node materials, GPU compute, WGSL — r183+ |
threejs-ecs-ts | Three.js + Entity Component Systems + TypeScript |
threejs-claude-skill-package | 24 skills: WebGL, WebGPU, R3F, physics, IFC/BIM architecture |
fal-ai-skills | fal.ai image/video and 3D model generation |
generative-media-skills | 41 workflows: Midjourney v7, Flux Kontext, Kling 3.0, Veo3, Suno audio |