Motion design system

Un sistema de motion necesita tokens de duración nombrados, no milisegundos arbitrarios dispersos por el código. Sin escala, cada quien inventa tiempos, el producto se vuelve inconsistente y ajustar el ritmo global exige tocar decenas de archivos. Los tokens funcionan como una escala tipografica: comunican jerarquía de tiempo y se editan desde un solo lugar. IBM Carbon define 6 niveles (70, 110, 150, 240, 400, 700ms) y Material 3 define 8 (50 a 800ms).

La curva de aceleración decide si el movimiento se siente físico o artificial: los objetos reales no arrancan ni frenan de golpe. Usar la curva equivocada rompe la ilusión de continuidad aunque la duración sea perfecta. Un elemento que entra debe decelerar al llegar (Entrance), uno que sale debe acelerar al irse (Exit), y un cambio de estado usa una curva simetrica (Standard). Un modal con ease-in parece escaparse; con una curva de entrada aterriza con naturalidad.

Cada animación en la UI debe cumplir al menos una función: orientar al usuario en el espacio (de donde vino este elemento), confirmar una acción (mi click funciono) o comunicar jerarquía (que es lo principal). El movimiento decorativo que no responde a ninguna de estas preguntas anade carga cognitiva y distrae sin retribuir. Apple HIG lo resume: el movimiento debe servir siempre a un proposito claro, nunca usarse de forma gratuita. Una tarjeta que rota 360 al hover es espectacular pero inútil; un item que se desliza al ser anadido comunica que acaba de llegar.

Desactivar la animación sin más equivale a romper la experiencia para usuarios con trastornos vestibulares, epilepsia fotosensible o TDAH. La directriz correcta es sustituir el movimiento por un cambio equivalente, un fade de opacidad o un cambio de color, que comunique lo mismo sin generar malestar. MDN recomienda explicitamente reemplazar (scale/zoom a fade, paneo a fade, transforms complejos a cambios de estado simples) en vez de usar animation: none. La media query prefers-reduced-motion tiene soporte Baseline amplio desde enero 2020.

/* sustituye transform por fade */
.card {
  transition: transform 300ms var(--ease-entrance),
              opacity 300ms var(--ease-standard);
}
@media (prefers-reduced-motion: reduce) {
  .card {
    transition: opacity 200ms linear;
    transform: none;
  }
}

/* corta el movimiento sin alternativa */
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
}

El criterio de exito WCAG 2.3.3 (nivel AAA) exige que cualquier animación disparada por interacción del usuario pueda desactivarse, salvo que sea esencial para la funcionalidad o la información. Parallax, transiciones decorativas y elementos en movimiento continuo necesitan una vía de escape. Hay tres métodos aceptados: evitar animaciones innecesarias desde el diseño, ofrecer un control en la UI para apagarlas, o respetar prefers-reduced-motion del sistema operativo. Quedan exentas las herramientas de autoria de animación y el scroll básico de contenido que entra al viewport.

Cualquier elemento que empiece a moverse sin que el usuario lo pida, dure más de cinco segundos y coexista con otro contenido en pantalla necesita un control de pausa, detención u ocultamiento. Ignorarlo viola un criterio de nivel A, el más básico, y es un bloqueador de accesibilidad real. El límite de 5 segundos se eligio porque es suficiente para captar la atención pero no tanto que impida usar la página. No aplica cuando el movimiento es el único contenido en pantalla. Un carrusel autoplay sin botón de pausa deja texto sin leer y distrae sin parar.

Ciertos tipos de movimiento provocan nauseas, desorientación y malestar en usuarios con sensibilidad vestibular, incluso sin diagnostico previo. El zoom excesivo crea la ilusión de acercamiento físico y el parallax con diferencial de velocidad alto produce una disociación visual que el cerebro intenta compensar como movimiento real. MDN lista explicitamente los movimientos a evitar: escalado de objetos, paneo de contenido grande y efectos parallax. La alternativa es discreta: un hover con translateY(-2px) más sombra basta para sentir interactividad sin malestar.

El navegador ejecuta el render en tres etapas: Layout, Paint y Composite. Animar width, height, top, margin o padding obliga a recalcular Layout en cada frame, la etapa más cara, que invalida el arbol completo y genera jank. Animar transform y opacity va directo a Composite en la GPU, sin tocar Layout ni Paint, y corre a 60fps incluso en dispositivos lentos. Son las únicas dos propiedades que el compositor puede animar sin bloquear el main thread. Carbon recomienda que la mayoría de animaciones duren entre 100 y 300ms.