vmitsaras/apply-kinetic-continuity-motion

Aplicar Movimiento de Continuidad Cinética

Propósito

Aplicar un lenguaje de movimiento contenido que le da memoria física al diseño: los elementos siguen siendo identificables, responden a la energía del usuario y se asientan donde se pueda tomar la siguiente decisión.

Trata los videos de referencia suministrados como evidencia de un lenguaje de diseño, no como plantillas para reproducir. Preserva el concepto, la tecnología, el alcance y el límite de autorización solicitados por el usuario. Aplica cambios en archivos solo cuando el usuario solicite implementación; para solicitudes de planificación o revisión, devuelve orientación sin editar archivos.

Cuándo usar este skill

Usa este skill cuando:

• Una demo de GSAP o interfaz web necesite continuidad entre estados espaciales o de diseño.
• La tarea involucre un campo de imágenes, galería, carrusel, hoja de contactos, vista previa anclada, secuencia basada en trayectorias, grupo enrutado o tipografía cinética contenida.
• El movimiento existente se sienta desconectado, anticuado bajo entrada rápida, excesivamente decorativo o poco claro sobre la identidad del objeto.
• El usuario quiera traducir referencias de movimiento suministradas en un lenguaje de interacción original, accesible e implementable.

No uses este skill cuando:

• Un simple hover, foco, presión o cambio de opacidad pueda manejarse con una transición CSS ordinaria.
• La solicitud sea una tarea de animación no relacionada sin problema de continuidad o estado espacial.
• La tarea se refiera a cine, edición de video o animación de personajes en lugar de comportamiento de interfaz.
• El usuario necesite una auditoría de accesibilidad integral en lugar de planificación, implementación o revisión específica de movimiento.

Entradas a inspeccionar

Inspecciona el conjunto relevante más pequeño de entradas disponibles:

• La tarea, el disparador, el sujeto, el estado inicial y el estado final solicitados por el usuario.
• Componentes, plantillas, estilos, utilidades de movimiento, pruebas, demos y documentación relevantes.
• Dependencias de animación existentes, especialmente plugins de GSAP ya en uso.
• Videos, prototipos, capturas de pantalla, guiones gráficos o notas de análisis de movimiento proporcionados por el usuario.
• Comportamiento responsivo, comportamiento de puntero y táctil, rutas de teclado, comportamiento de foco y requisitos de movimiento reducido.
• Restricciones de rendimiento como elementos repetidos, peso de imágenes, medición de geometría y entrada de alta frecuencia.

No supongas que existen medios de referencia, plugins de GSAP o convenciones del proyecto cuando no están presentes.

Enrutamiento de referencia

Lee references/pattern-catalog.md al seleccionar un primitivo de movimiento, ajustar el tiempo y la suavización, definir el comportamiento de movimiento reducido o revisar la naturalidad.

El catálogo es autónomo. Si una tarea requiere procedencia por video o comparación con un clip nombrado, inspecciona los medios de referencia o el documento de análisis de movimiento suministrados en el espacio de trabajo de esa tarea en lugar de asumir detalles de este skill.

Contrato central de movimiento

• Preserva la identidad del objeto a través de cambios de posición, escala y diseño.
• Dale a cada latido de movimiento una dirección dominante.
• Haz que los elementos vecinos respondan como un solo campo espacial, con velocidad relacionada y escalonamiento basado en distancia.
• Responde a la entrada directa en el siguiente frame pintado. Aplica suavización al asentamiento, no al punto de agarre.
• Acelera brevemente y gasta más de la duración desacelerando.
• Superpón los estados saliente y entrante lo suficiente para evitar un frame muerto.
• Usa la escala de manera consistente para comunicar foco, profundidad o prioridad.
• Resuelve los pasajes activos en estados de reposo estables y legibles.
• Mantén la distorsión expresiva breve, local, reversible y no esencial.

Prefiere la continuidad sobre el espectáculo. Elimina el movimiento que no explique estado, jerarquía, orientación o retroalimentación.

Selecciona un primitivo principal

Elige el primitivo que mejor explique el cambio de estado. No combines varios solo para aumentar la novedad visual.

