Simple Swirl

Rotating concentric swirl with glow

simple-swirl-tw

Customize

Tweak the props live

Animation

Speed1

Direction1

Zoom0.32

Opacity1

Layers

Layers20

Layer Step0.13

Twist0.05

Line Weight1

Gamma1

Vignette

Vignette Start0

Vignette End0.47

Glow

Glow Strength0.05

Glow Radius0.05

Color

Swirl Color

#5227FF

Background

#FFFFFF

Cursor Interaction

Cursor Intensity1

Props

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

Default:undefined

speednumber

Animation speed multiplier (0.01–3.0)

Default:1

directionnumber

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

Default:1

zoomnumber

Overall zoom into the swirl (0.05–2.0)

Default:0.32

layersnumber

Number of concentric layers (1–30)

Default:20

layerStepnumber

Spacing increment per layer (0.01–1.0)

Default:0.13

twistnumber

Rotation per layer in radians (0–0.5)

Default:0.05

lineWeightnumber

Line thickness factor (0.1–5.0)

Default:1

gammanumber

Gamma exponent for contrast (0.1–5.0)

Default:1

swirlColorstring

Foreground swirl color (hex)

Default:"#5227FF"

backgroundColorstring

Background fill color (hex)

Default:"#ffffff"

vignetteStartnumber

Radial fade-out start distance (0–1)

Default:0

vignetteEndnumber

Radial fade-out end distance (0–2)

Default:0.47

glowStrengthnumber

Center glow intensity (0–1)

Default:0.05

glowRadiusnumber

Center glow radius (0–0.5)

Default:0.05

opacitynumber

Master opacity (0–1)

Default:1

cursorInteractionboolean

Enable cursor interaction to warp twist and line weight near pointer

Default:false

cursorIntensitynumber

Cursor effect strength multiplier (0–3)

Default:1