Force Graph

The ForceGraph component is a powerful visualization tool for displaying interconnected data (like architecture diagrams, tech stacks, or Obsidian-style knowledge graphs).

Instead of relying on heavy SVG libraries like D3, it leverages matter.js (which we already use for our Physics Canvas components). It simulates an N-Body gravitational repulsion between the nodes, connects them with elastic springs, and maps the physics bodies directly to standard React DOM elements!

This means every node can contain standard HTML, Tailwind styling, buttons, or icons, and the physics run smoothly at 60fps.

Live Preview

Installation

[!WARNING] Performance Threshold: Because this component calculates custom N-Body repulsion forces in a loop every frame (O(n^2) time complexity), it is designed for aesthetic micro-visualizations (10–50 nodes), not massive big-data datasets.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { ForceGraph } from "@/components/creative/force-graph";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { ForceGraph } from "@/components/creative/force-graph";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <ForceGraph
        nodes{/* value */}
        links{/* value */}
        repulsion{10}
      />
    </div>
  );
}