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
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.
