pro246 lines · framer-motion

Knowledge Graph

What the agent knows, and how it connects. A small force-directed graph of people, docs, concepts and systems. Drag nodes, hover to light up neighbours and edge labels, click to focus.

Use it for: Agent memory views, RAG source maps, entity explorers.
Themes: Light + dark
License: Commercial use (draft)

Live

Fee roundingconcept· 4 linkspersondocconceptsystem

tsx

"use client";

import * as React from "react";
import { useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

export interface KGNode {
  id: string;
  label: string;
  type: "person" | "doc" | "concept" | "system";
}
export interface KGEdge {
  source: string;
  target: string;
  label?: string;
}

export interface KnowledgeGraphProps {
  nodes?: KGNode[];
  edges?: KGEdge[];
  showLabels?: boolean;
  /** Spring length between linked nodes. */

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→Dependency-free force simulation (repulsion, springs, centring, damping) in requestAnimationFrame.
→Node colour by type: person orange, doc blue, concept black, system green.
→Hover or focus dims unrelated nodes and shows edge labels on the lit edges.
→Drag pins a node while held. Under reduced motion the layout is solved once and drawn still.

Accessibility

✓Nodes are focusable buttons with label and type.
✓Legend uses text, not colour only.
✓Honours prefers-reduced-motion.