Anatomía

La sección envuelve una cabecera centrada (badge, h2, subtítulo) y un grid CSS 3×3. Seis componentes MagneticCell ocupan las áreas de grid de la a a la f, dos celdas abarcan dos columnas cada una, lo que da al layout su asimetría. Cada celda lleva una de las cinco variantes de contenido (stat, feature, quote, visual, cta) renderizada por un componente CellContent sin estado. Un único state hoveredId a nivel de la sección controla la atenuación de las tarjetas inactivas.

Cómo funciona

Dentro de cada MagneticCell, dos motion values siguen el desplazamiento normalizado del cursor dentro de la tarjeta: mx y my varían de -0.5 a 0.5. useTransform los mapea a rotateX/rotateY (±8 grados), y useSpring suaviza ambos con la misma config de spring (stiffness 220, damping 28, mass 0.6). Un spring aparte sobre scale pasa de 1 a 1.025 al entrar. Al mouseleave, todos los valores vuelven a 0 y la tarjeta se endereza con el mismo spring. La celda visual añade una animación secundaria: su blob de degradado aumenta a scale 1.15 y gira 15 grados al pasar el cursor, mediante la prop animate de Framer Motion con la curva EASE personalizada.

Cómo crearlo en React

1. Configura el grid asimétrico

   Define la disposición con grid-template-areas para que los tamaños de celda varíen sin media queries. Asigna a cada BentoCell un string area que coincida con el template. Tres filas y tres columnas bastan para seis celdas, de las cuales dos abarcan dos columnas.

   style={{
     display: "grid",
     gridTemplateColumns: "repeat(3, 1fr)",
     gridTemplateAreas: `"a a b" "c d d" "e e f"`,
     gap: "0.875rem",
   }}

2. Sigue la posición normalizada del cursor dentro de cada tarjeta

   En mousemove, calcula el desplazamiento X e Y del cursor respecto a la tarjeta con getBoundingClientRect, luego divide por width/height para obtener un valor entre 0 y 1. Resta 0.5 para que el centro se mapee a 0 y los bordes a ±0.5. Escribe estos valores en dos instancias de useMotionValue.

   const mx = useMotionValue(0);
   const my = useMotionValue(0);
   
   function handleMove(e: React.MouseEvent) {
     const r = ref.current?.getBoundingClientRect();
     if (!r) return;
     mx.set((e.clientX - r.left) / r.width - 0.5);
     my.set((e.clientY - r.top) / r.height - 0.5);
   }

3. Convierte el desplazamiento del cursor en rotateX/Y con springs

   Pasa mx y my por useTransform para producir los ángulos de rotación, luego envuelve cada uno en un useSpring para una inercia suave. Aplica rotateX y rotateY sobre el motion.div junto con perspective:'900px' y transformStyle:'preserve-3d' para que el efecto 3D se renderice correctamente.

   const SPRING = { stiffness: 220, damping: 28, mass: 0.6 };
   const rotateX = useSpring(useTransform(my, [-0.5, 0.5], [8, -8]), SPRING);
   const rotateY = useSpring(useTransform(mx, [-0.5, 0.5], [-8, 8]), SPRING);
   const scale   = useSpring(1, SPRING);
   
   // on enter
   scale.set(1.025);
   // on leave
   mx.set(0); my.set(0); scale.set(1);

4. Añade el foco de hover a nivel del grid

   Eleva un state hoveredId de tipo string a la sección padre. Cada MagneticCell llama a onHover(cell.id) al entrar y a onHover(null) al salir. Las tarjetas cuyo hoveredId está definido pero no coincide con su propio id se animan a opacity 0.6 mediante la prop animate de Framer Motion, creando un efecto de foco sobre todo el grid sin malabares de clases CSS.

Cuándo usarlo

Recurre a esta sección cuando quieras presentar los puntos clave de un producto (una métrica, una feature, un testimonio, un CTA) juntos en una sola declaración visual, landings SaaS, escaparates de agencias, lanzamientos de herramientas de IA. La diversidad de celdas mantiene interesante el escaneo. Evítala en páginas editoriales densas o dashboards donde la densidad de información importa más que el cuidado visual. Como el tilt se controla con el puntero, prevé un fallback estático limpio para los visitantes en móvil.

Usado por

• Vercel, Usa disposiciones de grid de estilo bento asimétrico para mostrar las capacidades del producto, métricas y prueba social en su homepage.
• Linear, Combina tarjetas feature de tamaños variados con sutiles efectos de profundidad al pasar el cursor para destacar las capacidades del producto en sus páginas de marketing.
• Stripe, Usa disposiciones de grid multi-celda que mezclan stats, destacados de features y CTA dentro de una sola sección en sus páginas de producto y feature.
• Loom, Emplea grids de features de estilo bento con tamaños de tarjeta variados y estados de hover interactivos para comunicar el valor del producto en las landing pages.

FAQ