# Colmeia

Globo azul com países feitos de hexágonos e arcos coloridos que cruzam o planeta, no estilo do GitHub.

> Colmeia é um componente do THM Componentes que desenha, em Three.js, um globo 3D no estilo do GitHub: países feitos de pequenos hexágonos, halo de atmosfera e arcos coloridos que viajam entre pares de coordenadas. A pessoa arrasta para girar, e a rotação automática é opcional. Serve para mostrar presença geográfica ou uma rede de usuários.

- Categoria: 3D e espaço
- Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM
- Peso no carregamento: Pesado: WebGL ou simulação; um por página, carregado sob demanda
- Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, WebGL, postprocessing, Three.js, three-globe
- Interação: Mouse, Toque
- URL: https://vibecode.thmtecnologia.com/componentes/colmeia/

## 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 da página 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 estilo GitHub, globo com rotas animadas, 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

```text
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 Colmeia

### Colmeia precisa de dados de mapa?

Precisa. Colmeia 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 de Colmeia?

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 de Colmeia tem a própria cor na prop data. O prompt do THM Componentes orienta a IA a usar os tokens de cor do projeto.

### Colmeia 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 de Colmeia pause fora da tela.

## 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.
- [Pangeia](https://vibecode.thmtecnologia.com/componentes/pangeia/): Globo claro de pontinhos com marcadores laranja em grandes cidades, girando devagar e fácil de arrastar.
- [Ponte aérea](https://vibecode.thmtecnologia.com/componentes/ponte-aerea/): Um mapa do mundo feito de pontinhos, com arcos que se desenham entre cidades marcadas por pontos azuis.
- [Firmamento](https://vibecode.thmtecnologia.com/componentes/firmamento/): Céu noturno com estrelas de três tamanhos subindo devagar e se deslocando de leve quando o mouse passa.
- [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.