# Constelação Thousands of colored dots linked by threads that arrange themselves into clusters, with search and zoom to any node. > Constelação is an exclusive THM Componentes component that draws a knowledge graph with 10,000 nodes and 20,000 edges, laid out by a force simulation running on the graphics card with WebGL2. It has search with camera flights, neighbor highlighting, pinnable nodes and community filters. Without WebGL2, it simulates on the CPU with fewer nodes. - Category: Apps and productivity - Origin: THM exclusive, built by THM Tecnologia Inteligente; the prompt includes the full source code - Load weight: Heavy: WebGL or simulation; one per page, loaded on demand - Technology: Vue 3, TypeScript, WebGL - Interaction: Mouse, Touch, Keyboard - URL: https://vibecode.thmtecnologia.com/en/components/constelacao/ ## What it looks like It looks like a constellation seen from above: thousands of colored dots, one hue per community, joined by thin translucent threads. On load the network spreads out and settles into clusters on its own, while a badge at the top shows progress until it is stable. The most connected nodes are larger and get labels. Hovering a dot lights up its neighbors and shows a tooltip with name, group and connection count. Clicking opens a card with its main links and a pin button. The search box flies the camera to any node. The default background is off-white. ## You may be looking for this if you asked for something like - “that Obsidian-style graph of linked dots for my site” - “a map of connections between people, projects and companies to explore” - “a network of nodes that arranges itself and shows groups by color” - “visualize my AI agent's knowledge base as a network” - “a graph with thousands of points that will not freeze the browser” - “search for an item and have the view zoom to it inside the network” - “show our partner ecosystem as an interactive web” ## Also known as force-directed graph, knowledge graph, network graph, graph visualization, network visualization, node-link diagram ## When to use - Innovation ecosystem maps with companies, people, projects and funding calls - AI agent knowledge bases, to show what is linked to what - Network analysis in research, intelligence or relationship dashboards - Feature sections that want to show scale and connections in an explorable way ## When to avoid - Simple hierarchies such as org charts, which read better as a tree - Pages that already run another heavy WebGL effect - Devices without WebGL2, where CPU mode caps the graph at 2,500 nodes by default ## How to ask your AI ```text Build an interactive knowledge graph with a GPU force simulation to map my platform's ecosystem: colors by community, search with camera flights, neighbor highlight on hover, pinnable nodes, a CPU mode when WebGL2 is missing, pausing off screen and a hidden table for screen readers. ``` With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising. ## Questions about Constelação ### Does Constelação work without WebGL2? Yes. If the device lacks WebGL2 with float rendering, Constelação switches on its own to a CPU simulation drawn with Canvas 2D using the same formulas, capped at 2,500 nodes by default through the cpuLimit prop. The badge at the top shows which mode is active. ### Can I use my own data in Constelação? Yes. Pass nodes with an id, label and group, and edges with a source and target; Constelação colors by group, counts each node's connections and emits events when someone selects or pins a node. Without data, it generates a seeded demo network with hubs, 10,000 nodes and 12 communities. ### Does Constelação respect reduced motion settings? Yes. With reduced motion turned on, Constelação computes the layout without showing the intermediate frames and displays the network already settled, and the camera jumps straight to its target instead of flying. The simulation also stops whenever the graph leaves the screen. ## Related components - [Ipê](https://vibecode.thmtecnologia.com/en/components/ipe/): A central idea in the middle and colored curved branches you create with Tab and Enter, drag and collapse. - [Linhagem](https://vibecode.thmtecnologia.com/en/components/linhagem/): An org chart that lays itself out as a tree, with teams that open and close and search that traces the path to anyone. - [Engenhoca](https://vibecode.thmtecnologia.com/en/components/engenhoca/): An infinite board where you wire boxes together to build automations and watch the flow run with pulses of light. - [Aqueduto](https://vibecode.thmtecnologia.com/en/components/aqueduto/): Curved bands that show where each part of a total goes, with small dots running in proportion to the volume. - [Meridiano](https://vibecode.thmtecnologia.com/en/components/meridiano/): A dotted globe that spins on its own, with arcs of light linking 12 real cities around the world. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).