CADA MILHASOB CONTROLE.

CONTEXTO

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.

O QUE FOI FEITO

Uma câmera vista de cima como regra da direção de arte: globo pontilhado com arcos origem → hub → destino, esteira sticky com sete etapas e a mesma frota de recortes ortográficos, sequência de 72 frames AVIF em canvas controlada pelo scroll, rota que se desenha sobre o mapa técnico e reduced-motion em todas as cenas.

07 ETAPAS · 03 MODAIS · 72 FRAMES

SOLUÇÕES

• Câmera vista de cima

  Uma regra visual para a página inteira: cada objeto documentado de 90°, a mesma frota de recortes ortográficos atravessando todas as seções.

• 72 frames em canvas

  Sequência AVIF desenhada em <canvas> com o índice vindo do scroll — decidido depois de medir que oito clipes em <video> custavam 390 ms de TBT no mobile.

• Globo sob demanda

  Three.js/R3F só monta na primeira interação; o LCP é um poster renderizado a partir do próprio componente.

• Zero alegação de negócio

  Anos, países, remessas, percentuais e depoimentos derrubam a suíte de testes. Todo número na página descreve a experiência, nunca uma operação.

DETALHE TÉCNICO

• 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…+

  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(…+

  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…+

  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.

TELAS

RESULTADO

Uma câmera vista de cima como regra da direção de arte: globo pontilhado com arcos origem → hub → destino, esteira sticky com sete etapas e a mesma frota de recortes ortográficos, sequência de 72 frames AVIF em canvas controlada pelo scroll, rota que se desenha sobre o mapa técnico e reduced-motion em todas as cenas.

Sem cliente, sem operador, sem alegação de negócio: todo número descreve a experiência.

QUERO ALGO PARECIDO ↗ABRIR SITE ↗