Microinteracciones y animaciones fluidas: Elevando la UX con Framer Motion

El diseño web ha dejado atrás la era del simple "poner elementos en pantalla". Hoy en día, la diferencia entre una página funcional y un producto que la gente ama utilizar radica en la cinética de la interfaz.

En Kurogrid, utilizamos las animaciones no como adornos visuales, sino como herramientas de comunicación direccional. Te explicamos cómo lograr esto usando Framer Motion en React.

1. El propósito de la animación#

Antes de animar cualquier elemento, debemos hacernos una pregunta: ¿Qué información transmite este movimiento?

Las animaciones sin propósito generan fatiga visual. Una buena animación debe:

• Guiar la atención: Indicar al usuario hacia dónde debe mirar cuando cambia el estado de la página.
• Confirmar acciones: Proporcionar retroalimentación inmediata (por ejemplo, un botón que se hunde o cambia de color sutilmente al presionarse).
• Enmascarar tiempos de carga: Hacer que la espera se perciba como parte de la experiencia.

2. Framer Motion: El estándar de facto#

Aunque CSS puro es potente, gestionar animaciones complejas, orquestar múltiples elementos secuenciales y manejar el ciclo de vida de los componentes al desmontarse (unmount) en React es un dolor de cabeza.

framer-motion soluciona esto de forma elegante.

La magia de layoutId#

Una de las características más asombrosas es la animación de shared layouts. Imagina que tienes una cuadrícula de imágenes y, al hacer clic en una, esta se expande para ocupar toda la pantalla.

import { motion } from "framer-motion";
import { useState } from "react";

export default function ImageGallery() {
  const [selectedId, setSelectedId] = useState(null);

  return (
    <div>
      {/* Elemento en la cuadrícula */}
      <motion.div layoutId="image-container-1" onClick={() => setSelectedId(1)}>
         <motion.img src="/thumb.jpg" />
      </motion.div>

      {/* Elemento expandido */}
      {selectedId && (
        <motion.div layoutId="image-container-1" className="fullscreen">
           <motion.img src="/full.jpg" />
        </motion.div>
      )}
    </div>
  );
}

Al compartir el mismo layoutId, Framer Motion automáticamente interpola el tamaño, posición y escala del elemento entre su estado original y su estado destino. El resultado es una transición que se siente nativa de iOS o Android, pero en la web.

3. Microinteracciones: El diablo está en los detalles#

Las microinteracciones son esos pequeños momentos de deleite. Un menú que rebota suavemente al abrirse, o un ícono que cambia de estado.

Efectos magnéticos#

Un efecto popular en webs premium (como los que implementamos en nuestros CTAs) es el botón magnético. Cuando el cursor se acerca, el botón es atraído sutilmente hacia el puntero.

Esto se logra combinando eventos de ratón con los useMotionValue y useSpring de Framer:

import { motion, useMotionValue, useSpring } from "framer-motion";

function MagneticButton({ children }) {
  const x = useMotionValue(0);
  const y = useMotionValue(0);
  
  // Añade físicas de resorte para suavizar el movimiento
  const springX = useSpring(x, { stiffness: 150, damping: 15, mass: 0.1 });
  const springY = useSpring(y, { stiffness: 150, damping: 15, mass: 0.1 });

  function handleMouseMove(e) {
    const rect = e.currentTarget.getBoundingClientRect();
    // Calcula la distancia desde el centro del botón
    x.set(e.clientX - (rect.left + rect.width / 2));
    y.set(e.clientY - (rect.top + rect.height / 2));
  }

  function handleMouseLeave() {
    // Vuelve suavemente al centro
    x.set(0);
    y.set(0);
  }

  return (
    <motion.button
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
      style={{ x: springX, y: springY }}
      className="btn-premium"
    >
      {children}
    </motion.button>
  );
}

Conclusión#

Integrar Framer Motion no se trata de hacer que las cosas "vuelen por la pantalla". Se trata de crear interfaces que se sientan vivas y responsivas al toque humano. En Kurogrid, consideramos la coreografía de la interfaz como una fase fundamental del diseño de experiencia de usuario, asegurando que cada producto digital no solo funcione impecablemente, sino que se sienta excepcional.