Center Flow

Radial flowing animation from center

center-flow-tw

Customize

Tweak the props live

Layout & Size

Node Count (demo only)8

Center Size120

Node Size60

Border Radius35

Node Distance0.7

Animation

Pulse Duration5

Pulse Interval10

Pulse Length0.4

Pulse Softness10

Line Width2

Pulse Width1

Glow Intensity25

Glow Decay0.95

Disable Blinking

Colors

Line Color (Dark)

#1c1c1c

Line Color (Light)

#e0e0e0

Pulse Color (Dark)

#e724eb

Pulse Color (Light)

#e724eb

Glow Color (Dark)

#e724eb

Glow Color (Light)

#e724eb

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.

Default:Array(9).fill({})

centerContentReactNode

Custom content to render inside the center node

Default:undefined

centerSizenumber

Center square size in pixels

Default:120

nodeSizenumber

Outer node size in pixels

Default:60

pulseDurationnumber

Pulse travel duration in seconds

Default:5

pulseIntervalnumber

Average delay between pulses spawning

Default:10

pulseLengthnumber

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

Default:0.4

lineWidthnumber

Line stroke width

Default:2

pulseWidthnumber

Pulse line stroke width

Default:1

pulseSoftnessnumber

Pulse blur/softness (0-10)

Default:10

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

Default:25

glowDecaynumber

Glow decay speed (higher = faster decay)

Default:0.95

borderRadiusnumber

Border radius for center square

Default:35

nodeDistancenumber

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

Default:0.7

disableBlinkingboolean

Disable glow intensification when pulses arrive

Default:false

classNamestring

Additional CSS classes for the container

Default:""