# awwwards-animations

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.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 2900 installs · ★ 15
- Author: DevMartinese
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/DevMartinese/awwwards-animations-skill/tree/HEAD/SKILL.md
- Updated: 2026-02-09
- HTML: https://affpapa.org/en/nevibecode/skills/awwwards-animations

## What it 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`.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add DevMartinese/awwwards-animations-skill --skill awwwards-animations -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/awwwards-animations/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/awwwards-animations/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add DevMartinese/awwwards-animations-skill --skill awwwards-animations -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/awwwards-animations/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add DevMartinese/awwwards-animations-skill --skill awwwards-animations -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/awwwards-animations/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install DevMartinese/awwwards-animations-skill awwwards-animations
```

2. **Manually: put the files in place**
- File: `.github/skills/awwwards-animations/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add DevMartinese/awwwards-animations-skill --skill awwwards-animations -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/DevMartinese/awwwards-animations-skill
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/awwwards-animations/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add DevMartinese/awwwards-animations-skill --skill awwwards-animations -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/DevMartinese/awwwards-animations-skill/tree/HEAD/SKILL.md

## When to use it
- 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
- 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

## Similar
- [build-awwwards-quality-sites](https://affpapa.org/en/nevibecode/skills/build-awwwards-quality-sites.md) — skill · 3100 installs
- [cinematic-gsap-lenis-motion-system](https://affpapa.org/en/nevibecode/skills/cinematic-gsap-lenis-motion-system.md) — skill · 2400 installs
- [gsap-web](https://affpapa.org/en/nevibecode/skills/gsap-web.md) — skill · 2500 installs
- [motion-dev-animations](https://affpapa.org/en/nevibecode/skills/motion-dev-animations.md) — skill · 594 installs
- [gsap](https://affpapa.org/en/nevibecode/skills/athevon-gsap.md) — skill · 997 installs
- [gsap-framer-scroll-animation](https://affpapa.org/en/nevibecode/skills/gsap-framer-scroll-animation.md) — skill · 3900 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md