Lección 6: Animaciones y microinteracciones — dosis y accesibilidad
Agregaste un rebote de 600ms a cada botón y se sentía genial — hasta que un usuario sensible al movimiento reportó que la pantalla lo mareaba. Esta lección te enseña movimiento basado en tokens: transiciones sutiles, microinteracciones con propósito, y respetar `prefers-reduced-motion` — no eliminan
El movimiento es como el condimento: un poco mejora el plato, demasiado lo arruina, y algunas personas son sensibles. Para quien pidió menos movimiento no le sirves un plato peor — le sirves una versión más calmada: cambias la especia fuerte por una suave, sin perder el sabor. La animación funciona igual: quitas el movimiento grande, pero conservas el feedback.
- transition token
- Un valor fijo de duración y easing de un pequeño conjunto — por ejemplo `duration-200 ease-out` — así cada transición en la UI se siente uniforme en vez de aleatoria.
- micro-interaction
- Un pequeño feedback visual a una acción del usuario — un cambio leve al pasar el mouse, al presionar o al enfocar — que confirma que algo pasó, sin distraer.
- prefers-reduced-motion
- Una preferencia del sistema donde un usuario pide reducir el movimiento (a menudo por sensibilidad vestibular). 'Reducir' no es 'eliminar': una UI accesible quita el movimiento grande pero conserva el feedback — por ejemplo, un cambio de estado instantáneo en vez de una animación.
- motion-reduce variant
- La variante de Tailwind que aplica clases solo cuando el usuario pidió reducir el movimiento — por ejemplo, `motion-reduce:transition-none` que le elimina una transición.
