# Constelação Milhares de pontos coloridos ligados por fios que se organizam sozinhos em grupos, com busca e zoom até cada nó. > Constelação é um componente exclusivo do THM Componentes que desenha um grafo de conhecimento com 10 mil nós e 20 mil arestas, organizado por uma simulação de forças na placa de vídeo com WebGL2. Tem busca com voo de câmera, destaque da vizinhança, nós fixáveis e filtro por comunidade. Sem WebGL2, simula em CPU com menos nós. - Categoria: Aplicações e produtividade - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Pesado: WebGL ou simulação; um por página, carregado sob demanda - Tecnologia: Vue 3, TypeScript, WebGL - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/constelacao/ ## Como ele é Parece uma constelação vista de cima: milhares de pontos coloridos, um tom para cada comunidade, ligados por fios finos e translúcidos. Ao abrir, a rede se espalha e se acomoda sozinha em aglomerados, enquanto um selo no topo mostra o progresso até ficar estável. Os nós mais conectados são maiores e ganham rótulo. Passar o mouse sobre um ponto acende os vizinhos e mostra um balão com nome, grupo e número de conexões. Clicar abre um cartão com as principais ligações e o botão de fixar. A busca no topo faz a câmera voar até o nó. O fundo padrão é quase branco. ## Você pode estar procurando isto se pediu algo assim - “aquele grafo de pontos ligados tipo o do Obsidian para o meu site” - “mapa de conexões entre pessoas, projetos e empresas que dá para explorar” - “rede de nós que se organiza sozinha e mostra os grupos por cor” - “visualizar a base de conhecimento do meu agente de IA como uma rede” - “grafo com milhares de pontos que não trave o navegador” - “buscar um item e a tela dar zoom até ele no meio da rede” - “mostrar o ecossistema de parceiros como uma teia interativa” ## Também chamado de grafo de forças, force-directed graph, grafo de conhecimento, knowledge graph, network graph, visualização de redes, graph visualization ## Quando usar - Mapas de ecossistemas de inovação, com empresas, pessoas, projetos e editais - Bases de conhecimento de agentes de IA, para mostrar o que está ligado a quê - Análise de redes em painéis de pesquisa, inteligência ou relacionamento - Seções de destaque que querem mostrar escala e conexões de forma explorável ## Quando evitar - Hierarquias simples, como organogramas, que ficam mais claras em árvore - Páginas que já têm outro efeito WebGL pesado - Aparelhos sem WebGL2, em que o modo CPU limita o grafo a 2.500 nós por padrão ## Como pedir para a sua IA ```text Crie um grafo de conhecimento interativo com simulação de forças na GPU para mapear o ecossistema da minha plataforma: cores por comunidade, busca com voo de câmera, vizinhança no hover, nós fixáveis, modo CPU quando não houver WebGL2, pausa fora da tela e uma tabela oculta para leitores de tela. ``` 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 Constelação ### Constelação funciona sem WebGL2? Funciona. Se o aparelho não tiver WebGL2 com render em float, Constelação troca automaticamente para uma simulação em CPU desenhada com Canvas 2D e as mesmas fórmulas, limitada a 2.500 nós por padrão pela prop cpuLimit. O selo no topo mostra qual modo está ativo. ### Posso usar meus próprios dados em Constelação? Pode. Passe nodes com id, rótulo e grupo e edges com origem e destino; Constelação colore por grupo, calcula quantas conexões cada nó tem e emite eventos ao selecionar ou fixar. Sem dados, o componente gera uma rede de demonstração com hubs, 10 mil nós e 12 comunidades a partir de uma semente. ### Constelação respeita quem prefere menos movimento? Sim. Com a preferência de movimento reduzido ativa, Constelação calcula o layout sem mostrar os quadros intermediários e exibe a rede já estável, e a câmera pula direto para o destino em vez de voar. A simulação também para quando o grafo sai da tela. ## Componentes relacionados - [Ipê](https://vibecode.thmtecnologia.com/componentes/ipe/): Ideia central no meio e ramos coloridos em curvas que você cria com Tab e Enter, arrasta e recolhe. - [Linhagem](https://vibecode.thmtecnologia.com/componentes/linhagem/): Organograma que se monta sozinho em árvore, com equipes que abrem e fecham e busca que mostra o caminho até a pessoa. - [Engenhoca](https://vibecode.thmtecnologia.com/componentes/engenhoca/): Quadro infinito em que você liga caixas por fios para montar automações e vê o fluxo rodar com pulsos de luz. - [Aqueduto](https://vibecode.thmtecnologia.com/componentes/aqueduto/): Faixas curvas que mostram para onde vai cada parte de um total, com pontinhos correndo na proporção do volume. - [Meridiano](https://vibecode.thmtecnologia.com/componentes/meridiano/): Globo de pontinhos que gira sozinho, com arcos de luz ligando 12 cidades reais pelo mundo. --- 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.