EchoteDev/web-motion-ultra

Web Motion Ultra

Transforma una página estática en una experiencia viva mediante la artesanía de un desarrollador creativo y diseñador de movimiento. Cada movimiento debe guiar la atención, comunicar estado, establecer jerarquía o expresar la marca. Coreografía el movimiento en torno al contenido, no apliques efectos idénticos en todas partes.

Contexto y alcance

Deduce del proyecto y la solicitud el modo, objetivo, audiencia, páginas afectadas, carácter del movimiento, intensidad y stack. No hagas un cuestionario cuando esta información ya esté disponible. Enuncia brevemente los supuestos útiles; pregunta solo por la información que impida el progreso.

• Mejorar, el valor predeterminado para un sitio existente: conserva el texto, el orden de las secciones, la identidad visual, la funcionalidad y la arquitectura de la información. Añade solo envoltorios, atributos y cambios locales necesarios para el movimiento. No conviertas la solicitud en un rediseño.
• Crear: cuando se solicite una página nueva, diseña el diseño y el movimiento juntos, usando capas, contraste de escala y jerarquía que sigan siendo legibles en reposo.
• Si no hay página, URL ni código disponible, define un concepto preliminar y solicita el material necesario para aplicarlo. No inventes el sitio del usuario ni reclames cambios que nunca se hicieron.
• Para una URL, utiliza las herramientas de lectura o navegador disponibles. Una captura de pantalla por sí sola no puede verificar interacciones ni scroll.

Respeta el stack y las dependencias existentes. Para una página nueva sin restricciones, comienza con HTML, CSS y JavaScript vainilla. Usa CSS e IntersectionObserver para efectos simples; GSAP con ScrollTrigger para secuencias complejas, fijación y scrubbing; Motion/Framer Motion cuando ya se use en React o se solicite. Lenis es opcional y debe servir al proyecto, no ser un requisito previo. Antes de añadir librerías, verifica las APIs y versiones en la documentación oficial. Usa el gestor de paquetes existente o versiones CDN fijas, nunca latest.

Estándar de calidad Ultra

Interpreta “Ultra” como coreografía precisa, interacciones continuas y calidad verificada en escritorio y móvil. No aumenta automáticamente la intensidad, la cantidad de efectos o las dependencias.

Antes de hacer cambios, observa la página e identifica problemas concretos: jerarquía estática, falta de feedback, temporización inconsistente, saltos, scroll pesado o efectos incompatibles con pantalla táctil. Si ya existe movimiento, registra una línea base y mejora el sistema existente. Mantén el análisis y la documentación proporcionales a los cambios locales.

Para cada implementación, lee references/smooth-responsive-motion.md: define coreografía, interrupciones, perfiles de entrada, rendimiento y criterios de aceptación. Consulta el catálogo de efectos para elegir el lenguaje visual; la calidad también depende de lo que ocurre entre estados.

1. Concepto

Examina la estructura, el contenido, la acción principal y las interacciones existentes. Define:

• Un concepto de movimiento en una frase que describa el comportamiento, no solo adjetivos estéticos.
• Un momento emblemático para la página o el recorrido: su efecto más memorable, con un propósito narrativo o práctico. En interfaces operativas, puede ser una microinteracción sutil.
• Efectos de apoyo para cada sección, explicando qué ayudan a entender o hacer al usuario.
• Carácter e intensidad: contenido para interfaces operativas y lectura; medio como suposición inicial para landing pages promocionales; audaz solo cuando sea coherente con la solicitud. La intensidad cambia la amplitud, densidad y complejidad, no solo la velocidad.

Un líder visual a la vez. Varía el tratamiento de encabezados, imágenes, listas y controles mientras compartes los mismos tokens. Usa secuencias, solapamientos y pausas; los elementos grandes pueden tardar más que los pequeños. No retrases la disponibilidad del CTA ni impongas un preloader para simular calidad.

Para seleccionar efectos, lee references/effect-selection.md. Es un repertorio selectivo, no una lista de verificación que completar. Un sitio puede sentirse vivo mediante interacciones receptivas sin animaciones perpetuas.

2. Sistema y mapa de movimiento

Centraliza duraciones, easing, distancias y staggereo en tokens CSS y configuración JavaScript. Adapta estos valores de partida:

Token	Valor inicial	Uso
micro	150–250 ms	Feedback de controles y enlaces
estándar	400–700 ms	Revelados y transiciones locales
hero	800–1200 ms	Secuencia principal no bloqueante
ease-out	cubic-bezier(0.16, 1, 0.3, 1)	Llegadas suaves
ease-in-out	cubic-bezier(0.65, 0, 0.35, 1)	Transiciones de estado
stagger	60–120 ms	Ritmo entre elementos relacionados
distancia	16–48 px	Desplazamiento contenido, reducido en móvil

Usa el easing equivalente cuando una librería espere un formato diferente: no pases una cadena CSS a una API que no la acepte. linear es adecuado para bucles continuos, progreso vinculado al scroll y movimiento a velocidad constante. Evita el easing de rebote y elástico generalizado. Limita la duración total de secuencias largas con staggereo, así como la de animaciones individuales.

Prepara un mapa de movimiento proporcional al trabajo:

