awwwards-animations
✓Habilidad de animación profesional de React para crear animaciones de nivel Awwwards/FWA usando GSAP (useGSAP), Motion (Framer Motion), Anime.js y Lenis. Úselo al crear experiencias de desplazamiento premium, cursores personalizados, transiciones de página, animaciones de texto, efectos de paralaje, microinteracciones o cualquier animación que deba ser de 60 fps y digna de un premio. Activa solicitudes de desplazamiento suave, ScrollTrigger, efectos magnéticos, animaciones de revelación, desplazamiento horizontal, secciones de pines, efectos de escalonamiento, 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, rompecabezas geométricos, disecciones de Dudeney, tangram, teselaciones, mosaicos de Penrose, tipografía cinética, efectos de falla, explosión de texto, texto transformado, texto circular, diseño brutalista, animación minimalista, neobrutalismo o mezcla de filosofías de diseño. Enfoque de reacción primero con limpieza y ganchos adecuados.
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 |
Datos (listos para citar)
Campos y comandos estables para citas de IA/búsqueda.
- Comando de instalación
npx skills add https://github.com/devmartinese/awwwards-animations-skill --skill awwwards-animations- Categoría
- </>Desarrollo
- Verificado
- ✓
- Primera vez visto
- 2026-02-11
- Actualizado
- 2026-02-18
Respuestas rápidas
¿Qué es awwwards-animations?
Habilidad de animación profesional de React para crear animaciones de nivel Awwwards/FWA usando GSAP (useGSAP), Motion (Framer Motion), Anime.js y Lenis. Úselo al crear experiencias de desplazamiento premium, cursores personalizados, transiciones de página, animaciones de texto, efectos de paralaje, microinteracciones o cualquier animación que deba ser de 60 fps y digna de un premio. Activa solicitudes de desplazamiento suave, ScrollTrigger, efectos magnéticos, animaciones de revelación, desplazamiento horizontal, secciones de pines, efectos de escalonamiento, 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, rompecabezas geométricos, disecciones de Dudeney, tangram, teselaciones, mosaicos de Penrose, tipografía cinética, efectos de falla, explosión de texto, texto transformado, texto circular, diseño brutalista, animación minimalista, neobrutalismo o mezcla de filosofías de diseño. Enfoque de reacción primero con limpieza y ganchos adecuados. Fuente: devmartinese/awwwards-animations-skill.
¿Cómo instalo awwwards-animations?
Abre tu terminal o herramienta de línea de comandos (Terminal, iTerm, Windows Terminal, etc.) Copia y ejecuta este comando: npx skills add https://github.com/devmartinese/awwwards-animations-skill --skill awwwards-animations Una vez instalado, el skill se configurará automáticamente en tu entorno de programación con IA y estará listo para usar en Claude Code o Cursor
¿Dónde está el repositorio de origen?
https://github.com/devmartinese/awwwards-animations-skill
Detalles
- Categoría
- </>Desarrollo
- Fuente
- skills.sh
- Primera vez visto
- 2026-02-11