Como ele é
Parece um globo de mesa feito de pontinhos, girando devagar sobre o próprio eixo. A esfera é clara, os continentes surgem de milhares de pontos e dez marcadores laranja, de tamanhos diferentes, marcam cidades como São Paulo, Nova York, Mumbai e Cairo. Um brilho branco contorna a borda. Ao carregar, o globo aparece aos poucos, em cerca de um segundo. Ao arrastar para o lado, ele acompanha a mão com efeito de mola e, ao soltar, continua girando. Na demonstração, metade do globo surge da borda de baixo de um cartão, logo abaixo de uma palavra grande em degradê.
Você pode estar procurando isto se pediu algo assim
- um globo girando simples e leve para mostrar onde atendemos
- planeta pontilhado com marcadores nas cidades
- globo que surge da parte de baixo da seção, tipo site de startup
- mapa-múndi redondo girando embaixo do título
- globo 3D que não deixe a página pesada
- mostrar alcance nacional com um planeta que dá para arrastar
Também chamado de
- globo pontilhado
- dotted globe
- globo girando
- rotating globe
- globo interativo
- globo WebGL leve
- world globe
Quando usar
- Seção de alcance nacional ou internacional sem pesar a página
- Hero de SaaS ou de startup com o título acima do globo
- Página de números da empresa, como países ou cidades atendidas
Quando evitar
- Quando é preciso mostrar rotas ou conexões entre cidades: o componente só tem marcadores
- Fundos escuros, sem ligar o modo escuro nas opções do globo
Como pedir para a sua IA
Crie um globo pontilhado leve em WebGL para a seção de alcance, girando devagar, com marcadores nas cidades onde atendemos e arrasto com efeito de mola. Use as cores da minha marca, pause fora da tela e deixe o globo parado 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 Pangeia
Dá para mudar os marcadores e as cores de Pangeia?
Sim. A prop config de Pangeia aceita as opções da biblioteca de globo: lista de marcadores com latitude, longitude e tamanho, cor da base, dos marcadores e do brilho, modo escuro, quantidade de pontos e brilho do mapa. As props mass, tension e friction ajustam a mola do arrasto.
Pangeia é mais leve que os outros globos?
Tem peso Médio no THM Componentes, abaixo de Colmeia e de Meridiano, que têm peso Pesado. Pangeia usa uma biblioteca enxuta, feita só para globos. Ainda assim é WebGL, e o prompt orienta a IA a carregar sob demanda, prever um fallback estático no Nuxt e comparar LCP e INP no celular.
Pangeia respeita quem prefere menos movimento?
O componente original gira sempre. O prompt do THM Componentes pede à IA uma versão estática para quem ativa a redução de movimento no sistema, o que em Pangeia é simples: basta não somar a rotação automática a cada quadro e manter só o arrasto.
