Network Graph
A force-directed graph on one canvas that cools to rest: nodes sized by their links under a soft top light, gently arced links that fade with length and weight, and a faint filled blob behind each group.
$149 once · every Pro piece
Point at a node and it heats in the accent while its links light outward with a travelling pulse, neighbours brighten, their labels place themselves without colliding, and the rest steps back. Click a node to pin it, click empty space or press Esc to let go; hold Shift to reach second-degree neighbours. Drag a node and the graph warms up around it. Hover a legend row and its group's blob lifts; click a row to hide a group. Wheel or pinch to zoom, drag empty space to pan, double-click or Reset view to fit again; arrow keys step to the neighbour in that direction and Enter pins. Options: two-hop reach, link curve, group blobs, node size, hub labels at rest, a hatch per group, loading and empty states.
Install
npx shadcn@latest add @obsyde/network-graphNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { NetworkGraph } from '@/components/obsyde/ember/network-graph/NetworkGraph';
export function Example() {
return (
<NetworkGraph />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/network-graph/NetworkGraph.tsxcomponentember/network-graph/network-graph.cssstylesember/network-graph/NetworkGraphDemo.tsxdemoember/viz-kit/viz-kit.csssharedember/viz-kit/size.tssharedember/viz-kit/scale.tssharedember/viz-kit/roll.tssharedember/shared/rolling-number.csssharedember/shared/spring.tssharedember/shared/accent.tssharedember/viz-kit/patterns.tsxsharedember/viz-kit/motion.tssharedember/viz-kit/Legend.tsxsharedember/viz-kit/focus.tssharedember/viz-kit/demo.tsxsharedember/viz-kit/demo.csssharedember/shared/RollingNumber.tsxsharedember/shared/ember.cssshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
nodesNodes | number | 48 |
clustersGroups | number | 4 |
linkDistanceLink length | number | 30 |
chargeRepulsion | number | 100 |
hopsReach | '1' | '2' | '1' |
pinPin | 'none' | 'hub' | 'none' |
curveLink curve | number | 0.35 |
hullsGroup blobs | 'soft' | 'none' | 'soft' |
sizeByNode size | 'degree' | 'uniform' | 'degree' |
labelsLabels | 'focus' | 'hubs' | 'focus' |
legendLegend | 'row' | 'none' | 'row' |
patternPattern | 'none' | 'per-group' | 'none' |
heightHeight | number | 420 |
statusStatus | 'ready' | 'loading' | 'empty' | 'ready' |
seedSeed | number | 11 |