¿Qué librería usa para cada cosa?

GSAP con ScrollTrigger para scroll y líneas de tiempo, Motion para montaje y desmontaje de componentes, Lenis para el scroll suave y Anime.js para animaciones ligeras del DOM.

¿Respeta a quien desactiva las animaciones?

Sí. Incluye patrones para respetar prefers-reduced-motion y pide no esconder contenido esencial tras revelados que dependan solo de la animación.

¿Sirve si no uso React?

Está escrita para React, con ejemplos como useGSAP y ReactLenis. Fuera de React tendrías que adaptar los patrones por tu cuenta.

Hecha aquíActualizada el 28 mar 2026

Animaciones React nivel Awwwards

/web--awwwards-animations

/web--awwwards-animations es una skill de Claude Code de la sección Web y Diseño. Elige la herramienta adecuada (GSAP, Motion, Anime.js o Lenis) y crea animaciones React fluidas y accesibles: scroll, efectos magnéticos y revelados.

Descripción del autor (traducida)

Animaciones de React a nivel Awwwards: GSAP, Motion, Anime.js, scroll suave con Lenis, ScrollTrigger, efectos magnéticos

Úsala cuando

Quieres animaciones de scroll o secuencias complejas en React
Necesitas decidir entre GSAP, Motion, Anime.js y Lenis
Buscas efectos como cursor magnético, revelado de texto o imágenes

No es para

Proyectos que no usan React
Sustituir una revisión de accesibilidad completa de tu web

Qué obtienes

Código React con las animaciones implementadas, siguiendo las reglas de rendimiento y movimiento reducido de la skill.

Cómo pedírselo

/web--awwwards-animations añade scroll suave estilo Awwwards a mi web con Lenis
/web--awwwards-animations crea un botón con efecto magnético
/web--awwwards-animations anima las secciones al hacer scroll con GSAP ScrollTrigger

Instalar

curl -fsSL https://raw.githubusercontent.com/sgomez-dev/claude-skills/main/install.sh | bash

Tras instalar con el script, escribe /web--awwwards-animations. ¿Usas Cursor, Windsurf o Codex? Guías por plataforma

Preguntas sobre esta skill

¿Qué librería usa para cada cosa?: GSAP con ScrollTrigger para scroll y líneas de tiempo, Motion para montaje y desmontaje de componentes, Lenis para el scroll suave y Anime.js para animaciones ligeras del DOM.
¿Respeta a quien desactiva las animaciones?: Sí. Incluye patrones para respetar prefers-reduced-motion y pide no esconder contenido esencial tras revelados que dependan solo de la animación.
¿Sirve si no uso React?: Está escrita para React, con ejemplos como useGSAP y ReactLenis. Fuera de React tendrías que adaptar los patrones por tu cuenta.

Demo en camino