# Ponte aérea Um mapa do mundo feito de pontinhos, com arcos que se desenham entre cidades marcadas por pontos azuis. > Ponte aérea é um componente do THM Componentes que desenha um mapa-múndi de pontinhos em SVG e liga cidades com arcos curvos que se traçam na tela, um depois do outro, com um ponto marcando cada ponta. Basta passar a latitude e a longitude de cada rota. Serve para mostrar filiais, rotas de entrega e alcance internacional. - Categoria: Dados e visualização - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Médio: canvas ou animação contínua; bom para uma seção - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, dotted-map, Motion for Vue - Interação: Nenhuma: o efeito roda sozinho - URL: https://vibecode.thmtecnologia.com/componentes/ponte-aerea/ ## Como ele é Parece um mapa de companhia aérea desenhado com alfinetes. Os continentes são formados por uma trama diagonal de pontinhos, que somem num degradê no alto e embaixo. Ao carregar, os arcos aparecem um a um, a cada meio segundo, e cada um se traça em um segundo, numa curva que sobe acima da linha reta entre os dois pontos. Cada linha tem a cor escolhida e esmaece só nas pontas, onde um ponto azul-claro marca cada cidade. Você escolhe a cor das linhas, dos pontos do mapa e do fundo, que no modo escuro pode ficar preto. ## Você pode estar procurando isto se pediu algo assim - “mapa do mundo com linhas ligando as cidades onde a empresa atua” - “mostrar as rotas de entrega internacionais num mapa animado” - “mapa pontilhado marcando as filiais com pontinhos” - “aquele mapa-múndi de pontinhos que aparece em site de startup” - “seção de alcance global com arcos entre os países” - “mapa bonito para mostrar presença internacional sem precisar de mapa interativo” ## Também chamado de mapa-múndi animado, world map, dotted world map, mapa pontilhado, mapa com rotas, connection map, mapa de alcance global ## Quando usar - Seção de presença internacional, filiais ou escritórios - Página de logística, importação ou viagens com rotas entre cidades - Relatório ou painel que mostra de onde vêm clientes ou acessos - Página de trabalho remoto ou de equipe espalhada pelo mundo ## Quando evitar - Quando a pessoa precisa clicar, ampliar ou consultar locais: o mapa não é interativo - Dados com muitas rotas, que viram um emaranhado de arcos ## Como pedir para a sua IA ```text Crie uma seção com mapa-múndi pontilhado em SVG e arcos animados entre as cidades das nossas filiais, com pontos que pulsam nas pontas, cores do meu tema no claro e no escuro, carregamento só no cliente e mapa estático para movimento reduzido. ``` Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar. ## Perguntas sobre Ponte aérea ### Como coloco minhas cidades em Ponte aérea? Ponte aérea recebe uma lista de rotas, cada uma com latitude e longitude de início e de fim. O componente converte as coordenadas para o mapa, desenha o arco entre os dois pontos e marca as duas pontas. Os rótulos previstos no tipo de dado não aparecem na tela; para mostrar nomes de cidades, peça à IA para acrescentar os textos. ### Ponte aérea deixa a página pesada? A classificação de Ponte aérea no THM Componentes é Médio: o mapa de pontos é gerado em SVG pelo próprio componente, e os arcos se animam uma vez, ao carregar. O componente não usa WebGL. O prompt orienta a IA a carregar só no cliente, com ClientOnly no Nuxt, e a prever uma versão estática. ### Ponte aérea respeita quem prefere menos movimento? Na versão original, Ponte aérea não lê essa preferência: os arcos se desenham um a um sempre que o mapa carrega. O prompt do THM Componentes pede à IA uma versão estática para quem ativa a redução de movimento, que aqui significa mostrar os arcos já completos desde o início. ## Componentes relacionados - [Meridiano](https://vibecode.thmtecnologia.com/componentes/meridiano/): Globo de pontinhos que gira sozinho, com arcos de luz ligando 12 cidades reais pelo mundo. - [Colmeia](https://vibecode.thmtecnologia.com/componentes/colmeia/): Globo azul com países feitos de hexágonos e arcos coloridos que cruzam o planeta, no estilo do GitHub. - [Pangeia](https://vibecode.thmtecnologia.com/componentes/pangeia/): Globo claro de pontinhos com marcadores laranja em grandes cidades, girando devagar e fácil de arrastar. - [Pindorama](https://vibecode.thmtecnologia.com/componentes/pindorama/): As 27 UFs em hexágonos na posição do mapa real, com cor mais forte onde o número é maior. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.