• Campo inercial: una constelación que se puede desplazar o que deriva y se mueve como un solo sistema.
• Rieles paralelos: pistas de medios repetidas con variación de velocidad contenida.
• Grupos enrutados: clústeres que se mueven entre carriles o categorías visibles.
• Intercambio de vista previa anclada: un índice estable controla una región de vista previa delimitada.
• Procesión curva: las tarjetas derivan posición, escala y apilamiento de un solo valor de progreso de trayectoria.
• Cadena convergente: una visión general se dobla y escala hacia una composición enfocada.
• Resolución de hoja de contactos: los elementos retenidos tienden un puente entre diseños densos y curados.
• Disrupción de texto delimitada: el texto mostrado se desplaza brevemente y luego se reconstruye limpiamente.

Usa transiciones CSS ordinarias cuando la interacción solo necesite un simple hover, foco, presión o cambio de opacidad.

Flujo de trabajo

1. Confirma si la solicitud es de planificación, implementación o revisión, y preserva ese límite.
2. Identifica el disparador, el sujeto, el estado inicial, el estado final y la tarea del usuario.
3. Escribe una tesis de movimiento de una oración que explique por qué existe el movimiento.
4. Elige un primitivo principal y define sus composiciones inicial y final estables.
5. Define el estado de movimiento reducido antes de agregar la coreografía completa.
6. Establece la jerarquía micro, meso y macro. No todos los elementos necesitan movimiento en cada capa.
7. Implementa o especifica respuesta directa, viaje coordinado y un asentamiento silencioso.
8. Haz que la entrada rápida redirija el estado renderizado actual en lugar de encolar animaciones.
9. Verifica las rutas de puntero, táctil, teclado, foco, movimiento reducido, interrupción y fallo.
10. Revisa a velocidad normal y a velocidad de paso de frame o 0.25x para encontrar discontinuidades y errores de apilamiento.
11. Cuando se haya solicitado implementación, ejecuta las pruebas o verificaciones relevantes del repositorio e informa sobre la validación manual que quede.

Firma de temporización

Usa los tokens de referencia como puntos de partida, luego ajusta moderadamente según la distancia de viaje y la frecuencia de interacción:

• Reconocimiento inmediato: aproximadamente 90ms.
• Hover o foco: aproximadamente 180ms.
• Cambio de estado compacto: aproximadamente 320ms.
• Reconfiguración de diseño: aproximadamente 520ms.
• Escena espacial grande: aproximadamente 780ms, normalmente limitada a menos de 1000ms.
• Escalonamiento espacial: 35–60ms, ordenado por distancia desde la fuente de movimiento.

Prefiere power3.out para asentamiento estándar, power4.out para una entrada editorial más fuerte y power2.inOut para reconfiguración de estado conocido. Usa movimiento lineal solo cuando el progreso siga al desplazamiento, arrastre u otra entrada continua.

No hagas de la suavización elástica o de rebote la firma del sistema. Si un chasquido de liberación necesita sobrepaso, mantenlo por debajo de aproximadamente el 3%.

Invariantes de implementación

• Usa CSS para transiciones de estado simples y líneas de tiempo de GSAP para secuencias coordinadas.
• Usa GSAP Flip para cambios de diseño reales cuando la continuidad de elementos compartidos sea valiosa.
• Usa Draggable solo cuando el arrastre sea una interacción real y existan controles visibles equivalentes.
• Usa ScrollTrigger solo para una verdadera narrativa de desplazamiento; no introduzcas secuestro de desplazamiento.
• Deriva las propiedades de movimiento curvo de un valor de progreso normalizado para que x, y, escala, opacidad y apilamiento no se desvíen.
• Usa overwrite: "auto", quickTo() o una línea de tiempo impulsada por progreso para movimiento interrumpible.
• Anima transform y opacity primero.
• Agrupa las lecturas del DOM, almacena en caché la geometría y evita la medición dentro de actualizaciones de alta frecuencia.
• Aplica will-change solo durante el movimiento activo y elimínalo después de secuencias grandes únicas cuando sea práctico.
• Mantén el contenido final disponible si JavaScript falla. No requieras una línea de tiempo de entrada para revelar contenido esencial.

Sigue las convenciones existentes del repositorio en HTML, CSS, JavaScript, activos y documentación de demos. No agregues ni reemplaces una dependencia de animación sin autorización del usuario.

Invariantes de interacción y accesibilidad

