Anatomía

La sección se divide en tres capas renderizadas en un único contenedor relative. En la base hay una lista escalonada de elementos anchor, cada uno mostrando un índice con relleno de ceros en monospace, un gran título de proyecto, una etiqueta de categoría, un año y un icono ArrowUpRight. Encima, una motion.div absoluta actúa como tarjeta de preview, de 280 × 200 px, redondeada, coloreada con la propiedad color del proyecto activo, centrada en la posición del cursor animada con spring. La cabecera sobre la lista es una motion.div separada que aparece con un disparador whileInView.

Cómo funciona

El handler onMouseMove del contenedor lee clientX/Y y resta el bounding rect del contenedor para obtener coordenadas relativas a la sección. Estas alimentan dos instancias useMotionValue (mouseX, mouseY), cada una pasada por useSpring con stiffness 200, damping 25, mass 0.5. La tarjeta de preview asigna sus props motion x e y directamente a esos valores del spring, así la tarjeta siempre queda un poco por detrás del puntero. AnimatePresence envuelve la tarjeta y controla un scale de 0.8 a 1 al entrar y de 1 a 0.8 al salir, creando un pop muy agradable. El índice de la fila activa vive en un useState corriente para que cada elemento de la lista calcule su propia opacidad: 1 cuando está activo o cuando no hay nada con hover, 0.3 en caso contrario.

Cómo crearlo en React

1. Configurar los motion values y el spring

   Crea dos instancias useMotionValue para la posición cruda del puntero y luego envuelve cada una en useSpring con la misma config. Mantén un activeIndex en useState. Estas tres piezas son todo el estado que necesita este componente.

   const mouseX = useMotionValue(0);
   const mouseY = useMotionValue(0);
   const SPRING = { stiffness: 200, damping: 25, mass: 0.5 };
   const springX = useSpring(mouseX, SPRING);
   const springY = useSpring(mouseY, SPRING);
   const [activeIndex, setActiveIndex] = useState<number | null>(null);

2. Seguir el puntero relativo al contenedor

   Añade onMouseMove al div contenedor. Resta getBoundingClientRect().left/top de las coordenadas cliente crudas para que la tarjeta se ancle a la sección y no al viewport. Actualiza mouseX y mouseY; los springs se recalculan automáticamente.

   function handleMouseMove(e: React.MouseEvent) {
     const rect = e.currentTarget.getBoundingClientRect();
     mouseX.set(e.clientX - rect.left);
     mouseY.set(e.clientY - rect.top);
   }

3. Renderizar la tarjeta de preview flotante con AnimatePresence

   Coloca una motion.div dentro de AnimatePresence. Pon position absolute, pointerEvents none y pasa springX/springY a las props motion x/y. El transform: translate(-50%, -110%) desplaza la tarjeta para que flote por encima del cursor en lugar de solaparse con él.

   <AnimatePresence>
     {activeIndex !== null && (
       <motion.div
         initial={{ opacity: 0, scale: 0.8 }}
         animate={{ opacity: 1, scale: 1 }}
         exit={{ opacity: 0, scale: 0.8 }}
         style={{
           position: "absolute",
           x: springX,
           y: springY,
           transform: "translate(-50%, -110%)",
           pointerEvents: "none",
           background: projects[activeIndex].color,
         }}
       />
     )}
   </AnimatePresence>

4. Atenuar las filas inactivas

   En cada elemento de la lista, define la opacidad inline: 1 cuando no hay nada con hover o cuando este elemento es el activo, 0.3 en caso contrario. Una transición CSS normal sobre opacity basta aquí; no hace falta spring para esta parte.

   opacity: activeIndex !== null && activeIndex !== i ? 0.3 : 1,
   transition: "opacity 0.3s ease",

Cuándo usarlo

Este patrón se gana su sitio en un portfolio creativo o en la homepage de una agencia, donde el objetivo es que una lista de proyectos se sienta viva. Funciona mejor con 4 a 8 elementos; una lista más larga agota la interacción. Evítalo en listados de e-commerce o en cualquier tabla donde la velocidad de lectura importe más que el efecto. Ofrece siempre un fallback para pantallas táctiles ocultando la tarjeta de preview cuando no hay puntero disponible.

Usado por

• Locomotive, La agencia de Montreal usa miniaturas de proyectos que siguen el cursor como interacción distintiva en su lista de case studies.
• Aristide Benoist, Desarrollador creativo francés cuyo portfolio popularizó este patrón: una imagen de proyecto flotante que persigue el puntero sobre una lista de texto puro.
• Fantasy, El estudio de diseño de producto usa previews de proyectos con hover en su índice de trabajos, haciendo aparecer color y miniatura sin cambiar de página.
• Superhuman, Superficies reactivas al cursor y estados hover que premian el movimiento preciso del puntero aparecen por todas sus páginas de marketing.

FAQ