CADA MILLABAJO CONTROL.

Experiencia digital de logística · proyecto conceptual

Un sitio de logística suele ser un catálogo de servicios con fotos de banco. La pieza lo invierte: mostrar cómo una carga atraviesa una red global — origen, tierra, puerto, océano, aire, destino — en una sola página, sin cliente, sin operador y sin ninguna afirmación de negocio.

• 01Una sola landing (más 404 y error boundary) en Next.js 16 con App Router, React 19, Tailwind 4, GSAP ScrollTrigger y Lenis. Ocho secciones e…+

  LEER EL DETALLE TÉCNICO

  Una sola landing (más 404 y error boundary) en Next.js 16 con App Router, React 19, Tailwind 4, GSAP ScrollTrigger y Lenis. Ocho secciones en anclas — Hero, Concept, Journey, Altitude, Network, Capabilities, System, End of route — y un HUD fijo con la columna de navegación y una retícula de cursor solo para puntero fino. La regla visual que unifica todo es la cámara cenital: cada objeto documentado a 90°, la misma flota de recortes ortográficos (pallet, contenedores, camión, barco, avión) atravesando toda la pieza, un ritmo tonal entre papel cálido y grafito azulado y un único acento naranja. Toda la copy vive en dos archivos de contenido (logistics.ts y journey.ts), cada etapa del viaje con su propia frase: ninguna se repite y ninguna describe un catálogo de servicios — cada una dice qué le está pasando a la carga en ese punto de la ruta.

• 02Las secuencias controladas por el scroll no son video: son frames AVIF dibujados en un <canvas>, con el índice tomado directamente del progr…+

  LEER EL DETALLE TÉCNICO

  Las secuencias controladas por el scroll no son video: son frames AVIF dibujados en un <canvas>, con el índice tomado directamente del progreso (round(progress × (n − 1))). La decisión fue medida, no estética: la versión anterior, con ocho clips en <video>, bajó el Lighthouse mobile de 87 a 73 — no por LCP, sino por 390 ms de TBT, la decodificación de video en el main thread. La secuencia del barco (la cámara sube de la cubierta hasta que la ruta se vuelve sistema) tiene 72 frames en desktop, porque dos pantallas de scroll a ~25 px por frame es el límite por debajo del cual el movimiento se vuelve escalonado, y 48 en el móvil, con composición propia (el barco sube el cuadro en vertical) en vez de un recorte del desktop. Solo los frames alrededor del índice actual quedan en memoria; el fallback es el póster del primer frame y el reduced-motion muestra un único frame editorial sin descargar la secuencia. El video quedó reservado a los dos loops cortos que no dependen del scroll (el puerto al anochecer y las puertas del contenedor abriéndose al final), cargados solo cerca del viewport.

• 03El globo del hero es Three.js vía React Three Fiber, pero no cuesta nada en la carga: un póster estático renderizado desde el propio compone…+

  LEER EL DETALLE TÉCNICO

  El globo del hero es Three.js vía React Three Fiber, pero no cuesta nada en la carga: un póster estático renderizado desde el propio componente es el LCP, y el WebGL solo se monta en la primera interacción. La ruta — origen, hub y destino — es la misma en el globo (arcos), en el preloader (la silueta de las Américas) y en la sección Network (proyección Natural Earth vía d3-geo, con el trazado dibujándose por MotionPath): tres nodos con códigos de instrumento y coordenadas redondeadas, sin nombre de ciudad. La regla más dura del proyecto es editorial y está bloqueada por tests: ninguna afirmación de empresa. Años, países, conteo de envíos, porcentajes, certificaciones y testimonios tumban la suite (Vitest + Testing Library, 55 tests, incluida una revisión del repositorio entero contra la marca del cliente anterior — la pieza nació como sitio comercial y fue completamente desvinculada). Todo número que aparece en la página describe la propia experiencia: tres modales, siete etapas, setenta y dos frames.

CONSTRUIDO CON — Next.js 16 · React 19 · TypeScript · Tailwind 4 · GSAP ScrollTrigger · Lenis · Three.js / R3F · Canvas

07 etapas · 03 modales · 72 frames

PROYECTO CONCEPTUAL · EN LÍNEA

[ QUIERO ALGO PARECIDO ]