Motion

Una web que no se mueve se siente plana. Una que se mueve mal se siente peor. Motion es la librería que resuelve ese punto medio: escribes qué quieres que pase y ella se encarga de que se vea suave, en cualquier navegador y sin trabar la página. Es la que uso en mis proyectos con React.

Cómo se ve en código

En React, cualquier etiqueta se vuelve animable con el prefijo motion.:

import { motion } from "motion/react"

export function Tarjeta() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 12 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.32, ease: [0.22, 1, 0.36, 1] }}
    />
  )
}

Sin React también funciona:

import { animate } from "motion"

animate("#caja", { x: 100 })

Lo que más vas a usar

• animate: a dónde va el elemento.
• initial: cómo empieza, para animarlo al aparecer.
• whileHover y whileTap: la respuesta cuando pasas el mouse o tocas.
• layout: cuando algo cambia de tamaño o de lugar, Motion anima el salto por ti.
• AnimatePresence: para animar lo que sale de la pantalla, no solo lo que entra.

Pídeselo a Claude así

Con el kit para IA instalado, Claude consulta la documentación actual antes de escribir:

Usa Motion para que las tarjetas del catálogo aparezcan una tras otra
al hacer scroll. Solo transform y opacity, y respeta prefers-reduced-motion.

Revisa las animaciones de este componente con la skill /motion
y dime cuáles se pueden simplificar.