A hub with pulses flowing out to connected nodes
| Name | Type | Default | Description |
|---|---|---|---|
nodeItems | NodeItem[] | Array(9).fill({}) | Array of node items - each can contain custom content (JSX, icons, images, etc.). Node count is derived from array length. |
centerContent | ReactNode | undefined | Custom content to render inside the center node |
centerSize | number | 120 | Center square size in pixels |
nodeSize | number | 60 | Outer node size in pixels |
pulseDuration | number | 5 | Pulse travel duration in seconds |
pulseInterval | number | 10 | Average delay between pulses spawning |
pulseLength | number | 0.4 | Pulse line length as percentage of path (0-1) |
lineWidth | number | 2 | Line stroke width |
pulseWidth | number | 1 | Pulse line stroke width |
pulseSoftness | number | 10 | Pulse blur/softness (0-10) |
lineColor | string | "#1c1c1c" | Line color (dark mode) |
lineColorLight | string | "#e0e0e0" | Line color (light mode) |
pulseColor | string | "#e724eb" | Pulse color (dark mode) |
pulseColorLight | string | "#e724eb" | Pulse color (light mode) |
glowColor | string | "#e724eb" | Center glow color (dark mode) |
glowColorLight | string | "#e724eb" | Center glow color (light mode) |
maxGlowIntensity | number | 25 | Maximum glow intensity |
glowDecay | number | 0.95 | Glow decay speed (higher = faster decay) |
borderRadius | number | 35 | Border radius for center square |
nodeDistance | number | 0.7 | Distance of nodes from center as percentage (0-1) |
disableBlinking | boolean | false | Disable glow intensification when pulses arrive |
className | string | "" | Additional CSS classes for the container |
nodeItemsNodeItem[]Array of node items - each can contain custom content (JSX, icons, images, etc.). Node count is derived from array length.
Array(9).fill({})centerContentReactNodeCustom content to render inside the center node
undefinedcenterSizenumberCenter square size in pixels
120nodeSizenumberOuter node size in pixels
60pulseDurationnumberPulse travel duration in seconds
5pulseIntervalnumberAverage delay between pulses spawning
10pulseLengthnumberPulse line length as percentage of path (0-1)
0.4lineWidthnumberLine stroke width
2pulseWidthnumberPulse line stroke width
1pulseSoftnessnumberPulse blur/softness (0-10)
10lineColorstringLine color (dark mode)
"#1c1c1c"lineColorLightstringLine color (light mode)
"#e0e0e0"pulseColorstringPulse color (dark mode)
"#e724eb"pulseColorLightstringPulse color (light mode)
"#e724eb"glowColorstringCenter glow color (dark mode)
"#e724eb"glowColorLightstringCenter glow color (light mode)
"#e724eb"maxGlowIntensitynumberMaximum glow intensity
25glowDecaynumberGlow decay speed (higher = faster decay)
0.95borderRadiusnumberBorder radius for center square
35nodeDistancenumberDistance of nodes from center as percentage (0-1)
0.7disableBlinkingbooleanDisable glow intensification when pulses arrive
falseclassNamestringAdditional CSS classes for the container
""