Awwwards Animations
Ship scroll-driven, physics, and audio-reactive React animations at portfolio-site quality without reinventing Lenis, GSAP, and Motion patterns from scratch.
Overview
Awwwards Animations is an agent skill for the Build phase that teaches React and TypeScript patterns for Awwwards-level scroll, physics, and WebGL animations.
Install
npx skills add https://github.com/devmartinese/awwwards-animations-skill --skill awwwards-animationsWhat is this skill?
- React-first patterns with hooks, cleanup, and TypeScript for production sites
- 10+ animation libraries documented with a category-to-library matrix (scroll, smooth scroll, 2D physics, 3D/WebGL, audio
- 60fps-oriented guidance with GSAP ScrollTrigger, Lenis, Motion, Anime.js, Matter.js, Three.js
- Copy-paste ready components and hooks for parallax, pin sections, and horizontal scroll
- Install via npx skills add or manual copy to ~/.claude/.agents/skills/
- 10+ animation libraries covered
- 60fps guaranteed patterns called out in skill positioning
Adoption & trust: 1.3k installs on skills.sh; 7 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You want a standout animated marketing or product site but lack a vetted stack of Lenis, GSAP, and Motion patterns that stay at 60fps in React.
Who is it for?
Indie frontend devs shipping polished React landing pages, studios, or SaaS sites where motion is a core differentiator.
Skip if: Native mobile animation (Swift/Kotlin), static docs sites with no motion budget, or backends with no UI layer.
When should I use this skill?
When building React sites that need award-level scroll, physics, audio-reactive, or WebGL animation with production hooks and cleanup.
What do I get? / Deliverables
You implement copy-paste hooks and components for scroll, parallax, physics, and audio-reactive effects with documented library choices and cleanup.
- Reusable React animation components and hooks
- Library-specific integration notes for scroll and WebGL effects
Recommended Skills
Journey fit
How it compares
Curated motion playbook for React—not a single-library cheat sheet or a no-code Webflow-only template.
Common Questions / FAQ
Who is awwwards-animations for?
Solo builders and frontend-focused indies using React who want FWA/Awwwards-quality motion with maintained hooks and library pairings.
When should I use awwwards-animations?
During Build frontend work when designing hero sections, scroll narratives, WebGL accents, or audio-reactive UI for a launch-bound site.
Is awwwards-animations safe to install?
Review the Security Audits panel on this Prism page; the skill is documentation and patterns—your agent may add npm dependencies you should vet before install.
SKILL.md
READMESKILL.md - Awwwards Animations
.DS_Store *.skill # Awwwards Animations A 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. ## Features - **React-first approach** with proper hooks, cleanup, and TypeScript - **10+ animation libraries** covered with best practices - **60fps guaranteed** patterns and performance optimization - **Copy-paste ready** components and hooks ### What's Included | Category | Libraries | Patterns | |----------|-----------|----------| | Scroll Animations | GSAP + ScrollTrigger, Motion | Parallax, pin sections, horizontal scroll | | Smooth Scroll | Lenis + ReactLenis | GSAP integration, scroll-linked effects | | React Animations | Motion (Framer Motion) | useScroll, useTransform, AnimatePresence | | Lightweight Effects | Anime.js 4.0 | Timelines, stagger, SVG morphing | | Geometric Shapes | SVG, Canvas, Zdog, p5.js | Tetris-style, creative coding | | Audio Reactive | Tone.js, Web Audio API | Scroll audio, UI sounds, visualizers | | Physics 2D | Matter.js | Gravity, collisions, constraints | | 3D & WebGL | Three.js + GSAP | Shaders, canvas effects | ## Installation ### Using npx (skills.sh) ```bash npx skills add YOUR_USERNAME/awwwards-animations ``` ### Manual Installation Copy the skill folder to your Claude Code skills directory: ```bash # Global installation cp -r awwwards-animations ~/.claude/.agents/skills/ # Or project-level cp -r awwwards-animations .claude/skills/ ``` ## Usage Once installed, simply ask Claude to help you with animations: > "Create a hero section with parallax and smooth scroll" > "Make a grid of blocks that fall with physics and play sounds on collision" > "Build a magnetic cursor with blend mode difference" Claude will use this skill automatically when you request animation-related help. ## Project Setup When starting a new project, install the required dependencies: ```bash # Core animation libraries npm install gsap @gsap/react lenis motion animejs # Optional: Physics & Audio npm install matter-js tone npm install --save-dev @types/matter-js ``` ## Skill Structure ``` awwwards-animations/ ├── SKILL.md # Core patterns & quick reference └── references/ ├── gsap-react.md # useGSAP, ScrollTrigger, timelines ├── motion-patterns.md # Framer Motion patterns ├── animejs-react.md # Anime.js 4.0 patterns ├── lenis-react.md # Smooth scroll integration ├── geometric-shapes.md # SVG, Canvas, Zdog, p5.js ├── audio-reactive.md # Tone.js, Web Audio ├── physics-2d.md # Matter.js physics ├── advanced-patterns.md # Three.js, WebGL, shaders └── performance.md # 60fps optimization ``` ## Key Patterns ### Lenis + GSAP ScrollTrigger (Critical Setup) ```tsx import { ReactLenis, useLenis } from 'lenis/react' import gsap from 'gsap' import { ScrollTrigger } from 'gsap/ScrollTrigger' // Connect Lenis to ScrollTrigger const lenis = useLenis() lenis.on('scroll', ScrollTrigger.update) gsap.ticker.add((time) => lenis.raf(time * 1000)) gsap.ticker.lagSmoothing(0) ``` ### Magnetic Button (Motion) ```tsx <motion.button onMouseMove={handleMouse} onMouseLeave={() => setPosition({ x: 0, y: 0 })} animate={position} transition={{ type: 'spring', stiffness: 150, damping: 15 }} > {children} </motion.button> ``` ### Physics + Audio Collision ```tsx Matter.Events.on(engine, 'collisionStart', async () => { await Tone.start() synth.triggerAttackRelease('C4', '16n') }) ``` ## Libraries & Versions | Library | Version | Purpose | |---------|---------|---------| | GSAP | 3.12+ | Scroll animations, timelines | | @gsap/react | latest | useGSAP hook | | Lenis | 1.1+ | Smooth scroll | | Motion | latest | React animations | | Anime.js | 4.0+ | Lightweight animations | | Matter.js | 0.19+ | 2D physics | | Tone.js |