Ely Motion

---
name: ely-interface-motion
description: "Diseña e implementa microinteracciones y transiciones de interfaz vinculadas a eventos y cambios de estado: navegación, formularios, paneles, listas y manipulación directa. Úsala para mejorar feedback, continuidad e interrupciones; las historias sostenidas por scroll pertenecen a ely-scroll-frontends."
---

# Ely Motion

Haz que el movimiento explique qué cambió, qué está ocurriendo y qué puede hacer la persona. Conserva la marca, el framework y el alcance del proyecto; utiliza su sistema de animación si resuelve el trabajo.

## Modelar antes de animar

Elige el flujo solicitado y enumera sus estados reales: por ejemplo, `idle → submitting → success | error`. Incluye las interrupciones que el flujo admite, como cancelar, reabrir o repetir. Distingue el estado del producto del progreso visual: la duración de una animación no decide cuándo una operación termina.

Para cada transición concreta define:

- **Disparador:** acción de usuario o cambio confirmado en el sistema.
- **Información:** relación espacial, resultado o continuidad que debe entenderse.
- **Propiedades:** qué cambia y qué permanece estable para orientar la mirada.
- **Interrupción:** qué ocurre si llega el evento opuesto antes de terminar.
- **Alternativa:** feedback equivalente sin desplazamiento ni efectos de escala.

Anima relaciones útiles: un elemento compartido que mantiene identidad, una lista que muestra dónde se insertó un registro, un panel que comunica su origen. Un efecto que retrasa una acción o compite con su texto no aporta feedback. La ausencia de movimiento es una decisión válida.

Lee [references/state-patterns.md](references/state-patterns.md) cuando haya operaciones asíncronas, apertura/cierre, listas dinámicas o arrastre. Contiene contratos de interrupción y pruebas concretas.

## Implementar transiciones controlables

Usa CSS para estados sencillos y Web Animations o el motor existente cuando hagan falta cancelación, continuidad desde el valor actual o coordinación. Añade dependencias solo si su capacidad justifica el coste y encaja en el proyecto.

- Prefiere `transform` y `opacity`; reserva animación de dimensiones para casos donde el reflujo sea intencional y medido. No intentes transicionar `height: auto` sin comprobar el soporte o proporcionar una estrategia compatible.
- Usa duraciones y curvas coherentes con los tokens existentes. Como punto de partida, un feedback de control suele necesitar menos tiempo que el desplazamiento de un panel; ajusta mirando el resultado real, sin imponer un reloj universal.
- Al interrumpir, reemplaza o revierte desde el estado visual actual cuando sea posible. No acumules colas de entradas ni dejes que un callback antiguo cierre un panel reabierto.
- La animación de salida puede retrasar desmontaje visual, pero no debe dejar controles invisibles en el orden de tabulación. Mantén sincronizados visibilidad, semántica y foco; no dependas exclusivamente de `transitionend` para limpiar un componente.
- No confundas doble clic con una nueva operación válida. La protección contra envíos duplicados pertenece al estado de la operación, no a un temporizador de la animación.
- Limpia instancias, listeners, timers y capturas de puntero al cancelar o desmontar. Una promesa de animación cancelada debe resolverse o manejar su rechazo sin errores de consola.

Respeta `prefers-reduced-motion` tanto al iniciar como cuando cambia durante la sesión. Elimina desplazamientos amplios, rebotes y escalado vestibular; comunica el resultado con estado, texto o una transición discreta. Conserva el mismo resultado funcional aunque la duración sea cero. Nunca hagas del arrastre o del hover la única forma de operar un control.

## Verificar el comportamiento completo

Reproduce en el navegador el flujo normal, un evento opuesto durante la transición y varias repeticiones rápidas. Comprueba teclado, puntero táctil cuando aplique, foco, errores y movimiento reducido. Confirma que navegar y volver no duplica listeners ni reproduce estados obsoletos.

Entrega el cambio con una explicación breve de qué comunica el movimiento y evidencia de los casos realmente probados. Las secuencias largas controladas por scroll pueden usar `ely-scroll-frontends` si está disponible; esta skill funciona por sí sola y no requiere instalarla.