• Empareja hover con foco y comportamiento de clic o toque.
• Mantén el estilo de foco visible y al menos tan claro como el hover.
• Preserva el orden semántico de origen cuando los elementos visuales se vuelvan espaciales.
• Mantén una fuente de texto legible intacta para tipografía dividida o interrumpida.
• Haz que el arrastre, el deslizamiento y la rueda sean métodos de entrada opcionales; proporciona controles anterior y siguiente u otra ruta de teclado.
• Cancela el momento cuando comience un nuevo gesto.
• Pausa el movimiento continuo durante una interacción significativa y cuando la página no esté visible.
• Para prefers-reduced-motion: reduce, elimina inercia, órbita, reproducción automática, viaje de zoom y disrupción de texto. Preserva el contenido y la selección con cambios instantáneos o una transición de opacidad corta.
• No reclames cumplimiento de accesibilidad sin pruebas.

Estándar de revisión

Señala el movimiento cuando:

• teletransporta o reemplaza objetos que deberían permanecer identificables;
• usa escalonamiento aleatorio sin una fuente espacial;
• encola estados de hover obsoletos;
• permanece en movimiento constante junto al contenido de lectura;
• hace que la escala sea decorativa en lugar de significativa;
• depende de arrastre, hover o animación para exponer contenido esencial;
• crea trabajo de diseño en cada frame de animación;
• transforma un propietario fijo en lugar de una capa de escena interna;
• es más largo o más elaborado de lo que justifica el cambio de estado.

Formato de salida

Devuelve el resultado apropiado para el modo:

Planificación

• Tesis de movimiento y primitivo seleccionado.
• Estados inicial, de transición y asentado.
• Jerarquía de movimiento, temporización, interrupción y comportamiento de movimiento reducido.
• Notas de accesibilidad, rendimiento, implementación y validación.

Implementación

• Resumen del comportamiento de movimiento aplicado.
• Archivos modificados y el rol de cada cambio.
• Primitivo seleccionado, jerarquía de movimiento, resultado de movimiento reducido, comportamiento de accesibilidad y estrategia de rendimiento.
• Pruebas o verificaciones ejecutadas y cualquier verificación manual que quede.

Revisión

Prioridad	Problema	Evidencia	Recomendación

También informa el primitivo inferido, la jerarquía de movimiento, el resultado de movimiento reducido, el comportamiento de accesibilidad, la estrategia de rendimiento y cualquier límite de evidencia.

Barra de calidad

La tarea está completa solo cuando:

• El primitivo elegido explica el cambio de estado más claramente de lo que lo haría una transición más simple.
• La identidad del objeto, la dirección, la respuesta, la interrupción, el asentamiento y el reposo son coherentes.
• Los estados de movimiento completo y movimiento reducido preservan el mismo contenido y resultado de la tarea.
• El comportamiento de puntero, táctil, teclado y foco tienen rutas utilizables equivalentes cuando corresponde.
• El movimiento de alta frecuencia evita la medición repetida del diseño y los estados encolados obsoletos.
• Los hallazgos de la revisión citan estados de interfaz, código o comportamiento observable concretos.
• El trabajo de implementación sigue las convenciones del proyecto e incluye validación proporcional.

Casos límite

• Si el proyecto no usa GSAP, preserva su stack existente a menos que el usuario solicite agregar GSAP; expresa los mismos principios con las API de plataforma disponibles o proporciona un plan.
• Si los medios de referencia no están disponibles, usa el catálogo de patrones incluido e indica que no se realizó ninguna comparación específica de clips.
• Si varios cambios de estado necesitan diferentes primitivos, elige un primitivo principal por cambio de estado y mantén consistentes la temporización compartida y las reglas físicas.
• Si la animación falla o JavaScript no está disponible, el contenido y los controles esenciales deben seguir siendo utilizables.
• Si un elemento fijo o propiedad del desplazamiento debe parecer que se transforma, anima una capa de escena interna en lugar del propietario fijo.
• Si un concepto entra en conflicto con los requisitos de movimiento reducido, teclado o acceso al contenido, preserva el resultado de la tarea y la relación de estado mientras simplificas la coreografía.

Skills relacionados

• motion-behavior-planner para un plan de movimiento neutral en cuanto a biblioteca sin implementación.
• motion-experience-director para un sistema de movimiento más amplio en todo el sitio.
• motion-animation-accessibility-audit para una auditoría integral de accesibilidad de movimiento.
• creative-technologist para una planificación más amplia de viabilidad frontend y mejora progresiva.