Back to Details

motion-catalogue

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

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
.
动效设计、动画、3D、着色器及生成式媒体领域导航工具。 当用户询问上述任一领域的技能时启用。
→ 如需全领域完整目录：使用
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)
当用户有以下需求时启用：
  • 询问动画库相关内容（GSAP、Framer Motion、Lottie、CSS动画）
  • 需要3D技术支持（Three.js、WebGPU、着色器、WebGL、R3F）
  • 涉及生成艺术创作（p5.js、算法艺术、创意编码）
  • 需求视频/媒体生成能力（Remotion、fal.ai、生成式媒体）

Motion & Animation

动效与动画

SkillBest 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)
技能适用场景
gsap-skills
官方GSAP：8项技能 — 核心功能、时间轴、ScrollTrigger、Flip、Draggable、SplitText
framer-motion-skills
6项Framer Motion技能：核心功能、Next.js集成、变体、滚动效果、手势交互、布局动画
motion-design-skill
官方LottieFiles：时间控制、缓动效果、编排设计、迪士尼动画12原则
animate-skill
参考Emil风格的Next.js/React模式：悬停效果、提示框、文字渐显、模态框
animate-css-skill
Animate.css v4 + 滚动触发 + RTL支持 + 精简动效适配
css-animation-skill
抓取实时应用设计语言 → 生成独立动画文件
wiggle-claude-skill
将SVG Logo制作成动画 → 导出Lottie JSON、GIF及MP4格式
emilkowalski-skill
动画决策框架、缓动曲线、交互设计原则
claudedesignskills
22项技能合集：Three.js、GSAP、R3F、Framer、Babylon、A-Frame、PixiJS、Rive、Lottie
hyperframes
"编写HTML → 渲染视频"：GSAP/CSS/Lottie/Three.js + TTS（HeyGen）

Generative Art & Creative Coding

生成艺术与创意编码

SkillBest 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
技能适用场景
algorithmic-art
基于p5.js的生成艺术创作：流场、粒子系统
p5js-hermes
p5.js创意编码：噪声效果、粒子系统、GLSL、音频响应
remotion
基于React的程序化视频制作

3D, Shaders & Media

3D、着色器与媒体

SkillBest 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
技能适用场景
shader-dev
GLSL着色器：光线追踪、流体模拟、WebGL特效
cloudai-threejs
Three.js 3D场景搭建、动画制作、WebGL开发
webgpu-claude-skill
Three.js TSL、节点材质、GPU计算、WGSL — 适配r183+版本
threejs-ecs-ts
Three.js + 实体组件系统 + TypeScript
threejs-claude-skill-package
24项技能：WebGL、WebGPU、R3F、物理引擎、IFC/BIM建筑可视化
fal-ai-skills
fal.ai图像/视频及3D模型生成
generative-media-skills
41种工作流：Midjourney v7、Flux Kontext、Kling 3.0、Veo3、Suno音频生成