awwwards-animations
✓Professionelle React-Animationsfähigkeiten zum Erstellen von Animationen auf Awwwards/FWA-Ebene mit GSAP (useGSAP), Motion (Framer Motion), Anime.js und Lenis. Verwenden Sie es, wenn Sie erstklassige Scroll-Erlebnisse, benutzerdefinierte Cursor, Seitenübergänge, Textanimationen, Parallaxeneffekte, Mikrointeraktionen oder jede andere Animation erstellen, die 60 fps haben und preiswürdig sein muss. Löst auf Anfragen nach sanftem Scrollen, ScrollTrigger, magnetischen Effekten, Animationen offenbaren, horizontalem Scrollen, Pin-Abschnitten, Staffelungseffekten, useScroll, useTransform, Integration mit Three.js/WebGL, algorithmischer Kunst, mathematischer Kunst, generativer Kunst, Fraktalen, L-Systemen, Strömungsfeldern, seltsamen Attraktoren, heiliger Geometrie, geometrischen Rätseln, Dudeney-Dissektionen, Tangram, Tessellationen, Penrose-Kacheln, kinetischer Typografie, Glitch-Effekten, Textexplosion, Morphing aus Text, kreisförmiger Text, brutalistisches Design, minimalistische Animation, Neobrutalismus oder Mischung von Designphilosophien. React-First-Ansatz mit ordnungsgemäßer Bereinigung und 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 |
Fakten (zitierbereit)
Stabile Felder und Befehle für KI/Such-Zitate.
- Installationsbefehl
npx skills add https://github.com/devmartinese/awwwards-animations-skill --skill awwwards-animations- Kategorie
- </>Entwicklung
- Verifiziert
- ✓
- Erstes Auftreten
- 2026-02-11
- Aktualisiert
- 2026-02-18
Schnelle Antworten
Was ist awwwards-animations?
Professionelle React-Animationsfähigkeiten zum Erstellen von Animationen auf Awwwards/FWA-Ebene mit GSAP (useGSAP), Motion (Framer Motion), Anime.js und Lenis. Verwenden Sie es, wenn Sie erstklassige Scroll-Erlebnisse, benutzerdefinierte Cursor, Seitenübergänge, Textanimationen, Parallaxeneffekte, Mikrointeraktionen oder jede andere Animation erstellen, die 60 fps haben und preiswürdig sein muss. Löst auf Anfragen nach sanftem Scrollen, ScrollTrigger, magnetischen Effekten, Animationen offenbaren, horizontalem Scrollen, Pin-Abschnitten, Staffelungseffekten, useScroll, useTransform, Integration mit Three.js/WebGL, algorithmischer Kunst, mathematischer Kunst, generativer Kunst, Fraktalen, L-Systemen, Strömungsfeldern, seltsamen Attraktoren, heiliger Geometrie, geometrischen Rätseln, Dudeney-Dissektionen, Tangram, Tessellationen, Penrose-Kacheln, kinetischer Typografie, Glitch-Effekten, Textexplosion, Morphing aus Text, kreisförmiger Text, brutalistisches Design, minimalistische Animation, Neobrutalismus oder Mischung von Designphilosophien. React-First-Ansatz mit ordnungsgemäßer Bereinigung und Hooks. Quelle: devmartinese/awwwards-animations-skill.
Wie installiere ich awwwards-animations?
Öffnen Sie Ihr Terminal oder Kommandozeilen-Tool (Terminal, iTerm, Windows Terminal, etc.) Kopieren Sie diesen Befehl und führen Sie ihn aus: npx skills add https://github.com/devmartinese/awwwards-animations-skill --skill awwwards-animations Nach der Installation wird der Skill automatisch in Ihrer KI-Programmierumgebung konfiguriert und ist bereit zur Verwendung in Claude Code oder Cursor
Wo ist das Quell-Repository?
https://github.com/devmartinese/awwwards-animations-skill
Details
- Kategorie
- </>Entwicklung
- Quelle
- skills.sh
- Erstes Auftreten
- 2026-02-11