Anatomía

La sección centra un contenedor max-w-4xl con un bloque de encabezado (badge opcional, título h2, párrafo de subtítulo) y luego el cuerpo de la timeline. Este cuerpo es un div relative: una regla vertical de 1px recorre toda su altura (posicionada de forma absoluta en left-4 en móvil, left-1/2 en desktop). Dentro, las filas de hitos alternan mediante un flag isLeft (índice par = tarjeta a la izquierda, impar = derecha). Cada fila contiene un dot de acento centrado sobre la regla y una tarjeta de texto limitada al 50% de anchura en desktop.

Cómo funciona

Cada tarjeta de hito es un motion.div con initial={{ opacity: 0, y: 24 }} y whileInView={{ opacity: 1, y: 0 }}. El prop viewport usa once: true para que la animación solo se dispare una vez, y margin: '-60px' para que la tarjeta empiece a animarse justo antes de ser plenamente visible. El retardo de transición es i * 0.08 segundos, así los elementos que entran al viewport al mismo tiempo igual se encadenan de forma legible. El bloque de encabezado usa una variante algo más simple (y: 20, sin retardo) para asentarse antes de que entre el cuerpo de la timeline.

Cómo crearlo en React

1. Define la forma de tus datos de hitos

   Empieza con una interface tipada para cada hito: una cadena year, un title y una description. Mantén el array en mock.ts para que el componente siga siendo puramente presentacional. Pásalo como prop obligatorio llamado milestones.

   interface MilestoneItem {
     year: string;
     title: string;
     description: string;
   }

2. Dibuja la regla vertical

   Envuelve la lista de hitos en un div relative, luego coloca un div de 1px posicionado de forma absoluta de top-0 a bottom-0. Usa left-4 por defecto y md:left-1/2 para que se desplace al centro en desktop. Márcalo con aria-hidden para que los lectores de pantalla lo ignoren.

   <div
     className="absolute left-4 top-0 bottom-0 w-px md:left-1/2"
     style={{ backgroundColor: "var(--color-border)" }}
     aria-hidden
   />

3. Alterna las tarjetas y añade el dot

   Para cada hito, calcula isLeft = i % 2 === 0. El div de la tarjeta recibe md:w-[calc(50%-2rem)] más md:mr-auto md:text-right md:pr-8 (lado izquierdo) o md:ml-auto md:pl-8 (lado derecho). El dot es un círculo posicionado de forma absoluta en left-2 en móvil, md:left-1/2 md:-translate-x-1/2 en desktop, por encima de la regla gracias a z-10.

   const isLeft = i % 2 === 0;
   // card
   className={`md:w-[calc(50%-2rem)] ${
     isLeft ? "md:mr-auto md:text-right md:pr-8" : "md:ml-auto md:pl-8"
   }`}

4. Conecta las animaciones al scroll

   Envuelve cada fila de hito en un motion.div. Ajusta initial a opacity 0 e y 24, whileInView a opacity 1 e y 0, luego pasa viewport={{ once: true, margin: '-60px' }}. Calcula el retardo como i * 0.08 para que los elementos se escalonen de forma natural incluso cuando entran juntos al viewport.

   <motion.div
     initial={{ opacity: 0, y: 24 }}
     whileInView={{ opacity: 1, y: 0 }}
     viewport={{ once: true, margin: "-60px" }}
     transition={{ delay: i * 0.08, duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
   >

Cuándo usarlo

Úsala en páginas Acerca de, secciones de historia de marca o relatos de lanzamiento de producto donde quieras transmitir un crecimiento a lo largo del tiempo. Funciona para cualquier empresa con cuatro hitos o más; por debajo de eso, una lista con viñetas se lee más rápido. Evítala en páginas centradas en conversión donde el desplazamiento compite con un CTA, y descarta la disposición alternada en timelines con mucha densidad de datos donde la legibilidad prima sobre el ritmo visual.

Usado por

• Stripe, Usa una timeline de hitos vertical en su página Acerca de para narrar la historia de la empresa año tras año.
• Notion, Presenta la historia de su fundación como una timeline desplazable con bloques de texto alternados.
• Linear, Se apoya en un diseño de hitos apilado y limpio para comunicar su hoja de ruta y su historia.

FAQ