Communitygithub.com

devmartinese/awwwards-animations

Habilidad profesional de animación React para crear animaciones de nivel Awwwards/FWA usando GSAP (useGSAP), Motion (Framer Motion), Anime.js y Lenis. Úsala al construir experiencias de scroll premium, cursores personalizados, transiciones de página, animaciones de texto, efectos de paralaje, micro-interacciones o cualquier animación que deba ser de 60fps y digna de premios. Se activa ante solicitudes de scroll suave, ScrollTrigger, efectos magnéticos, animaciones de revelación, scroll horizontal, secciones fijadas, efectos escalonados, useScroll, useTransform, integración con Three.js/WebGL, arte algorítmico, arte matemático, arte generativo, fractales, sistemas L, campos de flujo, atractores extraños, geometría sagrada, puzzles geométricos, disecciones de Dudeney, tangram, teselaciones, baldosas Penrose, tipografía cinética, efectos glitch, explosión de texto, texto morfante, texto circular, diseño brutalista, animación minimalista, neobrutalismo o mezcla de filosofías de diseño. Enfoque primero en React con limpieza y hooks adecuados.

¿Qué es awwwards-animations?

Esta habilidad especializada para agentes de IA (como Claude Code, Cursor, Codex) proporciona capacidades profesionales de animación React para crear experiencias de interfaz de usuario de nivel galardonado (Awwwards/FWA). Está diseñada para desarrolladores que necesitan implementar animaciones complejas y de alto rendimiento (60fps) como scroll suave, efectos de paralaje, cursores personalizados, transiciones de página, animaciones de texto, efectos magnéticos, y más. La habilidad integra de manera nativa las bibliotecas GSAP (useGSAP), Motion (Framer Motion), Anime.js y Lenis, siguiendo un enfoque "primero React" que garantiza una correcta limpieza de efectos y uso de hooks. Además, se especializa en temas avanzados como arte algorítmico, generativo, fractales, geometría sagrada, tipografía cinética, efectos glitch y diseños brutalistas o neobrutalistas. Funciona en plataformas que soportan la definición de habilidades en markdown, como Claude Code, Cursor y Codex, y se activa automáticamente cuando el usuario solicita técnicas de animación específicas o conceptos de diseño visual avanzados.

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

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

¿Qué hace awwwards-animations?

Habilidad profesional de animación React para crear animaciones de nivel Awwwards/FWA usando GSAP (useGSAP), Motion (Framer Motion), Anime.js y Lenis. Úsala al construir experiencias de scroll premium, cursores personalizados, transiciones de página, animaciones de texto, efectos de paralaje, micro-interacciones o cualquier animación que deba ser de 60fps y digna de premios. Se activa ante solicitudes de scroll suave, ScrollTrigger, efectos magnéticos, animaciones de revelación, scroll horizontal, secciones fijadas, efectos escalonados, useScroll, useTransform, integración con Three.js/WebGL, arte algorítmico, arte matemático, arte generativo, fractales, sistemas L, campos de flujo, atractores extraños, geometría sagrada, puzzles geométricos, disecciones de Dudeney, tangram, teselaciones, baldosas Penrose, tipografía cinética, efectos glitch, explosión de texto, texto morfante, texto circular, diseño brutalista, animación minimalista, neobrutalismo o mezcla de filosofías de diseño. Enfoque primero en React con limpieza y hooks adecuados.

Skills relacionados