# Estándar de animación · Motion Atlas Versión 1.0.0 · Guía de requisitos, no certificado de validación. Cada recurso debe tener un comportamiento definido, una versión móvil y una integración que pueda limpiarse. Este estándar acompaña efectos y composiciones. Antes de entregar, completa los criterios de animation-contract.json con evidencia del proyecto real. ## 01. Intención y contexto Describe qué ayuda a entender o hacer, dónde aparece y qué debe atraer primero la atención. Define si es una interacción independiente o parte de una composición. Las referencias inspiran; no autorizan copiar código ni recursos. ## 02. Disparador y estados Especifica evento o umbral de entrada, estado inicial, activo y final, repetición, reversa e interrupción. Para scroll: contenedor, inicio y fin del tramo, dirección y comportamiento al volver. Evita bloquear el desplazamiento nativo. ## 03. Un ritmo definido Declara duración, delay, stagger, easing y distancias con sus unidades y límites. Distingue valores configurables de constantes internas. En una página comparte un preset: jerarquía, entradas, pausas de lectura y cierre; revisa las transiciones entre secciones. ## 04. HTML, estilos y contenido Incluye marcado semántico, selectores y estructura necesarios, estilos acotados a la raíz, estados de foco y assets con dimensiones. Conserva textos legibles y enlaces reales. Documenta qué puede personalizarse sin romper el efecto. ## 05. Una versión móvil intencional Define la adaptación por breakpoint y orientación: reduce distancias, evita hover como único acceso y convierte escenas fijas complejas en flujo vertical. Controles de al menos 44 × 44 CSS px como objetivo de este catálogo; prueba toque, zoom al 200 %, áreas seguras y texto largo. ## 06. Accesibilidad y movimiento reducido Define explícitamente la alternativa con prefers-reduced-motion: contenido estático visible o cambio inmediato de estado. Mantén navegación por teclado, foco visible, nombres accesibles y lectura sin duplicados. Añade pausa a bucles persistentes. No comuniques información solo mediante movimiento. ## 07. Sin JavaScript y con fallos La información esencial debe seguir disponible sin JavaScript. Documenta qué interacciones requieren JS y su alternativa. Comprueba APIs necesarias antes de usarlas; si fallan, muestra el estado final legible. No dejes contenido permanentemente transparente. ## 08. Rendimiento con evidencia Prioriza transform y opacity; mide máscaras, filtros y cambios de altura. Agrupa lecturas y escrituras del DOM, limita trabajo por frame y detén bucles fuera de vista. Carga recursos pesados bajo demanda. Define un presupuesto de peso/fluidez por proyecto y registra mediciones, dispositivo y navegador; no inventes resultados. ## 09. Montaje, limpieza e integración Expón mount(root, options) y destroy(), o equivalentes documentados. Limpia listeners, observers, timers, requestAnimationFrame y animaciones; restaura estilos/DOM modificados. Declara comportamiento ante remontaje. Inicializa en cliente y verifica SSR/hidratación, navegación de Astro y contenido dinámico de WordPress. ## 10. Motor y dependencias justificadas Declara el motor real y por qué se necesita. Si añade paquetes, registra nombre exacto, versión comprobada, plugins, importaciones, licencia y fecha de revisión; fija la versión en el lockfile del cliente. Evita dos motores escribiendo la misma propiedad. Una opción de la guía no es una dependencia del recurso. ## 11. Un paquete que otra IA entienda Entrega fuente, CSS, tipos, demo reproducible, adaptadores, manifest.json, instrucciones, licencia y este contrato. Documenta restricciones y compatibilidad comprobada. Incluye el código en la copia para IA; no dependas de que pueda abrir un catálogo privado. ## 12. Pruebas antes de entregar Revisa 320, 375, 390, 768 y 1440 px, retrato/paisaje, teclado, toque, movimiento reducido, sin JS, resize, scroll rápido y vuelta atrás. Comprueba rutas, montaje/desmontaje repetido y el framework real. En composiciones recorre la página completa. Registra resultado y evidencia; distingue pendiente, aprobado y no aplicable con motivo. ## Qué motor elegir 36 efectos y 6 composiciones usan el motor nativo. Los ejemplos GSAP y Three.js incluyen dependencias reales y versiones fijadas. Consulta cada manifiesto. Comprueba documentación y licencia de la versión que adoptes; no uses “latest” como contrato de compatibilidad. ### CSS + APIs del navegador Entradas, estados, máscaras sencillas e interacciones. Motor de los 36 efectos nativos y 6 composiciones originales. Paquete: Ninguno. Ámbito: Next · Astro · WordPress · HTML. CSS, Web Animations API e IntersectionObserver según el recurso. Consulta el motor declarado en cada paquete. [Documentación oficial](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) ### GSAP + ScrollTrigger Cuando una secuencia necesita una timeline compleja, sincronización con scroll, pinning o scrub. Paquete: gsap / plugin ScrollTrigger. Ámbito: Next · Astro · WordPress · HTML. El archivo incluye tres demos GSAP y una composición GSAP/Three. Declara inicio/fin de cada tramo, desmontaje y alternativa móvil. Úsalo cuando la complejidad lo justifique. [Documentación oficial](https://gsap.com/docs/v3/Plugins/ScrollTrigger/) ### Motion para React Cuando la interfaz React necesita animar cambios de layout o transiciones entre elementos compartidos. Paquete: motion / importación motion/react. Ámbito: Next / React · isla React en Astro. Esta opción usa React. Para WordPress sin React, conserva el motor nativo o una solución independiente del framework. [Documentación oficial](https://motion.dev/docs/react-layout-animations) ### Three.js Para una escena 3D real: geometría, cámara y materiales. Una inclinación CSS de tarjeta no lo necesita. Paquete: three. Ámbito: Cliente · carga bajo demanda. El archivo incluye tres demos WebGL y una composición GSAP/Three. Define alternativa estática y presupuesto de recursos. Libera geometrías, materiales, texturas y renderer al desmontar. [Documentación oficial](https://threejs.org/) ### dotLottie Para reproducir una animación vectorial preparada como asset Lottie o .lottie. Paquete: @lottiefiles/dotlottie-web. Ámbito: Next · Astro · WordPress · HTML. Incluye reproductor, archivo y derechos del asset. Define pausa, movimiento reducido y alternativa estática. [Documentación oficial](https://github.com/LottieFiles/dotlottie-web) ## Instrucción para la IA que lo integra Lee README.md, manifest.json y animation-contract.json antes de cambiar el código. Conserva las dependencias declaradas. Los criterios del contrato son requisitos pendientes de comprobar en el proyecto destino, no capacidades certificadas. Completa evidence y status para cada criterio; si algo no aplica, explica el motivo. No conviertas todos los pendientes en aprobados sin ejecutar las pruebas. Si cambias el motor, actualiza el manifiesto, el contrato y los adaptadores. En una composición conserva el orden narrativo y ajusta el preset completo.