Anatomía

La sección envuelve un header centrado (badge opcional, título h2, subtítulo) y un contenedor CSS Grid. Cada BentoItem tiene un id, un título, una descripción, un indicador de type ('text' o 'visual'), una clase Tailwind de span opcional (p. ej. 'col-span-2') y un nombre de icono Lucide opcional. Las tarjetas de tipo visual renderizan el icono a 64px con 20% de opacidad como fondo decorativo antes del bloque de texto. Las tarjetas text muestran solo el título y la descripción alineados en la parte inferior de la tarjeta.

Cómo funciona

Cada tarjeta es un motion.div con initial={{ opacity: 0, y: 24 }} y whileInView={{ opacity: 1, y: 0 }}. La opción viewport { once: true, margin: '-40px' } dispara la animación 40px antes de que la tarjeta entre por completo en pantalla, evitando una aparición brusca. Un delay de i * 0.1 segundos escalona las tarjetas de forma secuencial sin sobrecarga de orquestación. La resolución del icono usa una clave dinámica en el espacio de nombres Lucide (LucideIcons[name]) para que cualquiera de los más de 1400 iconos pueda referenciarse por string desde la capa de datos.

Cómo crearlo en React

1. Definir la interfaz BentoItem y el contenedor de grilla

   Crea un type BentoItem con id, title, description, type ('text' | 'visual'), un string span opcional y un nombre de icono opcional. Renderiza un CSS Grid con 3 columnas en pantallas medium y filas automáticas de 180px. La prop span se mapea directamente a una clase Tailwind en cada tarjeta.

   // types
   interface BentoItem {
     id: string;
     title: string;
     description: string;
     type: "text" | "visual";
     span?: string;   // e.g. "col-span-2 row-span-2"
     icon?: string;   // Lucide icon name
   }
   
   // grid container
   <div className="grid grid-cols-1 md:grid-cols-3 auto-rows-[180px] gap-5">
     {items.map((item, i) => (
       <BentoCard key={item.id} item={item} index={i} />
     ))}
   </div>

2. Resolver los iconos Lucide por clave string

   Importa el espacio de nombres Lucide completo y resuelve el componente del icono por nombre en el momento del render. Esto mantiene la capa de datos libre de imports React y permite controlar los iconos desde un CMS o un archivo JSON.

   import * as LucideIcons from "lucide-react";
   
   function getIcon(name?: string) {
     if (!name) return null;
     return (LucideIcons as unknown as Record<string, React.ElementType>)[name] || null;
   }
   
   // inside the card
   const Icon = getIcon(item.icon);
   {Icon && <Icon className="h-16 w-16" style={{ color: "var(--color-foreground)" }} />}

3. Añadir scroll reveals escalonados con Framer Motion

   Envuelve cada tarjeta en un motion.div. Ajusta el delay a i * 0.1 para que las tarjetas caigan en cascada de izquierda a derecha. El margin: '-40px' en viewport hace que la animación arranque ligeramente antes de que la tarjeta esté completamente en pantalla, para un efecto fluido en lugar de una aparición abrupta.

   <motion.div
     initial={{ opacity: 0, y: 24 }}
     whileInView={{ opacity: 1, y: 0 }}
     viewport={{ once: true, margin: "-40px" }}
     transition={{ delay: i * 0.1, duration: 0.5 }}
     className={`rounded-2xl border p-6 flex flex-col justify-end ${item.span || "col-span-1"}`}
   >

4. Usar CSS tokens para el theming

   Aplica los colores exclusivamente mediante propiedades CSS custom para que la grilla respete cualquier preset de tema sin tocar el código. Las tarjetas visuales usan --color-background-alt para un tinte sutil; las tarjetas de texto usan --color-background-card. El badge y los bordes siguen --color-accent y --color-border.

   // visual card
   style={{
     backgroundColor: "var(--color-background-alt, var(--color-background-card))",
     borderColor: "var(--color-border)",
   }}
   
   // text card
   style={{
     backgroundColor: "var(--color-background-card)",
     borderColor: "var(--color-border)",
   }}

Cuándo usarlo

Recurre a esta grilla cuando necesites presentar de 3 a 6 funcionalidades con pesos visuales variables, algunas requieren una descripción larga, otras solo un título y una pista gráfica. Funciona bien como bloque 'Qué hacemos' para agencias, una sección 'Capacidades clave' para SaaS, o un carrete de momentos destacados en un portfolio. Evítala cuando todos los elementos tengan la misma importancia (usa una grilla de tarjetas uniforme en su lugar) y cuando las tarjetas lleven controles interactivos que necesiten un dimensionado homogéneo.

Usado por

• Linear, Usa grillas de funcionalidades asimétricas con tamaños de tarjeta mixtos para mostrar las capacidades del producto en sus páginas de marketing.
• Vercel, Despliega bloques editoriales estilo bento para resaltar funcionalidades de infraestructura con densidades de tarjetas de texto y visuales variadas.
• Stripe, Combina tarjetas visuales acentuadas con iconos junto a tarjetas de texto completo en sus secciones de funcionalidades de producto para equilibrar la facilidad de lectura rápida con la profundidad.
• Loom, Usa grillas de funcionalidades con spans variados en su página de inicio para dar más espacio visual a los diferenciadores clave que a los puntos secundarios.

FAQ