Como ele é
Imagine um globo feito de milhares de pontinhos, visto de longe e girando devagar. Os pontos mais cheios desenham continentes inventados, plausíveis mas não geográficos, e 12 cidades reais aparecem como pontos maiores que pulsam de leve, com etiquetas de nome que evitam se sobrepor. Arcos finos saem de uma cidade e pousam em outra, mudando de índigo para ciano, com um brilho que percorre o caminho. Ao passar o mouse numa cidade, as linhas dela engrossam e brilham, e as outras ficam mais finas. No tema claro, o globo fica sobre um fundo quase branco com halo lilás; no escuro, sobre azul-noite.
Você pode estar procurando isto se pediu algo assim
- um globo girando com linhas ligando as cidades onde a empresa atua
- mapa-múndi 3D com arcos de conexão para mostrar presença global
- aquele globo de pontinhos com rotas de voo entre países
- mostrar que meu produto funciona no mundo todo, tipo rede de servidores
- globo que eu possa arrastar e que destaque a cidade quando passo o mouse
- seção de parceiros internacionais com um planeta conectado
- algo para o topo do site que mostre escritórios em vários países
Também chamado de
- globo de conexões
- globo 3D interativo
- network globe
- globe with arcs
- arcos de grande círculo
- globo de pontos
- connected cities globe
Quando usar
- Hero de produto ou serviço que atende clientes em vários países
- Página de infraestrutura, rede de servidores ou cobertura de entrega
- Seção de parceiros, filiais ou escritórios internacionais
- Apresentação de expansão para investidores ou imprensa
Quando evitar
- Mapas que precisam de fronteiras e geografia exatas: os continentes são procedurais
- Páginas que já têm outro efeito pesado em WebGL
- Negócios locais, em que um mapa do país ou da cidade comunica mais
Como pedir para a sua IA
Crie um globo 3D de pontos em WebGL no hero da página, com as cidades onde atuamos ligadas por arcos de grande círculo animados, rotação por arrasto com inércia, cores da minha marca, pausa fora da tela e quadro parado para quem prefere menos movimento.
Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Meridiano
Dá para trocar as cidades de Meridiano?
Sim, editando o código. As 12 cidades e as 16 conexões de Meridiano ficam numa lista com nome, latitude e longitude dentro do componente, não em props, e os continentes são procedurais. Peça à IA para substituir essa lista pelas suas cidades; cores, velocidade, densidade de pontos e exibição dos rótulos já são props.
Meridiano funciona no celular?
Funciona. Em Meridiano, arrastar com o dedo gira o globo, e a resolução fica limitada a 2x, com redução automática se os quadros caírem. Como o globo captura o arrasto, deixe espaço fora dele para rolar a página. Por ser um componente Pesado no THM Componentes, o prompt orienta a IA a carregar sob demanda, com fallback estático no Nuxt.
Meridiano respeita quem prefere menos movimento?
Sim. Com a preferência de reduzir movimento ativa, Meridiano mostra um quadro parado: a rotação automática para, os pulsos dos arcos ficam fixos e as cidades deixam de pulsar. A pessoa ainda pode arrastar para girar o globo, e o componente também pausa quando sai da tela.
