Scroll driven, todo

---

title: "Scroll driven, todo" date: "2026-05-30" summary: "Por qué este portafolio usa secciones pinned y useScroll para casi toda animación — y dónde ese patrón se rompe."

Cada sección de este sitio tiene una relación distinta con la rueda del scroll.

• El dot mesh del hero se inclina y se desvanece según el progreso del scroll mientras un loop de Lenis suaviza la inercia.
• La sección about se pina y revela párrafos en thresholds de progreso.
• Skills se mueve horizontalmente conforme cada fila entra y sale del viewport.
• Projects se pina y hace crossfade carta a carta.
• Journey se pina y traslada un track horizontal.

Son muchas llamadas a useScroll.

Por qué pinned

Las animaciones reveal-on-enter están bien para documentos. Son un mal fit para un portafolio que quiere sentirse como una experiencia diseñada. Pinear una sección te deja reutilizar un viewport de atención para una pequeña historia: el usuario mira una vez, y conforme hace scroll cambias lo que está viendo.

El costo: gastas presupuesto de scroll. Una sección sticky de 200vh come 100vh "extra". Usa muchas y el sitio empieza a sentirse como un pitch infinito.

Dónde se rompe

• Touch devices. Las secciones pinned funcionan, pero la velocidad percibida es más jankier sin smooth-scroll, y el vocabulario de gestos es diferente.
• Reduced motion. Cualquiera con prefers-reduced-motion: reduce necesita una versión plana. Constrúyela desde el día uno — no la pegues después.
• Scroll por teclado. Las flechas saltan en bloques de ~100px. Tab dentro de una sección pinned puede teletransportar el foco fuera. Prueba con teclado pronto.

El patrón es genial cuando cada sección pinned se gana su lugar. Cuando dudes, lanza la versión normal.