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
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.
