---

name: motion-catalogue description: | 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. triggers:

• "motion skills"
• "animation skill"
• "GSAP skill"
• "Three.js skill"
• "Framer Motion skill"
• "Lottie skill"
• "shader skill"
• "generative art skill"
• "WebGL skill"
• "video generation skill"
• "creative coding skill"

---

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