Pitch: Mapa Animado na Crom: Uma Atualização Visual Simples que Fez Toda a Diferença - GeoFlowMap
Acabei de implementar uma atualização que estava na minha lista há algum tempo: um mapa interativo animado no background da hero section do site da Crom. O conceito é simples — mostrar visualmente as conexões globais da empresa, com arcos coloridos partindo do Brasil para mais de 35 destinos ao redor do mundo. O mapa faz um tour automático por todos os continentes (América do Sul, EUA, UK, Europa, África, Rússia, China, Austrália e Japão) antes de retornar ao ponto de origem. Parece uma coisa pequena, mas o impacto visual é impressionante. A sensação de movimento e escala global transforma completamente a experiência de quem abre o site.
O que mais me surpreendeu foi a simplicidade da implementação usando a biblioteca CromGeoFlowMap (que eu mesmo desenvolvi baseada no deck.gl e MapLibre). Com cerca de 200 linhas de JavaScript, consegui criar algo que parece muito mais complexo do que realmente é. A câmera usa flyTo() nativo do MapLibre para transições suaves entre os pontos, e os arcos 3D com gradiente de cores dão aquele toque premium. O mapa carrega por último usando requestIdleCallback, então não bloqueia o carregamento inicial da página — performance é prioridade.
Se você também está pensando em usar mapas como elemento visual em seus projetos, aqui vão algumas referências excelentes de designers que fazem isso muito bem: o Stripe Global Network usa mapas para mostrar sua infraestrutura mundial; a SpaceX Starlink tem visualizações impressionantes de satélites em órbita; e o GitHub Globe é praticamente uma obra de arte interativa mostrando atividade open source em tempo real. Para quem quer se aprofundar, recomendo explorar o deck.gl examples e o MapLibre showcase — são fontes infinitas de inspiração para criar visualizações de dados geográficos que vão além do básico.
Aceito feedbacks e recomendações de melhoria. Muito obrigado por ler até aqui e pela força! 🗿🍷
Fonte: https://crom.run/