{
  "markdown": "# Awwwards Animations\n\nA comprehensive Claude Code skill for creating **Awwwards/FWA-level web animations** in React. Production-ready patterns for scroll experiences, physics, audio-reactive visuals, and more.\n\n## Features\n\n- **React-first approach** with proper hooks, cleanup, and TypeScript\n- **10+ animation libraries** covered with best practices\n- **60fps guaranteed** patterns and performance optimization\n- **Copy-paste ready** components and hooks\n\n### What's Included\n\n| Category | Libraries | Patterns |\n|----------|-----------|----------|\n| Scroll Animations | GSAP + ScrollTrigger, Motion | Parallax, pin sections, horizontal scroll |\n| Smooth Scroll | Lenis + ReactLenis | GSAP integration, scroll-linked effects |\n| React Animations | Motion (Framer Motion) | useScroll, useTransform, AnimatePresence |\n| Lightweight Effects | Anime.js 4.0 | Timelines, stagger, SVG morphing |\n| Geometric Shapes | SVG, Canvas, Zdog, p5.js | Tetris-style, creative coding |\n| Audio Reactive | Tone.js, Web Audio API | Scroll audio, UI sounds, visualizers |\n| Physics 2D | Matter.js | Gravity, collisions, constraints |\n| 3D & WebGL | Three.js + GSAP | Shaders, canvas effects |\n\n## Installation\n\n### Using npx (skills.sh)\n\n```bash\nnpx skills add YOUR_USERNAME/awwwards-animations\n```\n\n### Manual Installation\n\nCopy the skill folder to your Claude Code skills directory:\n\n```bash\n# Global installation\ncp -r awwwards-animations ~/.claude/.agents/skills/\n\n# Or project-level\ncp -r awwwards-animations .claude/skills/\n```\n\n## Usage\n\nOnce installed, simply ask Claude to help you with animations:\n\n> \"Create a hero section with parallax and smooth scroll\"\n\n> \"Make a grid of blocks that fall with physics and play sounds on collision\"\n\n> \"Build a magnetic cursor with blend mode difference\"\n\nClaude will use this skill automatically when you request animation-related help.\n\n## Project Setup\n\nWhen starting a new project, install the required dependencies:\n\n```bash\n# Core animation libraries\nnpm install gsap @gsap/react lenis motion animejs\n\n# Optional: Physics & Audio\nnpm install matter-js tone\nnpm install --save-dev @types/matter-js\n```\n\n## Skill Structure\n\n```\nawwwards-animations/\n├── SKILL.md                         # Core patterns & quick reference\n└── references/\n    ├── gsap-react.md                # useGSAP, ScrollTrigger, timelines\n    ├── motion-patterns.md           # Framer Motion patterns\n    ├── animejs-react.md             # Anime.js 4.0 patterns\n    ├── lenis-react.md               # Smooth scroll integration\n    ├── geometric-shapes.md          # SVG, Canvas, Zdog, p5.js\n    ├── audio-reactive.md            # Tone.js, Web Audio\n    ├── physics-2d.md                # Matter.js physics\n    ├── advanced-patterns.md         # Three.js, WebGL, shaders\n    └── performance.md               # 60fps optimization\n```\n\n## Key Patterns\n\n### Lenis + GSAP ScrollTrigger (Critical Setup)\n\n```tsx\nimport { ReactLenis, useLenis } from 'lenis/react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/ScrollTrigger'\n\n// Connect Lenis to ScrollTrigger\nconst lenis = useLenis()\nlenis.on('scroll', ScrollTrigger.update)\ngsap.ticker.add((time) => lenis.raf(time * 1000))\ngsap.ticker.lagSmoothing(0)\n```\n\n### Magnetic Button (Motion)\n\n```tsx\n<motion.button\n  onMouseMove={handleMouse}\n  onMouseLeave={() => setPosition({ x: 0, y: 0 })}\n  animate={position}\n  transition={{ type: 'spring', stiffness: 150, damping: 15 }}\n>\n  {children}\n</motion.button>\n```\n\n### Physics + Audio Collision\n\n```tsx\nMatter.Events.on(engine, 'collisionStart', async () => {\n  await Tone.start()\n  synth.triggerAttackRelease('C4', '16n')\n})\n```\n\n## Libraries & Versions\n\n| Library | Version | Purpose |\n|---------|---------|---------|\n| GSAP | 3.12+ | Scroll animations, timelines |\n| @gsap/react | latest | useGSAP hook |\n| Lenis | 1.1+ | Smooth scroll |\n| Motion | latest | React animations |\n| Anime.js | 4.0+ | Lightweight animations |\n| Matter.js | 0.19+ | 2D physics |\n| Tone.js | 14+ | Audio synthesis |\n\n## Inspiration\n\nThis skill is designed to help create websites at the level of:\n\n- [Active Theory](https://activetheory.net)\n- [Studio Freight](https://studiofreight.com)\n- [Locomotive](https://locomotive.ca)\n- [Resn](https://resn.co.nz)\n- [Aristide Benoist](https://aristidebenoist.com)\n\n## Contributing\n\nContributions are welcome! Feel free to:\n\n1. Fork the repository\n2. Add new patterns or improve existing ones\n3. Submit a pull request\n\n## License\n\nMIT License - feel free to use in personal and commercial projects.\n\n---\n\n**Made for the creative developer community**\n",
  "bytes": 4579,
  "sha": "ce6de3d0725461d19a493e0b43c9c88eef43ec9a2ff25a98e3221ebecce55026",
  "repo_slug": "devmartinese/awwwards-animations-skill",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/skl_devmartinese_awwwards_animations_skill_a_0714d2cb/readme"
}