Communitygithub.com

devmartinese/awwwards-animations

Professionelle React-Animationen für Awwwards/FWA-Niveau mit GSAP (useGSAP), Motion (Framer Motion), Anime.js und Lenis. Für erstklassige Scroll-Erlebnisse, benutzerdefinierte Cursor, Seitenübergänge, Textanimationen und Parallax-Effekte.

Was ist awwwards-animations?

Diese Fertigkeit ermöglicht es KI-Agenten (wie Claude Code, Cursor oder Codex), hochwertige, preiswürdige Animationen auf Awwwards/FWA-Niveau in React-Projekten zu erstellen. Sie unterstützt führende Animationsbibliotheken wie GSAP (inklusive useGSAP), Framer Motion, Anime.js und Lenis für Smooth Scrolling. Zu den Kernfunktionen gehören Scroll-basierte Effekte (ScrollTrigger, useScroll, useTransform), magnetische Interaktionen, Textanimationen (kinetische Typografie, Glitch, Explosion, Verformung, Kreistext), Seitenübergänge, Parallax-Effekte, horizontales Scrollen, Pinning-Sektionen und Stagger-Effekte. Die Fertigkeit ist besonders nützlich bei Anfragen zu algorithmischer Kunst, generativer Kunst, Fraktalen, L-Systemen, Strömungsfeldern, seltsamen Attraktoren, heiliger Geometrie und geometrischen Rätseln (Dudeney-Zerlegungen, Tangram, Penrose-Fliesen). Sie integriert sich nahtlos mit Three.js/WebGL für 3D-Visualisierungen und folgt einem React-zentrierten Ansatz mit ordnungsgemäßer Bereinigung (Cleanup) und Hooks, um optimale Performance mit 60 fps zu gewährleisten.

Funktioniert mit~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/devmartinese/awwwards-animations-skill/tree/main/skills/awwwards-animations

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Was macht awwwards-animations?

Professionelle React-Animationen für Awwwards/FWA-Niveau mit GSAP (useGSAP), Motion (Framer Motion), Anime.js und Lenis. Verwenden Sie diese Fertigkeit, wenn Sie erstklassige Scroll-Erlebnisse, benutzerdefinierte Cursor, Seitenübergänge, Textanimationen, Parallax-Effekte, Mikrointeraktionen oder jede Animation erstellen, die 60fps und preiswürdig sein muss. Sie wird ausgelöst bei Anfragen zu Smooth Scroll, ScrollTrigger, magnetischen Effekten, Reveal-Animationen, horizontalem Scrollen, Pinning-Sektionen, Stagger-Effekten, 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-Zerlegungen, Tangram, Tessellationen, Penrose-Fliesen, kinetischer Typografie, Glitch-Effekten, Textexplosion, verformtem Text, Kreistext, brutalistischem Design, minimalistischer Animation, Neo-Brutalismus oder Designphilosophie-Mischungen. React-zentrierter Ansatz mit ordnungsgemäßer Bereinigung und Hooks.

Verwandte Skills