Como ele é
Pense num planeta visto do espaço numa apresentação de tecnologia. A esfera tem uma cor sólida, roxo-escuro por padrão e azul na demonstração, e os países aparecem como mosaicos de hexágonos brancos bem pequenos. Um halo claro envolve a borda. Arcos finos de várias cores sobem de um ponto, cruzam o céu em tracejados que se movem e pousam em outro, em sequência. Ao arrastar, o globo gira com um leve deslize, mas não aproxima nem vira de ponta-cabeça. Na demonstração, ele começa sobre a Ásia e gira sozinho.
Você pode estar procurando isto se pediu algo assim
- aquele globo do GitHub com linhas coloridas saindo dos países
- globo 3D girando com arcos entre cidades para a página inicial
- mostrar de onde vêm os usuários do meu app num planeta
- planeta com países pontilhados e conexões animadas
- globo interativo para a seção de alcance mundial
- mapa-múndi em 3D com rotas brilhantes, estilo startup
Também chamado de
- globo do GitHub
- github globe
- globo 3D com arcos
- hex globe
- globo de hexágonos
- 3D globe arcs
- globe visualization
Quando usar
- Hero de produto digital com usuários em vários países
- Seção de alcance global, comunidade ou rede de clientes
- Página de estatísticas de uso com rotas entre regiões
- Apresentação de expansão internacional
Quando evitar
- Páginas que precisam carregar muito rápido: depende do Three.js e de uma extensão de globo
- Páginas que já têm outro efeito pesado em WebGL
- Quando o mapa precisa de cidades nomeadas ou de dados clicáveis
Como pedir para a sua IA
Crie um globo 3D em Three.js no estilo do GitHub para a seção de alcance global: países em hexágonos, atmosfera e arcos animados entre as cidades dos meus clientes. Use as cores da minha marca, pause fora da tela e mostre uma imagem parada para quem prefere menos movimento.
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 Github Globe
O Github Globe precisa de dados de mapa?
Precisa. O Github Globe desenha os países a partir de um arquivo GeoJSON, que a documentação orienta a baixar e salvar como globe.json na pasta do componente. Os arcos vêm da prop data, com latitude e longitude de início e fim, altura, cor e ordem de disparo.
Dá para trocar as cores do Github Globe?
Sim, pela prop globeConfig: cor do globo, dos hexágonos, da atmosfera e das luzes, brilho do material, duração e comprimento dos arcos, posição inicial e rotação automática. Cada arco do Github Globe tem a própria cor na prop data. O prompt do THM Componentes orienta a IA a usar os tokens de cor do projeto.
O Github Globe respeita quem prefere menos movimento?
O componente original não trata essa preferência: os arcos se animam sempre e o globo gira se a rotação automática estiver ligada. O prompt do THM Componentes pede à IA uma versão estática para quem reduz movimento e que a animação do Github Globe pause fora da tela.
