Una animación necesita intención, un comportamiento claro y una buena versión móvil. Este es el contrato para llevarla a cualquier proyecto.
Aplica estos criterios a cada efecto y al recorrido completo. Cada paquete incluye una copia y una lista de verificación para el proyecto destino.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Un requisito no equivale a una prueba aprobada. Registra las comprobaciones del cliente en animation-contract.json, con su resultado y evidencia.
Empieza con lo que el recurso declara. Añade una librería cuando resuelva una necesidad concreta.
NingunoEntradas, estados, máscaras sencillas e interacciones. Motor de los 36 efectos nativos y 6 composiciones originales.
CSS, Web Animations API e IntersectionObserver según el recurso. Consulta el motor declarado en cada paquete.
Next · Astro · WordPress · HTMLDocumentación oficialgsap / plugin ScrollTriggerCuando una secuencia necesita una timeline compleja, sincronización con scroll, pinning o scrub.
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.
Next · Astro · WordPress · HTMLDocumentación oficialmotion / importación motion/reactCuando la interfaz React necesita animar cambios de layout o transiciones entre elementos compartidos.
Esta opción usa React. Para WordPress sin React, conserva el motor nativo o una solución independiente del framework.
Next / React · isla React en AstroDocumentación oficialthreePara una escena 3D real: geometría, cámara y materiales. Una inclinación CSS de tarjeta no lo necesita.
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.
Cliente · carga bajo demandaDocumentación oficial@lottiefiles/dotlottie-webPara reproducir una animación vectorial preparada como asset Lottie o .lottie.
Incluye reproductor, archivo y derechos del asset. Define pausa, movimiento reducido y alternativa estática.
Next · Astro · WordPress · HTMLDocumentación oficialEstas opciones no se instalan automáticamente. Verifica la versión, licencia y compatibilidad al adoptarlas. Mantén un solo motor por propiedad animada.
«Copiar para IA» y cada ZIP incluyen la guía, el motor declarado y los criterios de validación. La IA debe conservarlos al adaptar el código a Next, Astro, WordPress o HTML.
Elegir un recurso