Curvas de easing y marca: una curva define el tono del producto

Una curva de easing es la regla que decide a qué velocidad se mueve un valor animado en cada instante de su duración. En un producto funciona como dirección de arte: una sola curva, aplicada a cada drawer, menú y aviso, da a la interfaz un carácter que la gente reconoce antes de saber nombrarlo. Dos productos pueden compartir paleta, tipografía y retícula y aun así sentirse distintos: uno cierra cada movimiento con una cola larga y suave, el otro encaja de golpe.

Esto le importa a quien responde de cómo se siente un producto: quien dirige el diseño y está montando un design system, el founder cuya app se ve bien en las capturas y mal en la mano, el responsable de frontend que tiene delante cuarenta valores de transición distintos. Sobre el papel, el resultado es pequeño. Una curva propia, dos o tres variantes, tres duraciones, todo escrito como tokens. En el uso, el producto se mueve como una sola cosa.

¿Qué es una curva de easing, en la práctica?

Toda animación relaciona el tiempo con el avance. Al 0 % de la duración el elemento está donde empezó; al 100 %, donde termina. Lo que pasa entre medias lo decide la curva. Una curva lineal recorre la misma distancia en cada fotograma, y se lee como mecánica. Todas las demás aceleran, frenan o hacen las dos cosas.

En la web la curva se escribe de dos formas:

• cubic-bezier(x1, y1, x2, y2): cuatro números que colocan dos puntos de control. El primer par da forma a la salida, el segundo a la llegada. Las palabras clave ease, ease-in y ease-out son valores predefinidos de esta función.
• linear(): una lista de puntos que el navegador une con tramos rectos. Con suficientes puntos dibuja muelles y rebotes que una sola curva de Bézier no puede, porque los valores pueden pasar de 1 y volver. Funciona en todos los motores principales desde que Safari 17.2 la incorporó en diciembre de 2023, después de Chrome 113 y Firefox 112 (MDN).

Las plataformas nativas siguen las mismas dos ideas. En 2023, SwiftUI de Apple convirtió un muelle (spring) en su animación por defecto, como explica la sesión de la WWDC23 Animate with springs. Un muelle se describe con respuesta y amortiguación en lugar de puntos de control, pero en pantalla sigue siendo una curva con su forma.

¿Cómo transmite el tono una curva?

La forma de una curva se lee como una tipografía. Cuatro formas cubren casi todos los productos:

• Salida rápida, llegada larga. El elemento sale enseguida y llega despacio. Se siente ágil y tranquilo a la vez. Aquí vive la mayoría de las interfaces de producto.
• Salida lenta, llegada rápida. El elemento duda, luego acelera y se va. En una entrada parece perezoso. En una salida se lee como decidido, y por eso los design systems la reservan para lo que abandona la pantalla.
• Ease-in-out simétrico. Acelera y frena por igual. Neutro y algo mecánico: el equivalente, en movimiento, a una sans serif por defecto.
• Overshoot. El elemento se pasa del destino y vuelve. Juguetón, físico, a veces infantil. Una vez, marca un momento. En todas partes, cansa.

Los design systems públicos muestran hasta qué punto son decisiones deliberadas. Material 3, de Google, fija su easing estándar en cubic-bezier(0.2, 0, 0, 1): una salida rapidísima y un aterrizaje largo y silencioso. Para las transiciones principales añade una curva emphasized decelerate, cubic-bezier(0.05, 0.7, 0.1, 1), que cubre casi toda la distancia al instante (tokens de easing y duración de Material 3). Carbon, de IBM, va más allá y le pone nombre al tono: una curva estándar productive, cubic-bezier(0.2, 0, 0.38, 0.9), y otra expressive, cubic-bezier(0.4, 0.14, 0.3, 1), con la indicación de reservar el movimiento expresivo para momentos importantes y ocasionales (guía de motion de Carbon).

Con los números uno al lado del otro, los caracteres se ven. La curva de Material dice «ya está». La productive de Carbon dice «eficiente, sin rodeos». La expressive toma aire antes de moverse.

La duración es la otra mitad del tono

La misma curva a 120 ms y a 600 ms da dos productos distintos. Según Nielsen Norman Group, la mayoría de las animaciones de interfaz va de 100 a 500 ms: unos 100 ms para un feedback simple como un checkbox o un interruptor, de 200 a 300 ms para cambios mayores como la entrada de un modal (NN/g sobre la duración de las animaciones). Las guías de Apple piden un movimiento breve y preciso (Human Interface Guidelines, Motion).

Una regla práctica: la curva fija el carácter, la duración fija la energía. Una marca tranquila mantiene la curva y alarga un poco las duraciones. Una marca seca, de herramienta de trabajo, mantiene la misma curva y las acorta. Si cambias las dos a la vez, la comparación ya no dice nada.

