awwwards-animations — Claude Code skill: Awwwards-grade React motion
A React animation skill for Awwwards and FWA-grade work: scroll effects, custom cursors, page transitions, generative art. Useful when you need smooth 60fps motion.
npx skills add DevMartinese/awwwards-animations-skill --skill awwwards-animations -a claude-codeWhat awwwards-animations does
The skill tells your agent which library fits a given task. It ships a decision matrix: GSAP with ScrollTrigger and useGSAP for scroll-driven animation, Lenis for smooth scrolling, Motion (Framer Motion) for React-native motion, Anime.js 4.0 for lightweight effects. Separate references cover Three.js and WebGL, Matter.js physics, Tone.js audio reactivity, generative art and geometric puzzles.
It is React-first: hooks, proper cleanup, and the Lenis-to-ScrollTrigger wiring through gsap.ticker. Reference files go deep on text effects, glitch, fractals, L-systems and tessellations. Two ready patterns are included — a magnetic cursor on GSAP and a magnetic button on Motion.
Worth installing if your project is already React. The patterns lean on useGSAP, ReactLenis and Motion hooks, so on a non-React component stack you would be rewriting them. Node.js is needed for the install, since the commands run through npx skills.
What it helps with
- pick the right animation library for a task
- add smooth scroll that works with ScrollTrigger
- build a custom cursor and magnetic buttons
- wire up React page transitions
- render fractals, L-systems and flow fields on canvas
Example prompts for the agent
- Set up smooth scroll with Lenis and hook it into ScrollTrigger
- Add a magnetic cursor and a magnetic button using Motion
- Build a horizontal scroll section with pinned panels and stagger
How to install awwwards-animations
1Skills CLI (Vercel)
npx skills add DevMartinese/awwwards-animations-skill --skill awwwards-animations -a claude-code2Manually: put the files in place
~/.claude/skills/awwwards-animations/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/awwwards-animations/
1Skills CLI (Vercel)
npx skills add DevMartinese/awwwards-animations-skill --skill awwwards-animations -a codex2Manually: put the files in place
.agents/skills/awwwards-animations/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add DevMartinese/awwwards-animations-skill --skill awwwards-animations -a cursor2Manually: put the files in place
.cursor/skills/awwwards-animations/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install DevMartinese/awwwards-animations-skill awwwards-animations2Manually: put the files in place
.github/skills/awwwards-animations/SKILL.md1Skills CLI (Vercel)
npx skills add DevMartinese/awwwards-animations-skill --skill awwwards-animations -a gemini-cli2Platform CLI
gemini skills install https://github.com/DevMartinese/awwwards-animations-skillManually: put the files in place
.devin/skills/awwwards-animations/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add DevMartinese/awwwards-animations-skill --skill awwwards-animations -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about awwwards-animations
How do I install awwwards-animations in Claude?
Run npx skills add DevMartinese/awwwards-animations-skill --skill awwwards-animations -a claude-code. The skill lands at ~/.claude/skills/awwwards-animations/SKILL.md.
What does awwwards-animations do?
It guides the agent through React animations at Awwwards level: scroll effects, page transitions, text effects, generative visuals. You get a library decision matrix plus ready patterns for GSAP, Motion, Anime.js and Lenis.
What libraries does the skill need?
GSAP with @gsap/react, Lenis, Motion and Anime.js 4.0 — the same set the skill recommends installing. It is React-first, so your project should be on React.
