Micro-interacciones: Los detalles que enamoran

Las micro-interacciones son los pequeños momentos de deleite que transforman una interfaz funcional en una experiencia memorable.

¿Qué son?

Son animaciones pequeñas y sutiles que proporcionan feedback visual inmediato sobre las acciones del usuario.

Ejemplos:

• El corazón que se anima al dar "like"
• El botón que cambia de estado al hacer hover
• La notificación que aparece suavemente
• El toggle que se desliza

Anatomía de una micro-interacción

1. Trigger

Qué inicia la interacción (click, hover, scroll, tiempo)

2. Rules

Qué sucede cuando se activa

3. Feedback

Cómo se comunica al usuario lo que está pasando

4. Loops & Modes

Cómo se comporta a lo largo del tiempo

Implementación con Framer Motion

import { motion } from 'framer-motion'

<motion.button
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
  transition={{ type: "spring", stiffness: 400 }}
>
  Click me
</motion.button>

Principios de animación

Timing

• Rápido para interacciones pequeñas (100-200ms)
• Moderado para transiciones (200-400ms)
• Lento para cambios importantes (400-600ms)

Easing

No uses linear. Prefiere:

• ease-out para entradas
• ease-in para salidas
• ease-in-out para movimientos

Physics-based

Las animaciones basadas en física se sienten más naturales.

Cuándo NO usar micro-interacciones

• Cuando ralentizan tareas frecuentes
• En dispositivos con bajo rendimiento
• Si distrae del objetivo principal
• Cuando el usuario ha desactivado animaciones

Respeta las preferencias

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Conclusión

Las micro-interacciones no son decoración, son comunicación. Cuando se hacen bien, se vuelven invisibles pero inolvidables.