← Volver al catálogo
WebReferenciaIntermedioEn el pase

Patrones de Animación UI para React

Patrones de animación listos para producción en React/Next.js: botones, modales, toasts, stagger de listas, transiciones de página, animaciones de salida, scroll y layout, construidos sobre los tokens y springs de motion-foundations. Para desarrolladores que quieren copiar-pegar animaciones accesibles y seguras en SSR para los componentes de UI más comunes.

Comprobando acceso…

Incluida en el Pase · para Claude Code, Cursor, Codex CLI

// resultado_de_ejemplo
Abrir en una pestaña nueva ↗

// qué_hace

Aporta patrones copiar-pegar de animación para los componentes de UI más comunes en React/Next.js.

// cómo_lo_hace

Construye cada patrón sobre los tokens y springs de motion-foundations (sin números crudos), envuelve los renders condicionales en AnimatePresence con key, define siempre exit junto a initial/animate y cubre transiciones de página, scroll-reveal y animaciones de layout.

// ejemplo_de_uso

Úsala cuando necesitas animar componentes de React o Next sin reinventar la rueda en cada uno. Ej.: copias el patrón de scroll-reveal y el de transición de página apoyados en tus tokens, y al desmontar un modal el exit ya está definido y no se queda colgado en pantalla.

// plataformas

Claude CodeCursorCodex CLI
Categoría
Web
Tipo
Referencia
Nivel
Intermedio
Licencia
MIT
Seguridad
seguro · riesgo bajo
Versión
1.0.0

// opiniones_de_la_comunidad

Opiniones

Cargando opiniones…