Center Flow

Radial flowing animation from center

center-flow-tw

Customize

Node Count (demo only)

Center Size

120

Node Size

Border Radius

Node Distance

0.70

Pulse Duration

5.0

Pulse Interval

10.0

Pulse Length

0.40

Pulse Softness

Line Width

2.0

Pulse Width

1.0

Glow Intensity

Glow Decay

0.95

Disable Blinking

Line Color (Dark)

Line Color (Light)

Pulse Color (Dark)

Pulse Color (Light)

Glow Color (Dark)

Glow Color (Light)

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

nodeItemsNodeItem[]

Array of node items - each can contain custom content (JSX, icons, images, etc.). Node count is derived from array length.

DefaultArray(9).fill({})

centerContentReactNode

Custom content to render inside the center node

Defaultundefined

centerSizenumber

Center square size in pixels

Default120

nodeSizenumber

Outer node size in pixels

Default60

pulseDurationnumber

Pulse travel duration in seconds

Default5

pulseIntervalnumber

Average delay between pulses spawning

Default10

pulseLengthnumber

Pulse line length as percentage of path (0-1)

Default0.4

lineWidthnumber

Line stroke width

Default2

pulseWidthnumber

Pulse line stroke width

Default1

pulseSoftnessnumber

Pulse blur/softness (0-10)

Default10

lineColorstring

Line color (dark mode)

Default"#1c1c1c"

lineColorLightstring

Line color (light mode)

Default"#e0e0e0"

pulseColorstring

Pulse color (dark mode)

Default"#e724eb"

pulseColorLightstring

Pulse color (light mode)

Default"#e724eb"

glowColorstring

Center glow color (dark mode)

Default"#e724eb"

glowColorLightstring

Center glow color (light mode)

Default"#e724eb"

maxGlowIntensitynumber

Maximum glow intensity

Default25

glowDecaynumber

Glow decay speed (higher = faster decay)

Default0.95

borderRadiusnumber

Border radius for center square

Default35

nodeDistancenumber

Distance of nodes from center as percentage (0-1)

Default0.7

disableBlinkingboolean

Disable glow intensification when pulses arrive

Defaultfalse

classNamestring

Additional CSS classes for the container

Default""