Anatomía

La sección tiene dos zonas. Arriba, un bloque de cabecera centrado (h2 + párrafo de introducción) que aparece en fundido una sola vez mediante un motion.div. Debajo, un contenedor relative contiene la línea vertical, un div de 2px posicionado en absoluto de arriba abajo en el borde izquierdo, y una columna flex de elementos de timeline. Cada elemento es un grid de 2 columnas: un punto de acento de 42px a la izquierda y un bloque de texto a la derecha (etiqueta de año en color de acento, título h3, párrafo).

Cómo funciona

Cada hito se envuelve en un motion.div con initial={{ opacity: 0, x: -16 }} y whileInView={{ opacity: 1, x: 0 }}. La opción viewport once:true hace que la animación se dispare una sola vez y se mantenga, así que quienes hacen scroll rápido nunca ven una repetición. El retardo se calcula como i * 0.08, dando un escalonado natural sin boilerplate de orquestación. El bloque de cabecera usa y: 16 en lugar de x: -16 para distinguirse visualmente. Ambos usan el mismo EASE cubic-bezier [0.16, 1, 0.3, 1] para una sensación ágil y con ligero rebote.

Cómo crearlo en React

1. Definir la estructura de los datos y renderizar la cabecera

   Crea una interface TimelineEvent con los campos year, title y description. Acepta sectionTitle, intro y timeline como props con valores por defecto. Envuelve el h2 + párrafo en un motion.div que aparece en fundido desde y:16 con viewport once:true. Usa clamp() para el font-size del titular para que escale sin breakpoints.

   interface TimelineEvent {
     year: string;
     title: string;
     description: string;
   }
   
   <motion.div
     initial={{ opacity: 0, y: 16 }}
     whileInView={{ opacity: 1, y: 0 }}
     viewport={{ once: true }}
     transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
   >
     <h2 style={{ fontSize: "clamp(1.75rem, 3vw, 2.5rem)" }}>
       {sectionTitle}
     </h2>
   </motion.div>

2. Trazar la línea vertical y el punto

   Dentro de un contenedor relative, coloca un div de 2px de ancho posicionado en absoluto que abarque toda la altura en el lado izquierdo. Esta es la línea de conexión. Cada elemento de timeline es un grid CSS de 2 columnas: 42px para la columna del punto, 1fr para el contenido. El punto es un círculo flex con un borde y relleno de acento usando el icono Circle de lucide-react a 10px.

   <div style={{ position: "relative", maxWidth: 680, margin: "0 auto" }}>
     {/* Connector line */}
     <div aria-hidden style={{
       position: "absolute", left: 20, top: 0, bottom: 0,
       width: 2, background: "var(--color-border)"
     }} />
   
     {/* Items */}
     <div style={{ display: "flex", flexDirection: "column", gap: "2.5rem" }}>
       {timeline.map((event, i) => (
         <div key={i} style={{ display: "grid", gridTemplateColumns: "42px 1fr", gap: "1.5rem" }}>
           {/* Dot */}
           <div style={{ width: 42, height: 42, borderRadius: "var(--radius-full)",
             background: "var(--color-accent-subtle)", border: "2px solid var(--color-accent)" }}>
             <Circle style={{ width: 10, height: 10, fill: "var(--color-accent)" }} />
           </div>
           {/* Content */}
           <div>...</div>
         </div>
       ))}
     </div>
   </div>

3. Animar cada elemento con un whileInView escalonado

   Envuelve cada elemento de la timeline en un motion.div. Pon initial en opacity 0 y x -16, whileInView en opacity 1 y x 0. Pasa viewport once:true para evitar repeticiones. El retardo es i * 0.08, creando una cascada visible al entrar la lista en el viewport sin necesidad de staggerChildren de Framer Motion.

   const EASE = [0.16, 1, 0.3, 1] as const;
   
   <motion.div
     initial={{ opacity: 0, x: -16 }}
     whileInView={{ opacity: 1, x: 0 }}
     viewport={{ once: true }}
     transition={{ duration: 0.45, delay: i * 0.08, ease: EASE }}
   >

4. Estilizar con tokens CSS para compatibilidad con temas

   Usa var(--color-background), var(--color-foreground), var(--color-foreground-muted), var(--color-accent), var(--color-accent-subtle) y var(--color-border) en todo el componente. Nunca codifiques valores hex en duro. Esto hace que el componente funcione en los 7 presets de tema sin cambiar una sola prop.

Cuándo usarlo

Esta sección encaja mejor en el medio de una página Sobre nosotros, después de una intro de equipo o misión y antes de los testimonios. Funciona para productos SaaS, agencias y startups que tengan de 4 a 6 hitos significativos que mostrar. Evítala si tu empresa tiene menos de un año y menos de 3 hitos, una timeline escasa se percibe vacía en lugar de humilde. Combínala con about-team-intro arriba y testimonials debajo para lograr el arco narrativo más sólido.

Usado por

• Stripe, Usa una disposición de hitos cronológicos en su página About para construir credibilidad a través de una década de historia de producto.
• Linear, Presenta la historia de la empresa como un relato secuencial con fechas, reforzando el cuidado y la intencionalidad.
• Vercel, Organiza las rondas de financiación y los lanzamientos de producto en una timeline vertical para afianzar la confianza de inversores y desarrolladores.
• Notion, Cuenta la historia de su fundación con hitos fechados por año, dando a la historia del producto un tono humano y editorial.

FAQ