awwwards-animations
✓Professional React animation skill for creating Awwwards/FWA-level animations using GSAP (useGSAP), Motion (Framer Motion), Anime.js, and Lenis. Use when building premium scroll experiences, custom cursors, page transitions, text animations, parallax effects, micro-interactions, or any animation that needs to be 60fps and award-worthy. Triggers on requests for smooth scroll, ScrollTrigger, magnetic effects, reveal animations, horizontal scroll, pin sections, stagger effects, useScroll, useTransform, integration with Three.js/WebGL, algorithmic art, mathematical art, generative art, fractals, L-systems, flow fields, strange attractors, sacred geometry, geometric puzzles, Dudeney dissections, tangram, tessellations, Penrose tiles, kinetic typography, glitch effects, text explosion, morphing text, circular text, brutalist design, minimalist animation, neo-brutalism, or design philosophy mixing. React-first approach with proper cleanup and hooks.
Installation
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 |
Facts (cite-ready)
Stable fields and commands for AI/search citations.
- Install command
npx skills add https://github.com/devmartinese/awwwards-animations-skill --skill awwwards-animations- Category
- </>Dev Tools
- Verified
- ✓
- First Seen
- 2026-02-11
- Updated
- 2026-02-18
Quick answers
What is awwwards-animations?
Professional React animation skill for creating Awwwards/FWA-level animations using GSAP (useGSAP), Motion (Framer Motion), Anime.js, and Lenis. Use when building premium scroll experiences, custom cursors, page transitions, text animations, parallax effects, micro-interactions, or any animation that needs to be 60fps and award-worthy. Triggers on requests for smooth scroll, ScrollTrigger, magnetic effects, reveal animations, horizontal scroll, pin sections, stagger effects, useScroll, useTransform, integration with Three.js/WebGL, algorithmic art, mathematical art, generative art, fractals, L-systems, flow fields, strange attractors, sacred geometry, geometric puzzles, Dudeney dissections, tangram, tessellations, Penrose tiles, kinetic typography, glitch effects, text explosion, morphing text, circular text, brutalist design, minimalist animation, neo-brutalism, or design philosophy mixing. React-first approach with proper cleanup and hooks. Source: devmartinese/awwwards-animations-skill.
How do I install awwwards-animations?
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/devmartinese/awwwards-animations-skill --skill awwwards-animations Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code or Cursor
Where is the source repository?
https://github.com/devmartinese/awwwards-animations-skill
Details
- Category
- </>Dev Tools
- Source
- skills.sh
- First Seen
- 2026-02-11