CADA MILHASOB CONTROLE.

Experiência digital de logística · projeto conceitual

Um site de logística costuma ser um catálogo de serviços com fotos de banco de imagens. A peça inverte: mostrar como uma carga atravessa uma rede global — origem, terra, porto, oceano, ar, destino — numa única página, sem cliente, sem operador e sem nenhuma alegação de negócio.

• 01Uma landing só (mais 404 e error boundary) em Next.js 16 com App Router, React 19, Tailwind 4, GSAP ScrollTrigger e Lenis. Oito seções em ân…+

  LER O DETALHE TÉCNICO

  Uma landing só (mais 404 e error boundary) em Next.js 16 com App Router, React 19, Tailwind 4, GSAP ScrollTrigger e Lenis. Oito seções em âncoras — Hero, Concept, Journey, Altitude, Network, Capabilities, System, End of route — e um HUD fixo com a espinha da navegação e um retículo de cursor só para ponteiro fino. A regra visual que unifica tudo é a câmera vista de cima: cada objeto documentado de 90°, a mesma frota de recortes ortográficos (pallet, contêineres, caminhão, navio, avião) atravessando a peça inteira, um ritmo tonal entre papel quente e grafite azulado e um único acento laranja. Toda a copy mora em dois arquivos de conteúdo (logistics.ts e journey.ts), cada etapa da jornada com frase própria: nenhuma se repete e nenhuma descreve catálogo de serviços — cada uma diz o que está acontecendo com a carga naquele ponto da rota.

• 02As sequências controladas pelo scroll não são vídeo: são frames AVIF desenhados num <canvas>, com o índice vindo direto do progresso (round(…+

  LER O DETALHE TÉCNICO

  As sequências controladas pelo scroll não são vídeo: são frames AVIF desenhados num <canvas>, com o índice vindo direto do progresso (round(progress × (n − 1))). A decisão foi medida, não estética: a versão anterior, com oito clipes em <video>, derrubou o Lighthouse mobile de 87 para 73 — não por LCP, mas por 390 ms de TBT, a decodificação de vídeo na main thread. A sequência do navio (a câmera sobe do convés até a rota virar sistema) tem 72 frames no desktop, porque duas telas de scroll a ~25 px por frame é o limite abaixo do qual o movimento vira escadinha, e 48 no celular, com composição própria (o navio sobe o quadro na vertical) em vez de um corte do desktop. Só os frames em volta do índice atual ficam em memória; o fallback é o poster do primeiro frame e o reduced-motion mostra um único frame editorial sem baixar a sequência. Vídeo ficou reservado aos dois loops curtos que não dependem do scroll (o porto ao anoitecer e as portas do contêiner abrindo no fim), carregados só perto da viewport.

• 03O globo do hero é Three.js via React Three Fiber, mas não paga no carregamento: um poster estático renderizado a partir do próprio component…+

  LER O DETALHE TÉCNICO

  O globo do hero é Three.js via React Three Fiber, mas não paga no carregamento: um poster estático renderizado a partir do próprio componente é o LCP, e o WebGL só monta na primeira interação. A rota — origem, hub e destino — é a mesma no globo (arcos), no preloader (a silhueta das Américas) e na seção Network (projeção Natural Earth via d3-geo, com o traçado se desenhando por MotionPath): três nós com códigos de instrumento e coordenadas arredondadas, sem nome de cidade. A regra mais dura do projeto é editorial e está travada por teste: nenhuma alegação de empresa. Anos, países, contagem de remessas, percentuais, certificações e depoimentos derrubam a suíte (Vitest + Testing Library, 55 testes, incluindo uma varredura do repositório inteiro contra a marca do cliente anterior — a peça nasceu como site comercial e foi completamente desassociada). Todo número que aparece na página descreve a própria experiência: três modais, sete etapas, setenta e dois frames.

CONSTRUÍDO COM — Next.js 16 · React 19 · TypeScript · Tailwind 4 · GSAP ScrollTrigger · Lenis · Three.js / R3F · Canvas

07 etapas · 03 modais · 72 frames

PROJETO CONCEITUAL · NO AR

[ QUERO ALGO PARECIDO ]