Fundamentos

Movimiento

Resortes, duraciones y curvas; cómo respetan el movimiento reducido.

El movimiento en Eclipse UI es físico: lo que se arrastra, sigue al cursor o cambia de forma se mueve con resortes que tienen masa, rigidez y amortiguación, y conservan su velocidad si el destino cambia a medio camino. Lo demás (colores, hovers, entradas) usa unas pocas duraciones y curvas con nombre. Todo pasa por el dial --eui-motion y respeta el movimiento reducido del sistema.

Resortes

Cinco ajustes en eclipse_ui/spring. Los valores de abajo se leen del módulo; la curva es la respuesta a un salto de 0 a 1 durante un segundo, con la marca donde entra para siempre al 99%. Haz clic en un carril para mover su pieza o compáralos todos a la vez.

Patio de juegos

ζ es la razón de amortiguación: por encima de 1 llega sin pasarse; por debajo rebota. responsive está ajustado para rebotar apenas: es el de los regresos (el pulgar que vuelve, el botón magnético que se suelta, la pila de avisos). "Tardó" es lo que midió el navegador la última vez hasta que la pieza se detuvo (a medio píxel), con el dial de la personalidad de la barra: incluye la cola de los últimos píxeles, que el ojo ya no ve.

Duraciones

Para lo que no es físico (un color, una opacidad, una entrada) hay cuatro duraciones con nombre. Todas salen de --eui-motion: Umbra (0.7) es más rápida, Alba (1.35) más lenta, y con movimiento reducido valen 0. El valor es el calculado ahora en la muestra.

Duraciones

Y una más larga sin utilidad, --eui-dur-tide (—), para la luna del medidor y los bucles que respiran.

Curvas

Una respiración: lo que entra exhala (rápido y llega suave), lo que sale inhala (lento y se va rápido). Nunca linear ni las curvas de Tailwind. Las cuatro se muestran con duration-breath para que se noten.

Curvas

El dial y el movimiento reducido

--eui-motion va de 0 a 1.5 y escala todas las duraciones CSS y el tiempo de los resortes (lo lee motionScale en el elemento). Si el sistema pide prefers-reduced-motion, el motor lo trata como 0: no hace falta escribir nada en cada componente. Prueba el interruptor: pone el dial en 0 solo en esta muestra.

Con y sin movimiento

Resorte snappy

Transición duration-calm

Presión eui-press · escala —

QuéCon el dial en 0 o movimiento reducido
Resortes (eclipse_ui/spring)Saltan al destino en el mismo cuadro; la promesa de set() se cumple de inmediato.
Arrastres y gestosSiguen al dedo 1:1 (eso no es animación); al soltar, el regreso salta.
Transiciones (duration-*)Duran 0 ms: el estado cambia sin recorrido.
animate-rise, animate-settleSin desplazamiento ni escala: solo aparecen.
Bucles (animate-breathe, medidor)Quietos. En CSS propio, divide la duración entre max(var(--eui-m, 1), 0.0001).
eui-pressNo se encoge: --eui-press-scale vale 1.

Resorte o CSS

La regla para decidir, pieza por pieza:

Si el movimiento…UsaEjemplo
sigue al dedo o al cursorresorte responsive o snappydeslizar para reservar, botón magnético
cambia de lugar o de tamañoresorte morph, gentle o snappyla pastilla de unas pestañas, un modal que cambia de alto
puede cambiar de destino a medio caminoresorte (conserva la velocidad)números que ruedan, avisos que se apilan
es un color, un borde, una opacidad o una sombratransition-colors duration-quickhover de filas y botones
es una entrada de una sola vezanimate-rise o animate-settleuna fila nueva por Turbo Stream
respira en bucleanimate-breatheel medidor con pocos lugares, "en vivo"
es la respuesta al toqueeui-presstodo lo que se presiona

Y lo que nunca: duraciones fijas en milisegundos, linear, rebotes en un hover, animaciones que no respetan el dial.