Communitygithub.com

devmartinese/awwwards-animations

专业 React 动画技能,使用 GSAP(useGSAP)、Motion(Framer Motion)、Anime.js 和 Lenis 创建 Awwwards/FWA 级别的动画。适合构建高级滚动体验、自定义光标、页面过渡、文字动画、视差效果、微交互或任何需要达到 60fps 且值得获奖的动画。

awwwards-animations 是什么?

该技能是一个面向 React 开发者的专业动画工具包,专注于创建符合 Awwwards 和 FWA 标准的高质量动画体验。它集成了 GSAP(通过 useGSAP)、Motion(原 Framer Motion)、Anime.js 和 Lenis 等主流动效库,支持从平滑滚动、ScrollTrigger、磁性效果、揭示动画到水平滚动、固定截面、交错效果等多种高级交互模式。此外,还能处理 Three.js/WebGL 集成、算法艺术、分形、L-系统、流场、奇异吸引子、神圣几何、几何拼图、动态排版、毛刺效果、文字爆炸、变形文字、圆形文字、粗野主义设计、极简动画、新粗野主义等创意方向。该技能在 React 生态中优先使用 hooks 和正确的清理机制,确保性能和可维护性。

兼容平台~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/devmartinese/awwwards-animations-skill/tree/main/skills/awwwards-animations

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

awwwards-animations 是做什么的?

专业 React 动画技能,使用 GSAP(useGSAP)、Motion(Framer Motion)、Anime.js 和 Lenis 创建 Awwwards/FWA 级别的动画。适合构建高级滚动体验、自定义光标、页面过渡、文字动画、视差效果、微交互或任何需要达到 60fps 且值得获奖的动画。触发条件包括:平滑滚动、ScrollTrigger、磁性效果、揭示动画、水平滚动、固定截面、交错效果、useScroll、useTransform、与 Three.js/WebGL 集成、算法艺术、数学艺术、生成艺术、分形、L-系统、流场、奇异吸引子、神圣几何、几何拼图、杜德尼剖分、七巧板、密铺、彭罗斯瓷砖、动态排版、毛刺效果、文字爆炸、变形文字、圆形文字、粗野主义设计、极简动画、新粗野主义或设计哲学混合。采用 React 优先的方法,支持正确的清理和 hooks。

相关技能