Anatomía

La sección exterior usa CSS custom properties para todos los paddings y el fondo. En su interior, una grid de dos columnas (columna izquierda fija de 320px, derecha en 1fr) contiene dos motion.div. La columna izquierda muestra un placeholder en relación 3/4 con un overlay tintado y un icono ImageIcon de Lucide centrado. La columna derecha apila cuatro elementos de arriba abajo: un icono Quote sobre la cita, una fila de nombre/rol separada de la bio por un borde inferior, y el propio párrafo de bio.

Cómo funciona

Ambos motion.div usan whileInView para activarse cuando el elemento cruza el viewport. La columna de imagen anima opacity 0→1 y scale 0.95→1 en 600ms. La columna de contenido usa la misma duración pero arranca 100ms más tarde (delay: 0.1) y se desliza desde y:20 en lugar de escalar. Ambas comparten la misma curva de bézier [0.16, 1, 0.3, 1], que produce una desaceleración rápida sin rebote, típica de los sitios de producto cuidados. La opción de viewport `once: true` impide que la animación se repita al hacer scroll hacia arriba.

Cómo crearlo en React

1. Configura la grid de dos columnas

   Envuelve todo en una section con los paddings en CSS variables, luego dentro coloca un div con display:grid, gridTemplateColumns:'320px 1fr' y un gap de 4rem. En móvil lo cambiarás a una sola columna. Usar estilos inline sobre los tokens CSS evita cualquier fricción con los breakpoints de Tailwind.

   <div style={{
     display: "grid",
     gridTemplateColumns: "320px 1fr",
     gap: "4rem",
     alignItems: "center",
   }}>

2. Anima la entrada en vista del placeholder de retrato

   Envuelve la columna izquierda en un motion.div. Define initial en opacity:0, scale:0.95 y whileInView en opacity:1, scale:1. Pasa viewport={{once:true}} para que la revelación se dispare solo la primera vez. Usa la constante ease personalizada para una desaceleración suave.

   const EASE = [0.16, 1, 0.3, 1] as const;
   
   <motion.div
     initial={{ opacity: 0, scale: 0.95 }}
     whileInView={{ opacity: 1, scale: 1 }}
     viewport={{ once: true }}
     transition={{ duration: 0.6, ease: EASE }}
   >

3. Escalona la animación de la columna de contenido

   La columna derecha usa los mismos ajustes de transición con un deslizamiento desde y:20 y un retardo de 100ms. Ese pequeño desfase hace que las dos columnas parezcan coreografiadas en lugar de simultáneas. Mantén duraciones idénticas para que el timing se perciba como intencional.

   <motion.div
     initial={{ opacity: 0, y: 20 }}
     whileInView={{ opacity: 1, y: 0 }}
     viewport={{ once: true }}
     transition={{ duration: 0.6, delay: 0.1, ease: EASE }}
   >

4. Conecta la cita y la bio

   Dentro de la columna derecha, coloca un icono Quote (Lucide) con baja opacidad encima de un elemento blockquote semántico. Debajo, muestra el nombre y el rol en una fila flex, separada de la bio por un borde inferior. Pasa todo el contenido textual como props para que el componente siga siendo reutilizable con distintos fundadores o miembros del equipo.

Cuándo usarlo

Úsala a media página en landing pages de startups, sitios de agencia o proyectos de portfolio para dar un rostro humano a la marca antes de un bloque de prueba social o un CTA. Funciona especialmente bien tras una sección de funcionalidades, dando a los lectores un momento para conectar con la persona detrás del producto. Evítala en páginas puramente de e-commerce o transaccionales donde la credibilidad personal no impulsa la conversión, y no la coloques directamente después de otra sección a sangre completa con mucha imagen.

Usado por

• Basecamp, El rostro del fundador Jason Fried y sus citas directas anclan la página About, estableciendo la credibilidad personal antes del pitch del producto.
• Notion, Los retratos del equipo y de los fundadores con bios breves aparecen en la sección de historia de la empresa para conectar el producto con personas reales.
• Framer, Grid de fundadores y equipo con nombre, rol y descripción breve en un layout dividido limpio, típico de las empresas de herramientas de diseño.

FAQ