Communitygithub.com

devmartinese/awwwards-animations

專業 React 動畫技能,使用 GSAP (useGSAP)、Motion (Framer Motion)、Anime.js 和 Lenis 打造 Awwwards/FWA 等級的動畫效果。適用於建構高階捲動體驗、自訂游標、頁面轉場、文字動畫、視差效果、微互動,以及任何需要達到 60fps 且獲獎級別的動畫。

awwwards-animations 是什麼?

這是一個專為 React 開發者設計的專業動畫技能,目標是建立具備 Awwwards/FWA 水準的頂級動畫體驗。它整合了業界領先的動畫庫(GSAP、Motion、Anime.js、Lenis),並提供多種進階動畫模式,包含流暢捲動、ScrollTrigger 觸發效果、磁力效果、揭示動畫、水平捲動、固定區段、階層效果等。該技能也支援與 Three.js/WebGL 的整合,並涵蓋演算法藝術、生成式藝術、碎形、動力學排版、故障效果等視覺技術。核心設計哲學是 React-first,所有動畫都以 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-system、流場、奇異吸子、神聖幾何、幾何拼圖、杜德尼分割、七巧板、密鋪鋪砌、彭羅斯瓷磚、動力學排版、故障效果、文字爆炸、變形文字、圓形文字、粗獷主義設計、極簡動畫、新粗獷主義,或混合設計哲學。採用 React-first 方法,具備完善的清理機制與 hooks。

相關技能