# Movimiento Usa movimiento para hacer visibles los cambios y guiar la experiencia con naturalidad. ## Principios del movimiento ### Funcional El movimiento se aplica con propósito e intención para servir a la funcionalidad de la experiencia. Úsalo para mostrar el próximo paso, informar cambios en la interfaz y celebrar lo que la persona logró. ### Natural El movimiento Lexy se siente fluido y real al respetar leyes físicas como la inercia, la gravedad, el peso y la velocidad. Esto vuelve las animaciones creíbles y predecibles. ### Consistente La consistencia en el movimiento unifica las experiencias y mejora el flujo entre productos. Aporta sensación de familiaridad. ### Atractivo Las animaciones bien diseñadas atraen. Diseñar momentos cautivadores con movimiento ayuda a conectar con el producto y crear experiencias memorables. ## Duración y easing Duración y easing describen cuánto tiempo se mueve un objeto y cómo cambia su velocidad en el camino. Acertar en estos parámetros garantiza que las personas tengan tiempo suficiente para notar el movimiento e interpretar lo que comunica. ### Duración Las animaciones deben encontrar el equilibrio entre lentas y abruptas. Tienden a sentirse naturales y rápidas cuando consideran tamaño y distancia recorrida. Da más tiempo a elementos grandes que a pequeños. Apunta a un movimiento veloz y fluido sin hacer esperar. ### Easing El easing es lo que da a una animación una sensación natural y orgánica, en oposición a un movimiento uniforme y rígido. ** Linear**: velocidad constante, útil para rotaciones. ** Ease-in**: arranca lento y acelera. ** Ease-out**: arranca rápido y desacelera. ** Ease-in-out**: lento al inicio, rápido al medio, lento al final. ## Transiciones, o el movimiento en práctica Las transiciones introducen, descartan o modifican contenido mediante animación, y son el corazón del movimiento de interfaz. Ayudan a entender cómo funciona la UI y le dan acabado de calidad. ### Entrada y salida Introducen o descartan elementos. Pueden venir desde fuera de pantalla o desde dentro de los límites de la pantalla. Patrón común para menús, dialogs y otros elementos interactivos. ### Elevación Comunica visualmente cambios en elevación o profundidad. Se usa para estados de botón, drag and drop, ventanas y para construir jerarquía entre elementos. ### Top level Para navegar entre páginas y destinos principales. Como los elementos del nivel superior ocupan mucho espacio, prefiere un fade rápido en lugar de mover o deslizar elementos. Mantiene la interfaz consistente y evita desorientación. ### Container transform Cambia el layout o la posición de un contenedor mediante redimensionamiento o reposicionamiento. Útil en diseño responsivo, para ajustar layout a distintos tamaños y orientaciones. ## Coreografía La coreografía es la disposición y orden de los movimientos en una animación. Una coreografía floja vuelve la animación barata o excesivamente larga. ### Staggering Es desplazar el inicio de varias animaciones para suavizar la entrada de grupos grandes o dirigir la mirada. Cuida la duración total y usa offsets cortos. Cuando se carga el mismo contenido varias veces, considera variar los offsets, partiendo con separaciones más amplias y reduciéndolas. En la mayoría de casos, la versión escalonada es preferible; deja la simultaneidad para grupos muy grandes donde el escalonado alargaría demasiado. ### Jerarquía La jerarquía es el orden en que se animan los elementos. Te permite dirigir la atención hacia áreas críticas y suaviza la navegación. Da más énfasis a los elementos importantes con movimientos más prominentes y mayores duraciones; agrupa los menos relevantes con timing sincronizado para crear cohesión. ## Diseño de movimiento accesible "Uno para todos, todos para uno" significa considerar las necesidades de todas las personas en cada aspecto del diseño. Algunos grupos pueden no percibir el movimiento o verse afectados por él: personas con trastornos vestibulares, baja visión, lectores de pantalla o sensibilidad a estímulos visuales. Algunas reglas generales: - Diseña e incluye un modo "sin movimiento" en tu app o sitio, como recomienda WCAG. - Mantén las duraciones cortas y el movimiento natural. - Evita destellos, sacudidas o cambios bruscos que puedan detonar epilepsia. - Mantén el movimiento contenido al elemento en foco. Animar otras zonas distrae de la tarea. - Considera otras formas de comunicar lo que la animación dice, como ARIA live regions para anunciar contenido dinámico. ## Tokens Tokens canónicos de duración y curva de easing. Combínalos: hover suele usar durationFaster + curveEasyEase; entrada de modal usa durationSlow + curveDecelerateMid. | Token | Valor | Uso | | --- | --- | --- | | `--durationUltraFast` | `50ms` | Feedback inmediato (hover, focus ring). | | `--durationFaster` | `100ms` | Cambios de estado pequeños (checkbox, switch). | | `--durationFast` | `150ms` | Tooltips, popovers, hover destacados. | | `--durationNormal` | `200ms` | Por defecto para transiciones de UI. | | `--durationGentle` | `250ms` | Cambios de superficie pequeños. | | `--durationSlow` | `300ms` | Modales, drawers, paneles. | | `--durationSlower` | `400ms` | Container transforms; entrada/salida principal. | | `--durationUltraSlow` | `500ms` | Solo para hero / onboarding storytelling. | | `--curveAccelerateMax` | `cubic-bezier(.9,.1,1,.2)` | Salida abrupta hacia el límite. | | `--curveAccelerateMid` | `cubic-bezier(1,0,1,1)` | Salida rápida estándar. | | `--curveAccelerateMin` | `cubic-bezier(.8,0,.78,1)` | Salida suave. | | `--curveDecelerateMax` | `cubic-bezier(.1,.9,.2,1)` | Entrada destacada con rebote suave. | | `--curveDecelerateMid` | `cubic-bezier(0,0,0,1)` | Entrada estándar de elementos. | | `--curveDecelerateMin` | `cubic-bezier(.33,0,.1,1)` | Entrada sutil. | | `--curveEasyEaseMax` | `cubic-bezier(.8,0,.2,1)` | Transiciones bidireccionales destacadas. | | `--curveEasyEase` | `cubic-bezier(.33,0,.67,1)` | Easing por defecto en bucles UI. | | `--curveLinear` | `cubic-bezier(0,0,1,1)` | Sólo para indicadores continuos (progress). |