Center Flow
Radial flowing animation from center
center-flow-tw
Customize
Layout & Size
8
120
60
35
0.7
Animation
5
10
0.4
10
2
1
25
0.95
Colors
Props
| 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 |