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