Anatomía

El componente se estructura en dos bloques: una tarjeta destacada de ancho completo y una cuadrícula opcional de artículos secundarios. La tarjeta contiene un contenedor de imagen en ratio 2:1, un scrim degradado posicionado en absoluto que asciende desde el color de fondo, y una capa de contenido fijada abajo con chips en flex-wrap, un título escalado con clamp, un párrafo de extracto y una fila de autor. Los artículos secundarios son tarjetas flex horizontales con una miniatura de 120x80px, etiqueta de categoría, título y un icono ArrowRight empujado al extremo.

Cómo funciona

El whileInView + viewport once:true de Framer Motion gestiona todas las animaciones de entrada sin ningún listener de scroll manual. La tarjeta destacada asciende 24px con un fundido (opacity 0 a 1) y una curva personalizada de 0,7s [0.16, 1, 0.3, 1]. Cada artículo secundario se escalona con un retardo de 0,08s por índice sobre un offset base de 0,1s, creando una cascada. El overlay degradado es un único gradient CSS de var(--color-background) al 0% hacia transparent al 60%, por lo que se ve correctamente en cualquier tema sin una sola línea de JS.

Cómo crearlo en React

1. Crear el armazón de la tarjeta destacada

   Envuelve la tarjeta en un motion.a con opacity:0 y:24 en initial y anímala hacia opacity:1 y:0 mediante whileInView. Dale position:relative, borderRadius desde tu design token, overflow:hidden y un contenedor de imagen en ratio 2:1.

   <motion.a
     initial={{ opacity: 0, y: 24 }}
     whileInView={{ opacity: 1, y: 0 }}
     viewport={{ once: true }}
     transition={{ duration: 0.7, ease: [0.16, 1, 0.3, 1] }}
     style={{ position: "relative", borderRadius: "var(--radius-xl)", overflow: "hidden" }}
   >

2. Añadir el overlay degradado

   Coloca un div absoluto que cubra toda la tarjeta con un linear-gradient de var(--color-background) al 0% hacia transparent al 60%. Como usas el token de fondo del tema, el overlay funciona en modo claro y oscuro automáticamente.

   <div style={{
     position: "absolute",
     inset: 0,
     background: "linear-gradient(to top, var(--color-background) 0%, transparent 60%)"
   }} />

3. Fijar los metadatos abajo

   Añade un div de contenido con position:absolute, bottom/left/right 0 y padding. Dentro, renderiza el chip de categoría con un fondo de acento, los chips de tags opcionales, el título con clamp(1.5rem, 3.5vw, 2.5rem) para un escalado fluido, el extracto y la fila de autor con los iconos Clock y User de Lucide React.

4. Construir la cuadrícula secundaria escalonada

   Renderiza los artículos secundarios en una cuadrícula CSS con gridTemplateColumns: repeat(auto-fill, minmax(320px, 1fr)). Cada artículo es un motion.a con un retardo de escalonado: 0,1 + index * 0,08. El layout flex interior coloca una miniatura de tamaño fijo a la izquierda y el contenido de texto en el espacio restante.

   transition={{ duration: 0.5, delay: 0.1 + i * 0.08, ease: [0.16, 1, 0.3, 1] }}

Cuándo usarlo

Recurre a esta sección como bloque de apertura de cualquier blog, sitio de noticias o plataforma de contenido donde importa la jerarquía editorial. Funciona bien en blogs de producto SaaS, portfolios de agencias con casos de estudio y publicaciones de medios. Evítala en las homepages cuyo objetivo principal es la conversión de producto en lugar del descubrimiento de contenido, y prescinde de la cuadrícula secundaria si tienes menos de dos artículos de apoyo que mostrar.

Usado por

• Vercel, Tarjeta de artículo destacado a sangre completa con overlay degradado y metadatos de autor en la parte superior del índice del blog.
• Stripe, Gran post hero con imagen, chip de categoría y tiempo de lectura encima de una cuadrícula de artículos secundarios.
• Linear, Tarjeta de artículo destacado con una tipografía marcada superpuesta a una imagen de portada, coherente con la estética del producto.
• Loom, Post de blog hero con imagen de ancho completo y tarjetas de artículos secundarios escalonadas bajo la línea de flotación.

FAQ