# Pangeia Globo claro de pontinhos com marcadores laranja em grandes cidades, girando devagar e fácil de arrastar. > Pangeia é um componente do THM Componentes que mostra um globo claro e pontilhado, com marcadores laranja em dez grandes cidades, girando devagar. Arrastar para os lados gira o planeta com efeito de mola. Usa uma biblioteca de globo enxuta em WebGL, mais leve que as versões em 3D completo, e serve para mostrar alcance nacional ou internacional. - Categoria: 3D e espaço - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Médio: canvas ou animação contínua; bom para uma seção - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, WebGL, COBE - Interação: Mouse, Toque - URL: https://vibecode.thmtecnologia.com/componentes/pangeia/ ## 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 ```text 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. ## 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. - [Colmeia](https://vibecode.thmtecnologia.com/componentes/colmeia/): Globo azul com países feitos de hexágonos e arcos coloridos que cruzam o planeta, no estilo do GitHub. - [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. - [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. - [Planetário](https://vibecode.thmtecnologia.com/componentes/planetario/): Ícones ou pequenos elementos que giram em círculos ao redor de um centro, como planetas em volta do Sol. --- 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.