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.
How do I install this agent skill?
npx skills add https://github.com/podo/design-agent-skills --skill motion-catalogueIs this agent skill safe to install?
- Gen Agent Trust Hubpass
This skill is a safe, informational directory for motion, animation, and 3D media skills. It acts as a navigator and contains no executable code, network operations, or sensitive data access.
- Socketpass
No alerts
- Snykpass
Risk: LOW · No issues
What does this agent skill do?
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 |
How can the creator link this skill?
Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.
<a href="https://skillzs.dev/skills/podo/design-agent-skills/motion-catalogue">View motion-catalogue on skillZs</a>