Anatomía

El `<section>` exterior es el objetivo del scroll; su altura se calcula a partir del número de pasos para que cada paso ocupe una altura de viewport. Dentro, un div `position: sticky` se fija a la parte superior del viewport en todo momento y ocupa toda la pantalla. Ese div sticky contiene una cuadrícula de dos columnas: la columna izquierda lleva el título, el subtítulo y una lista de tarjetas de paso; la columna derecha es un SVG de 280px que dibuja un anillo decorativo exterior, un círculo de pista y un arco de progreso animado. Los marcadores de paso (puntos de 8px en el anillo exterior) pasan del color de borde al color de acento a medida que avanza el scroll.

Cómo funciona

useScroll recibe la ref de la sección y un offset `['start start', 'end end']`, produciendo un scrollYProgress de 0 a 1 que cubre todo el contenedor. useTransform mapea ese valor a strokeDashoffset: la circunferencia del círculo (2πr con r=54) se convierte en el dashoffset inicial y decrementa hasta 0 a medida que la página se desplaza. Un segundo useTransform convierte el mismo rango 0-1 en un porcentaje de 0 a 100 mostrado en el centro del anillo. El resaltado de pasos usa otro useTransform que mapea linealmente la fracción de scroll a un índice de paso, luego cada tarjeta comprueba si Math.round(currentIndex) coincide con su propio índice para alternar la opacidad, el color de borde y el fondo.

Cómo crearlo en React

1. Configurar el contenedor de scroll y el viewport sticky

   Da a la sección exterior una altura proporcional al número de pasos para que cada paso tenga su propia ventana de scroll. Anida dentro un div `position: sticky; top: 0; height: 100vh`, este es el único elemento que el usuario ve.

   const sectionRef = useRef<HTMLElement>(null);
   // 100vh per step, min 200vh
   const sectionHeight = `${Math.max(200, steps.length * 100)}vh`;

2. Conectar el progreso del scroll al arco SVG

   Pasa la ref de la sección a useScroll con el offset `['start start', 'end end']`. Convierte scrollYProgress en strokeDashoffset usando la circunferencia completa como valor inicial. Aplica la motion value directamente sobre un elemento motion.circle.

   const { scrollYProgress } = useScroll({
     target: sectionRef,
     offset: ["start start", "end end"],
   });
   const circumference = 2 * Math.PI * 54;
   const progressOffset = useTransform(
     scrollYProgress,
     [0, 1],
     [circumference, 0]
   );
   // In JSX:
   // <motion.circle style={{ strokeDashoffset: progressOffset }} ... />

3. Mapear la fracción de scroll al paso activo

   useTransform puede mapear un array de valores de entrada a un array de valores de salida. Aliméntalo con fracciones espaciadas de forma uniforme (una por paso) y los índices de paso correspondientes. Cada tarjeta deriva entonces su estado activo con Math.round.

   const currentStepIndex = useTransform(
     scrollYProgress,
     steps.map((_, i) => i / steps.length),
     steps.map((_, i) => i),
   );
   // Per card:
   const isActive = useTransform(currentStepIndex, (v) => Math.round(v) === i);

4. Animar las tarjetas de paso con motion values derivadas

   Pasa isActive (un MotionValue<boolean>) por nuevas llamadas a useTransform para obtener opacity, color de borde y color de fondo. Aplícalos como estilos motion inline en cada tarjeta, sin re-renders, todo gestionado en el hilo de animación.

   <motion.div
     style={{
       opacity: useTransform(isActive, (v) => (v ? 1 : 0.35)),
       borderLeftColor: useTransform(isActive, (v) =>
         v ? "var(--color-accent)" : "var(--color-border)"
       ),
     }}
   >

Cuándo usarlo

Recurre a este patrón en las landing pages de producto que necesitan explicar un proceso de varios pasos sin muros de texto, flujos de onboarding, explicaciones de funcionalidades SaaS, guías de instalación. Funciona mejor con 3 a 5 pasos; menos pasos desaprovechan el espacio de scroll, más pasos hacen el contenedor incómodamente alto en móvil. Evítalo en las páginas centradas en la conversión donde importa la fricción del scroll hacia el CTA, y en las páginas donde los usuarios llegan a mitad del scroll desde enlaces de ancla (el anillo de progreso quedará en un estado inesperado).

Usado por

• Stripe, Usa secciones sticky con progresión paso a paso para explicar los flujos de pago y el onboarding de desarrolladores.
• Notion, Emplea secuencias de pasos bloqueadas al scroll en sus páginas de producto para guiar la configuración de un espacio de trabajo.
• Linear, Recorridos de funcionalidades guiados por el scroll que resaltan cada capacidad a medida que el usuario avanza por la sección de marketing.
• Lottie by LottieFiles, Animaciones controladas por el scroll ligadas al progreso de la página para demostrar paso a paso cómo funciona su formato de animación.

FAQ