¿Por qué una sola curva y no una por componente?

La coherencia es lo que convierte el movimiento en identidad. Si el menú usa una curva, el drawer otra y el aviso una tercera, nadie percibe una marca. Se percibe un producto montado por manos distintas, que muchas veces es justo lo que ha pasado. Una curva propia funciona como una familia tipográfica: las variantes existen y se nota que van juntas.

En la práctica, «una curva» significa una familia pequeña:

1. Estándar, para todo lo que se mueve entre dos posiciones de reposo en pantalla.
2. Entrada, una versión de la misma forma que frena, para lo que llega.
3. Salida, una versión que acelera, para lo que se va, normalmente más rápida.
4. Si hace falta, una variante expresiva, reservada para pocos momentos concretos: un primer resultado, el final del onboarding, una pantalla de lanzamiento.

El modelo de Carbon es exactamente este: tres curvas en dos modos. El de Material se le acerca. Ninguno de los dos tiene una curva por componente.

Cómo elegir la curva propia

Elegir una curva es una decisión de diseño, así que sigue los mismos pasos que elegir una tipografía.

1. Escribe el tono en dos palabras. «Tranquilo y exacto», «rápido y cálido», «constante y serio». Dos palabras bastan para descartar casi todas las candidatas.
2. Dibuja tres o cuatro curvas candidatas en un editor de Bézier (las devtools del navegador traen uno) y guárdalas como simples números.
3. Prueba cada una en tres momentos: la pulsación de un botón a unos 100 ms, un drawer o un modal a unos 250 ms, una transición de página a unos 400 ms. La curva que funciona en los tres es candidata. La que solo luce en la transición larga es decoración.
4. Compara en el producto real, nunca en un cuadrado de prueba. Una curva elegante en una caja gris puede parecer lenta en una tabla densa.
5. Saca las variantes de entrada y salida de la curva ganadora y escríbelo todo como tokens.

Los tokens van junto al color y la tipografía en el mismo sistema, con nombres que dicen el rol y no la forma, como contamos en el artículo sobre nombres de tokens:

--motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
--motion-ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1);
--motion-ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15);
--motion-duration-quick: 120ms;
--motion-duration-base: 240ms;
--motion-duration-slow: 400ms;

Los valores de arriba son los de Material, usados solo como ejemplo legible. La idea es llegar a tres curvas que pertenezcan al producto.

¿Cuándo no debería un producto usar easing expresivo?

Cuando se usa durante horas. En un dashboard, un panel de administración o una herramienta de datos, el mismo panel se abre decenas de veces al día. Un overshoot que encanta la primera vez cuesta atención la cuadragésima. Estos productos piden el lado productive: salida rápida, duración corta, sin rebote. Lo contamos en el artículo sobre calm UI.

El movimiento expresivo encaja donde el tiempo no es un coste: páginas de marketing, onboarding, estados vacíos que se convierten en un primer resultado, apps de consumo que se usan minutos y no horas. Incluso ahí sigue siendo la excepción, y la curva estándar es lo que hace que se note.

Movimiento reducido: se queda el ritmo, se va el desplazamiento

A algunas personas el movimiento en pantalla les provoca mareo o náuseas. El criterio WCAG 2.3.3, Animation from Interactions (nivel AAA), pide que el movimiento que dispara una interacción se pueda desactivar, salvo que sea esencial (W3C, Understanding 2.3.3). La forma más extendida de cumplirlo es la media query prefers-reduced-motion, que el W3C documenta como técnica C39.

Reducir el movimiento no obliga a borrar la marca. El criterio habla de desplazamientos, y un fundido no es un desplazamiento. Un drawer que se desliza 320 px puede, con el movimiento reducido, aparecer con un fundido en su sitio, con la misma duración y la misma curva. El ritmo se queda; el desplazamiento se va. Nuestro checklist de animación funcional cubre el resto de lo que hay que comprobar antes de publicar.

@media (prefers-reduced-motion: reduce) {
  .drawer { transform: none; transition-property: opacity; }
}

Cómo se ve en un producto real

Piensa en un SaaS B2B con pantallas limpias y un movimiento que es ruido: el valor por defecto de un framework CSS aquí, el muelle de una librería allá, un hover de 600 ms que alguien añadió con prisas. El trabajo se hace en tres pasadas. Primero, el inventario: se buscan en el código todas las transition, animation y valores de easing, y se cuentan los distintos. Segundo, la elección: el tono en dos palabras, tres curvas candidatas, la prueba de los tres momentos. Tercero, la migración: cada valor sustituido por un token, cada componente revisado con el movimiento reducido.

Las pantallas siguen igual. El producto, en cambio, empieza a sentirse de una pieza, y su movimiento entra en la misma dirección de arte que el color y la tipografía.