Simple Swirl

Rotating concentric swirl with glow

simple-swirl-tw

Customize

Speed

1.00

Direction

1

Zoom

0.32

Opacity

1.00

Layers

20

Layer Step

0.13

Twist

0.050

Line Weight

1.0

Gamma

1.0

Vignette Start

0.00

Vignette End

0.47

Glow Strength

0.05

Glow Radius

0.050

Swirl Color

Background

Cursor Interaction

Cursor Intensity

1.0

Props

21

Name	Type	Default	Description
`width`	string \| number	`"100%"`	Container width
`height`	string \| number	`"100%"`	Container height
`className`	string	`""`	Additional CSS classes for styling
`children`	ReactNode	`undefined`	Content rendered above the effect
`speed`	number	`1`	Animation speed multiplier (0.01–3.0)
`direction`	number	`1`	Rotation direction: 1 = clockwise, -1 = counter-clockwise
`zoom`	number	`0.32`	Overall zoom into the swirl (0.05–2.0)
`layers`	number	`20`	Number of concentric layers (1–30)
`layerStep`	number	`0.13`	Spacing increment per layer (0.01–1.0)
`twist`	number	`0.05`	Rotation per layer in radians (0–0.5)
`lineWeight`	number	`1`	Line thickness factor (0.1–5.0)
`gamma`	number	`1`	Gamma exponent for contrast (0.1–5.0)
`swirlColor`	string	`"#5227FF"`	Foreground swirl color (hex)
`backgroundColor`	string	`"#ffffff"`	Background fill color (hex)
`vignetteStart`	number	`0`	Radial fade-out start distance (0–1)
`vignetteEnd`	number	`0.47`	Radial fade-out end distance (0–2)
`glowStrength`	number	`0.05`	Center glow intensity (0–1)
`glowRadius`	number	`0.05`	Center glow radius (0–0.5)
`opacity`	number	`1`	Master opacity (0–1)
`cursorInteraction`	boolean	`false`	Enable cursor interaction to warp twist and line weight near pointer
`cursorIntensity`	number	`1`	Cursor effect strength multiplier (0–3)

widthstring | number

Container width

Default"100%"

heightstring | number

Container height

Default"100%"

classNamestring

Additional CSS classes for styling

Default""

childrenReactNode

Content rendered above the effect

Defaultundefined

speednumber

Animation speed multiplier (0.01–3.0)

Default1

directionnumber

Rotation direction: 1 = clockwise, -1 = counter-clockwise

Default1

zoomnumber

Overall zoom into the swirl (0.05–2.0)

Default0.32

layersnumber

Number of concentric layers (1–30)

Default20

layerStepnumber

Spacing increment per layer (0.01–1.0)

Default0.13

twistnumber

Rotation per layer in radians (0–0.5)

Default0.05

lineWeightnumber

Line thickness factor (0.1–5.0)

Default1

gammanumber

Gamma exponent for contrast (0.1–5.0)

Default1

swirlColorstring

Foreground swirl color (hex)

Default"#5227FF"

backgroundColorstring

Background fill color (hex)

Default"#ffffff"

vignetteStartnumber

Radial fade-out start distance (0–1)

Default0

vignetteEndnumber

Radial fade-out end distance (0–2)

Default0.47

glowStrengthnumber

Center glow intensity (0–1)

Default0.05

glowRadiusnumber

Center glow radius (0–0.5)

Default0.05

opacitynumber

Master opacity (0–1)

Default1

cursorInteractionboolean

Enable cursor interaction to warp twist and line weight near pointer

Defaultfalse

cursorIntensitynumber

Cursor effect strength multiplier (0–3)

Default1