Design System

3D Graph Visualization

Node-link graphs in 3D space. Ideal for complex relationships.

Force-Directed Graph

Nodes repel each other, edges pull connected nodes together. Click a node to select.

// Force-directed layout algorithm
useFrame((_, delta) => {
  nodes.forEach(node => {
    // Repulsion from other nodes
    nodes.forEach(other => {
      const diff = node.position.clone().sub(other.position);
      const dist = diff.length();
      if (dist > 0 && dist < 5) {
        node.velocity.add(diff.normalize().multiplyScalar(0.1 / dist));
      }
    });

    // Attraction along edges
    edges.forEach(edge => {
      if (edge.source === node.id) {
        const target = nodes.find(n => n.id === edge.target);
        const diff = target.position.clone().sub(node.position);
        node.velocity.add(diff.multiplyScalar(0.01));
      }
    });

    // Apply velocity with damping
    node.position.add(node.velocity.multiplyScalar(delta));
    node.velocity.multiplyScalar(0.95);
  });
});

Agent Network

Structured 3D layout for agent orchestration visualization.

// Hierarchical 3D layout for agent networks
// Level 0: Orchestrator (top)
// Level 1: Primary agents (middle)
// Level 2: Worker agents (bottom)

const layout = {
  orchestrator: { y: 4, radius: 0 },
  primary: { y: 2, radius: 3 },
  worker: { y: 0, radius: 5 },
};