El movimiento como activo de marca, no como decoración
Curvas de easing, escalas de duración y coreografía definidas una sola vez a nivel de marca, entregadas como tokens y acotadas por las reglas de accesibilidad que gobiernan la animación.
Contenido
El movimiento es un activo de marca cuando las curvas de easing, la escala de duración y la coreografía se definen una vez y se entregan como tokens que leen todos los componentes. Pantalla a pantalla es decoración y se degrada en dos releases. El sistema carga además las reglas de accesibilidad: animar tiene consecuencia documentada sobre la salud.
Puntos clave
- El criterio 2.3.3 de WCAG exige poder desactivar la animación disparada por interacción, salvo que sea esencial (W3C).
- El criterio 2.2.2, nivel A, aplica a lo que se mueve solo más de cinco segundos junto a otro contenido (W3C).
- Cerca del 15 % de los adultos de Estados Unidos, unos 33 millones, tenía un problema de equilibrio o mareo en 2008 (NIDCD).
prefers-reduced-motionfue la media query de preferencia más usada en el Web Almanac de 2022, en el 34 % de las páginas (HTTP Archive, 26 de septiembre de 2022).
Qué contiene un sistema de movimiento
Cuatro cosas, y ninguna es una animación. Una escala de duración, de tres a cinco pasos, del cambio de estado corto a la transición de vista. Un conjunto pequeño de curvas de easing con nombre. Una regla de coreografía que dice qué lidera y qué sigue. Y una lista de lo que nunca se anima.
Ese último punto es el que más trabaja. Sin él el movimiento se acumula: alguien anima un error de validación, otro el precio, y la interfaz grita en varias direcciones.
El sistema es un activo de marca como lo es una tipografía. Se reconoce entre productos, se aplica en lugar de reinventarse y solo acumula valor si se mantiene constante — la misma lógica que gobierna una marca gráfica.
El easing y la duración son decisiones de marca
El easing describe cómo cambia un valor en el tiempo. CSS Easing Functions Level 1 define las familias: lineal, Bézier cúbicas —con las palabras clave ease y cubic-bezier()— y funciones de pasos. Una marca elige dos o tres y les pone nombre.
El nombre es lo importante. motion-ease-exit y motion-duration-medium son decisiones que un design system hace cumplir; un cubic-bezier(0.2, 0, 0, 1) pegado en un componente no lo puede auditar nadie. Es el contrato que los design tokens existen para sostener.
La duración va con la escala y la distancia. Un elemento pequeño que recorre poco necesita menos tiempo que una transición de vista; una duración única para ambos hace uno lento y otro brusco. Define la escala y deja que cada componente elija un paso.
La coreografía decide qué significa la interfaz
La coreografía es el orden de llegada. Si varios elementos entran a la vez, el ojo los lee como un bloque; en secuencia, el orden dice qué es primario. Es una decisión de jerarquía y pertenece a quien la fija en el resto de la identidad.
Dos reglas cubren casi todo. El movimiento sigue el camino causal: lo que se abre desde un botón se expande desde ese botón, no desde el centro. Y los desfases escalonados se mantienen cortos: un escalonado largo se lee como lentitud, no como ritmo.
La obligación de accesibilidad
Animar no es una elección estética neutra. Los trastornos vestibulares pueden producir mareo, náuseas y dolor de cabeza ante movimiento de gran escala, parallax y movimiento desacompasado. La población afectada no es pequeña.
El National Institute on Deafness and Other Communication Disorders indica que cerca del 15 % de los adultos de Estados Unidos — unos 33 millones — tenía un problema de equilibrio o mareo en 2008. Las reacciones vestibulares incluyen mareo, náuseas y dolor de cabeza. Fuente: NIDCD.
Dos criterios lo acotan. El 2.2.2, Pausar, detener, ocultar, es nivel A: lo que se mueve, parpadea o se desplaza solo, dura más de cinco segundos y convive con otro contenido necesita un mecanismo para pausarlo u ocultarlo. El 2.3.3 es nivel AAA y exige poder desactivar la animación disparada por interacción, salvo que sea esencial.
El criterio 2.3.3 de WCAG establece que la animación disparada por interacción se pueda desactivar, salvo que sea esencial para la funcionalidad o la información transmitida. La guía del W3C señala prefers-reduced-motion como vía de implementación. Fuente: W3C Web Accessibility Initiative.La media query se apoya en un ajuste del sistema operativo anterior al estándar: WebKit publicó soporte en 2017, ligado a la opción Reducir movimiento de iOS 7 y después de macOS.
Movimiento reducido no es movimiento cero. La opacidad, los fundidos cortos y los cambios de estado inmediatos siguen comunicando. Lo que se retira es el desplazamiento con distancia, la escala, el parallax y el giro.
Cómo entregarlo para que sobreviva
Entrega el sistema como tokens más reglas escritas, no como un vídeo. Los tokens van al código; las reglas, al documento que lleva tipografía y color, y nombran a quien aprueba una excepción.
Después mide el coste. La animación consume el mismo presupuesto de frame que todo lo demás, y el movimiento pesado aparece en las métricas que ya se vigilan para carga e interacción. Lo que se publica sin comprobación de rendimiento acaba borrado por quien esté de guardia, no rediseñado.
Preguntas frecuentes
¿Basta con `prefers-reduced-motion` para cumplir WCAG?
Es la técnica principal, no la respuesta completa. El 2.3.3 pide poder desactivar la animación por interacción, y respetar la media query lo resuelve para quien ha fijado la preferencia. El 2.2.2 sigue exigiendo control de pausa para el movimiento automático de más de cinco segundos.
¿Cuántas curvas de easing debe definir una marca?
Dos o tres. Una para lo que entra, otra para lo que sale y, si acaso, una para transiciones de vista grandes. Más allá de ahí, los componentes empiezan a elegir por gusto y no por regla, que es como un sistema deja de serlo.
¿El movimiento es de diseño o de ingeniería?
De ambos, en capas distintas. Las curvas, las duraciones y la coreografía son decisiones de marca y se documentan igual que la tipografía. Su implementación, el presupuesto de rendimiento y las alternativas de movimiento reducido son decisiones de ingeniería, no de diseño.
Qué hacer a continuación
Define la escala de duración y el conjunto de easing antes de animar nada, escribe la lista de lo que nunca se anima e implementa la vía de movimiento reducido en el mismo commit que la animación. Después revisa contra el criterio 2.2.2 las páginas donde ya hay movimiento: los carruseles automáticos y los bucles de hero son donde más sitios fallan. Dentro de seis meses la pregunta útil será cuántas excepciones se pidieron y si las reglas sobrevivieron.
