awwwards-animations
✓专业的 React 动画技能，可使用 GSAP (useGSAP)、Motion (Framer Motion)、Anime.js 和 Lenis 创建 Awwwards/FWA 级别的动画。在构建优质滚动体验、自定义光标、页面转换、文本动画、视差效果、微交互或任何需要 60fps 且值得获奖的动画时使用。根据平滑滚动、ScrollTrigger、磁性效果、显示动画、水平滚动、固定部分、交错效果、useScroll、useTransform、与 Three.js/WebGL 集成、算法艺术、数学艺术、生成艺术、分形、L 系统、流场、奇怪吸引子、神圣几何、几何谜题、杜德尼解剖、七巧板、镶嵌、彭罗斯瓷砖、动态排版、故障效果、文本爆炸、变形的请求触发文本、圆形文本、野兽派设计、极简动画、新野兽派或设计哲学混合。具有适当清理和挂钩的反应优先方法。
SKILL.md
Create premium web animations at Awwwards/FWA quality level. React-first approach. 60fps non-negotiable.
| Scroll-driven animations | GSAP + ScrollTrigger + useGSAP | Industry standard, best control | | Smooth scroll | Lenis + ReactLenis | Best performance, works with ScrollTrigger | | React-native animations | Motion (Framer Motion) | Native React, useScroll/useTransform | | Simple/lightweight effects | Anime.js 4.0 | Small footprint, clean API |
| Complex timelines | GSAP | Unmatched timeline control | | SVG morphing | GSAP MorphSVG or Anime.js | Both excellent | | 3D + animation | Three.js + GSAP | GSAP controls Three.js objects | | Page transitions | AnimatePresence or GSAP | Motion for React, GSAP for complex | | Geometric shapes (vector) | SVG + GSAP/Motion | Native, animable |
可引用信息
为搜索与 AI 引用准备的稳定字段与命令。
- 安装命令
npx skills add https://github.com/devmartinese/awwwards-animations-skill --skill awwwards-animations- 分类
- </>开发工具
- 认证
- ✓
- 收录时间
- 2026-02-11
- 更新时间
- 2026-02-18
快速解答
什么是 awwwards-animations？
专业的 React 动画技能，可使用 GSAP (useGSAP)、Motion (Framer Motion)、Anime.js 和 Lenis 创建 Awwwards/FWA 级别的动画。在构建优质滚动体验、自定义光标、页面转换、文本动画、视差效果、微交互或任何需要 60fps 且值得获奖的动画时使用。根据平滑滚动、ScrollTrigger、磁性效果、显示动画、水平滚动、固定部分、交错效果、useScroll、useTransform、与 Three.js/WebGL 集成、算法艺术、数学艺术、生成艺术、分形、L 系统、流场、奇怪吸引子、神圣几何、几何谜题、杜德尼解剖、七巧板、镶嵌、彭罗斯瓷砖、动态排版、故障效果、文本爆炸、变形的请求触发文本、圆形文本、野兽派设计、极简动画、新野兽派或设计哲学混合。具有适当清理和挂钩的反应优先方法。 来源：devmartinese/awwwards-animations-skill。
如何安装 awwwards-animations？
打开你的终端或命令行工具（如 Terminal、iTerm、Windows Terminal 等） 复制并运行以下命令：npx skills add https://github.com/devmartinese/awwwards-animations-skill --skill awwwards-animations 安装完成后，技能将自动配置到你的 AI 编程环境中，可以在 Claude Code 或 Cursor 中使用
这个 Skill 的源码在哪？
https://github.com/devmartinese/awwwards-animations-skill
详情
- 分类
- </>开发工具
- 来源
- skills.sh
- 收录时间
- 2026-02-11