01
Composição no lugar de mapas
A hero usa grade, linha de rota e tipografia em vez de um mapa real ou fotografia pesada.
Routebound
Uma experiência de logística feita de direção e ritmo.
Routebound demonstra como layout, tipografia e uma camada de microinterações de rota, incluindo um status de despacho simulado e sensível ao fuso horário, comunicam uma operação real de frete rodoviário nos Estados Unidos sem construir uma plataforma logística de verdade.
Este tour apresenta as decisões que orientaram a experiência, além da interface final.
O desafio
Ancorar o conceito no mercado real de frete rodoviário dos Estados Unidos: regras de jornada da FMCSA e corredores interestaduais recorrentes, onde direção, distância e ritmo de despacho dão nome à identidade Routebound. A rede substitui um cenário genérico e sem lugar, sem depender de fotografia pesada, mapas reais ou simulação de rastreamento.
O objetivo
A experiência usa composição, tipografia e uma camada de interações de rota para transmitir previsibilidade e escala, sem construir uma plataforma logística funcional.
- Ancorar a rede em cinco corredores interestaduais reais dos EUA
- Comunicar direção e previsibilidade
- Substituir fotografia por composição
- Simular um status de despacho sensível ao fuso horário de cada rota
- Manter a leitura objetiva em qualquer rota selecionada
- Funcionar em qualquer tamanho de tela
- Não simular rastreamento real
A jornada do usuário
Uma escolha simples entre rotas aproxima a composição visual de uma leitura concreta de origem, destino e frequência.
Visualizar a rota em destaque na hero
Passar o mouse sobre um corredor para pré-visualizar sem fixar a escolha
Selecionar um corredor entre as cinco opções
Ler distância, trânsito estimado e frequência com os números animando
Acompanhar o status de despacho ao vivo, no horário local da rota
Explorar os indicadores de rede
Seguir para o contato
As principais decisões
A experiência foi mantida direta, sem infraestrutura logística real por trás da interface.
02
Dados locais e previsíveis
Um pequeno conjunto de rotas alimenta a seleção; trocar de rota apenas atualiza conteúdo local.
03
Camadas de microinteração, não ruído
Prévia por hover, contagem numérica e uma linha de rota animada se somam sem competir entre si; o movimento reforça a leitura em vez de distraí-la.
04
Status de despacho com hora local real
O painel calcula 'em trânsito' ou 'próxima saída' a partir do fuso horário de cada corredor (Leste ou Central), usando a API Intl nativa do navegador, sem geolocalização nem serviço externo de horário.
05
Sem simulação de rastreamento
Não há geolocalização, mapas reais ou dados de frota; o status ao vivo é calculado a partir do relógio, não de uma frota real, e os números representam uma rede fictícia.
06
Marca própria em vez de um glifo genérico
O símbolo é um contorno vetorial de chevrons decrescentes desenhado em currentColor, para acompanhar o texto tanto no cabeçalho claro quanto nos painéis escuros sem precisar de uma versão separada para cada contexto.
07
Cores nomeadas como variáveis CSS
As cores, antes fixas em cada componente, viraram variáveis CSS nomeadas — mais fácil de manter e reaproveitar, mesmo sem um alternador de tema: a mistura de hero clara com painéis de dados escuros é uma escolha de identidade, não dois modos alternativos.
O que acontece por trás da interface
Passar o mouse ou selecionar uma rota atualiza os dados locais de origem, destino, distância e frequência, com números que animam até o novo valor. Um relógio calcula continuamente o horário local da rota escolhida (Leste ou Central) para decidir entre 'em trânsito' e 'próxima saída', usando a API Intl do navegador. Tudo acontece no cliente, sem chamadas externas.
Identidade B2B ancorada no mercado americano, composição editorial de rotas e camadas de microinteração: prévia por hover, contagem animada e um status de despacho ao vivo sensível a fuso horário.
Acessibilidade e experiência
A seleção de rota é navegável por teclado, com foco visível e estados de seleção anunciados com clareza.
- Seleção de rota por teclado
- Foco visível em cada estado
- Contraste alto sobre fundo claro
- Movimento reduzido respeitado
- Hierarquia clara entre hero, rotas e rede
- Leitura direta em qualquer ordem
Responsividade
No mobile, rota, métricas e seleção se empilham em uma leitura única; no desktop, a infraestrutura visual ganha espaço lateral e a rota permanece legível.
Qualidade demonstrada
O conceito comunica uma operação de transporte terrestre por meio de composição, tipografia e camadas de microinteração, sem construir a infraestrutura logística real.
- Identidade visual própria (marca, tipografia, ilustração)
- Identidade visual B2B ancorada no mercado americano
- Composição sem fotografia pesada
- Camadas de microinteração de rota (prévia, contagem, status ao vivo)
- Indicadores de rede ilustrativos
- Responsividade completa
- Acessibilidade e performance
- Conteúdo corporativo localizado
O padrão aplicado ao projeto
A demonstração parte de princípios que tornam uma experiência digital mais útil, confiável e confortável de usar.
- Experiência clara
- Funcionamento em diferentes tamanhos de tela
- Navegação por teclado
- Feedback após as ações
- Conteúdo localizado
- Comportamento previsível
- Ausência de complexidade desnecessária
- Transparência sobre os limites da demonstração
Detalhes técnicos
Implementação em foco
- A seleção de rota combina um estado "fixado" (clique) e um estado de "prévia" (hover ou foco), sem perder a escolha ao tirar o mouse.
- Distância e trânsito animam com uma curva de easing calculada via requestAnimationFrame, respeitando prefers-reduced-motion.
- O status de despacho recalcula o horário local de cada rota (Leste ou Central) com a API Intl.DateTimeFormat nativa, sem biblioteca de fuso horário nem chamada externa, atualizando a cada segundo.
- A rota de segunda a sexta é tratada como caso à parte no cálculo, avançando para o próximo dia útil sem contar sábado ou domingo.
- O movimento ao longo da linha de rota reaproveita a mesma animação CSS já construída para a hero, sem bibliotecas de animação pesadas.
- O relógio de despacho vive em um componente-folha próprio, que re-renderiza sozinho a cada segundo: a lista de rotas e os contadores animados não são mais afetados pelo tick.
- A região de leitura em voz alta (aria-live) só anuncia uma seleção confirmada por clique ou teclado, não mais o preview por hover ou foco, que antes reanunciava a cada passagem do mouse.
- O símbolo é um único caminho vetorial em currentColor, compartilhado entre a página do projeto e o card do portfólio — antes cada um tinha sua própria versão, e a do card estava incompleta.
- A tipografia condensada dos títulos é auto-hospedada via next/font/local, seguindo a política de segurança de conteúdo do site.
- A ilustração do corredor na seção de janela de partida usa as mesmas variáveis de cor dos outros elementos, então nunca precisa de ajuste manual se a paleta mudar.
- O conteúdo de cada idioma permanece em arquivos dedicados, com rotas equivalentes para a demonstração.
O que esta demonstração não faz
A experiência ilustra uma identidade de transporte terrestre, sem se apresentar como uma plataforma logística real.
- Não rastreia cargas reais
- Não integra com transportadoras
- Não usa mapas ou geolocalização
- O status "em trânsito" é uma simulação de horário local, não uma leitura de GPS ou telemetria real
- Não considera feriados: a rota de segunda a sexta ainda trata um feriado como dia útil
- Não substitui um sistema de gestão logística
- Apresenta apenas rotas e indicadores ilustrativos
Acessar o projeto
Explore a identidade Routebound, o seletor de rota com prévia por hover e o status de despacho que muda de acordo com o horário local de cada corredor.
Ver projetoPróximo projeto
Volte ao início da sequência para ver uma jornada de agendamento desenhada com o mesmo cuidado de clareza.
Explorar próximo projeto: Três Grãos