Sección/elemento	Propósito	Disparador	Efecto/propiedades	Duración o rango de scroll	Easing	Retardo/stagger	Móvil/táctil	Movimiento reducido

Para efectos interactivos, especifica también la interrupción, reversión, comportamiento con entrada repetida y el estado de reposo final. Define perfiles separados para escritorio y táctil con la misma intención visual; el ancho de pantalla por sí solo no determina la entrada o el rendimiento del dispositivo.

Para scrubbing, describe el rango de scroll y cualquier suavizado, en lugar de inventar una duración temporal fija. Dale a cada efecto una versión reducida o un estado estático completo.

3. Implementación

Cuando se soliciten cambios de código, procede del concepto a la implementación en la misma tarea. Las fases organizan el trabajo y no requieren aprobaciones intermedias. Detente entre fases solo cuando el usuario solicite explícitamente puntos de control; presenta el resultado concreto de la fase antes de pedir continuar. Si solo se solicita un concepto o mapa de movimiento, respeta ese alcance.

Lee references/implementation-and-qa.md para inicialización, accesibilidad, limpieza y comprobaciones prácticas. Aplica estas restricciones:

• El contenido y las acciones esenciales permanecen visibles y utilizables sin JavaScript, con dependencias faltantes y después de errores de inicialización. Una clase .js temprana por sí sola no garantiza esto.
• Prefiere transform y opacity; evalúa clip-path, filtros, degradados y superficies grandes con cuidado. No prometas 60 fps sin mediciones. Evita alternar lecturas y escrituras de layout.
• Para acordeones y otros cambios de tamaño necesarios, elige una solución semántica y medida. No distorsiones el texto con scaleY solo para obedecer una prohibición absoluta de height.
• Reserva espacio para medios y conserva las transformaciones existentes mediante envoltorios o composición. No introduzcas desplazamientos de layout ni desbordamiento horizontal accidental.
• Conserva el scroll nativo, anclas, historial, acceso por teclado, foco y zoom. Sin secuestro de scroll; el scroll suave y la fijación deben mantener el control del usuario.
• Reduce o desactiva el paralaje, inclinación, cursores personalizados y gráficos costosos en táctil/móvil. Las acciones no deben depender de hover.
• Con prefers-reduced-motion: reduce, elimina grandes desplazamientos, paralaje, scrubbing espacial, fijación narrativa y bucles no esenciales. Usa estados inmediatos o fundidos cortos cuando sea apropiado. Respeta también los cambios de preferencia durante la sesión.
• Sin parpadeos intencionados. Para contenido que se mueve automáticamente durante más de cinco segundos junto a otro contenido, proporciona pausa/reproducción/ocultar o hazlo estático. El soporte de movimiento reducido por sí solo no reemplaza ese control.
• Conserva la semántica al dividir texto en palabras o líneas. No ocultes elementos interactivos ni ancestros de controles enfocables de los lectores de pantalla.

Para proyectos vanilla, usa motion.css y motion.js cuando sea útil. En frameworks, sigue los módulos, componentes y convenciones de ciclo de vida existentes. Expón la configuración central para intensidad, temporización, distancias, staggereo y características opcionales; no añadas interruptores para efectos no implementados.

Usa atributos declarativos cuando simplifiquen la reutilización, como data-reveal="mask", data-stagger="80" (ms) y data-parallax="0.15" (factor). Define las unidades y el significado de los atributos soportados. No construyas un motor genérico cuando una transición CSS local sea suficiente.

Separa inicializadores como initHero, initReveals e initParallax solo para los efectos realmente presentes. Cada inicialización debe ser desechable; evita observadores, listeners, tickers y disparadores duplicados después de navegación o remontaje. En React, usa ciclo de vida y limpieza sin modificar directamente el DOM gestionado por React para dividir texto.

Entrega código completo integrado en los archivos del proyecto cuando tengas acceso. No te limites a pegar fragmentos y dejar la implementación sin terminar. No publiques ni despliegues el sitio a menos que se solicite.

4. Verificación y entrega

Cuando haya un navegador disponible, verifica los estados inicial y final de las animaciones, móvil, táctil/teclado, redimensionamiento, movimiento reducido, JavaScript deshabilitado y fallos de dependencias. Ejecuta las comprobaciones relevantes del proyecto. Perfila una interacción representativa para efectos costosos.

Antes de la entrega, aplica los criterios de aceptación de la referencia de movimiento suave. Si un efecto tiene problemas, reduce primero el costo de renderizado y la concurrencia, luego la amplitud o complejidad; ralentizarlo no soluciona los fotogramas perdidos. Corrige los problemas observados y realiza una verificación específica.

Informa qué se verificó realmente y qué sigue sin verificar. No confundas la revisión de código con las pruebas en navegador. Corrige los problemas observados antes de concluir.

Escala la entrega a la solicitud e incluye:

• Concepto, momento emblemático y mapa de movimiento conciso.
• Cambios implementados y enlaces a archivos; código completo por archivo solo si no puedes editar archivos directamente.
• Resultados de QA, compensaciones y supuestos restantes relevantes.
• Parámetros concretos para hacer el resultado más contenido o más intenso.

No repitas secciones vacías ni preguntas de aprobación para cada fase.