Simple Swirl

A soft, glowing swirl you can spin with momentum

simple-swirl-tw

pro.reactbits.dev

ComponentsBlocksTemplatesPricing

Get Pro

Give it a spin

Premium animated components and blocks, crafted to make your next launch feel alive.

Get startedBrowse library

9:41

Give it a spin

Premium animated components and blocks, crafted to make your next launch feel alive.

Get startedBrowse library

Give it a spin

Premium animated components and blocks, crafted to make your next launch feel alive.

Get startedLearn more

Customize

Swirl Color

Glow Color

Background

Arms

Speed

1.00

Zoom

0.32

Layers

Layer Step

0.13

Twist

0.050

Line Weight

1.00

Gamma

1.00

Arm Contrast

1.00

Softness

0.50

Brightness

1.00

Bloom

0.60

Glow Strength

0.05

Glow Radius

0.050

Vignette Start

0.00

Vignette End

0.47

Opacity

1.00

Spin Strength

1.00

Friction

1.00

Windup

1.00

InteractiveIntroPaused

Props

Name	Type	Default	Description
`swirlColor`	string	`"#5227FF"`	Main colour of the swirl and its arms.
`glowColor`	string	`"auto"`	Colour the brightest arms and the core heat toward. Auto derives a lighter tone from the swirl colour.
`backgroundColor`	string	`"transparent"`	Fill behind the swirl. Transparent reads the page behind it. Light colours switch to an ink rendering.
`arms`	number	`4`	Number of spiral arms, from 3 to 8.
`speed`	number	`1`	Speed of the idle turn.
`direction`	number	`1`	Turn direction. 1 is clockwise, -1 is counter-clockwise.
`zoom`	number	`0.32`	Zoom into the swirl. Higher values make it smaller.
`layers`	number	`20`	How far the stacked layers reach, up to 30.
`layerStep`	number	`0.13`	Spacing between layers. Smaller steps give a denser swirl.
`twist`	number	`0.05`	Rotation added per layer, in radians. Higher values curl the arms more.
`lineWeight`	number	`1`	How much each layer adds to the density.
`gamma`	number	`1`	Contrast of the density. Higher values thin the swirl out.
`armContrast`	number	`1`	How strongly the arms stand out from the lanes between them.
`softness`	number	`0.5`	Softness of the arm edges.
`brightness`	number	`1`	Exposure of the light.
`bloom`	number	`0.6`	Soft glow around the brightest light.
`glowStrength`	number	`0.05`	Extra light at the centre.
`glowRadius`	number	`0.05`	Radius of the centre light.
`vignetteStart`	number	`0`	Distance where the outer fade begins.
`vignetteEnd`	number	`0.47`	Distance where the swirl has faded out.
`opacity`	number	`1`	Overall opacity of the effect.
`interactive`	boolean	`true`	Drag to spin the swirl. It keeps turning after release, then eases back to its idle speed. A click gives it a small push.
`spinStrength`	number	`1`	How strongly drags and clicks spin the swirl.
`friction`	number	`1`	How quickly a spin settles back to the idle speed.
`windup`	number	`1`	How far the arms wind and unwind while the swirl spins fast.
`intro`	boolean	`true`	Fades the light in while the swirl spins up.
`paused`	boolean	`false`	Stops the motion. Reduced-motion users get a still frame.
`dpr`	number	`2`	Maximum device pixel ratio for the canvas.
`width`	string \| number	`"100%"`	Width of the component.
`height`	string \| number	`"100%"`	Height of the component.
`ref`	{ spin, replay }	`-`	spin(strength?) gives the swirl a push. replay() restarts the intro.
`children`	ReactNode	`-`	Content layered above the swirl.
`className`	string	`-`	Classes for the root element.
`style`	CSSProperties	`-`	Inline styles for the root element.

swirlColorstring

Main colour of the swirl and its arms.

Default"#5227FF"

glowColorstring

Colour the brightest arms and the core heat toward. Auto derives a lighter tone from the swirl colour.

Default"auto"

backgroundColorstring

Fill behind the swirl. Transparent reads the page behind it. Light colours switch to an ink rendering.

Default"transparent"

armsnumber

Number of spiral arms, from 3 to 8.

Default4

speednumber

Speed of the idle turn.

Default1

directionnumber

Turn direction. 1 is clockwise, -1 is counter-clockwise.

Default1

zoomnumber

Zoom into the swirl. Higher values make it smaller.

Default0.32

layersnumber

How far the stacked layers reach, up to 30.

Default20

layerStepnumber

Spacing between layers. Smaller steps give a denser swirl.

Default0.13

twistnumber

Rotation added per layer, in radians. Higher values curl the arms more.

Default0.05

lineWeightnumber

How much each layer adds to the density.

Default1

gammanumber

Contrast of the density. Higher values thin the swirl out.

Default1

armContrastnumber

How strongly the arms stand out from the lanes between them.

Default1

softnessnumber

Softness of the arm edges.

Default0.5

brightnessnumber

Exposure of the light.

Default1

bloomnumber

Soft glow around the brightest light.

Default0.6

glowStrengthnumber

Extra light at the centre.

Default0.05

glowRadiusnumber

Radius of the centre light.

Default0.05

vignetteStartnumber

Distance where the outer fade begins.

Default0

vignetteEndnumber

Distance where the swirl has faded out.

Default0.47

opacitynumber

Overall opacity of the effect.

Default1

interactiveboolean

Drag to spin the swirl. It keeps turning after release, then eases back to its idle speed. A click gives it a small push.

Defaulttrue

spinStrengthnumber

How strongly drags and clicks spin the swirl.

Default1

frictionnumber

How quickly a spin settles back to the idle speed.

Default1

windupnumber

How far the arms wind and unwind while the swirl spins fast.

Default1

introboolean

Fades the light in while the swirl spins up.

Defaulttrue

pausedboolean

Stops the motion. Reduced-motion users get a still frame.

Defaultfalse

dprnumber

Maximum device pixel ratio for the canvas.

Default2

widthstring | number

Width of the component.

Default"100%"

heightstring | number

Height of the component.

Default"100%"

ref{ spin, replay }

spin(strength?) gives the swirl a push. replay() restarts the intro.

Default-

childrenReactNode

Content layered above the swirl.

Default-

classNamestring

Classes for the root element.

Default-

styleCSSProperties

Inline styles for the root element.

Default-

Name

Type

Default

Description

swirlColor

string

"#5227FF"

Main colour of the swirl and its arms.

glowColor

string

"auto"

Colour the brightest arms and the core heat toward. Auto derives a lighter tone from the swirl colour.

backgroundColor

string

"transparent"

Fill behind the swirl. Transparent reads the page behind it. Light colours switch to an ink rendering.

arms

number

4

Number of spiral arms, from 3 to 8.

speed

number

1

Speed of the idle turn.

direction

number

1

Turn direction. 1 is clockwise, -1 is counter-clockwise.

zoom

number

0.32

Zoom into the swirl. Higher values make it smaller.

layers

number

20

How far the stacked layers reach, up to 30.

layerStep

number

0.13

Spacing between layers. Smaller steps give a denser swirl.

twist

number

0.05

Rotation added per layer, in radians. Higher values curl the arms more.

lineWeight

number

1

How much each layer adds to the density.

gamma

number

1

Contrast of the density. Higher values thin the swirl out.

armContrast

number

1

How strongly the arms stand out from the lanes between them.

softness

number

0.5

Softness of the arm edges.

brightness

number

1

Exposure of the light.

bloom

number

0.6

Soft glow around the brightest light.

glowStrength

number

0.05

Extra light at the centre.

glowRadius

number

0.05

Radius of the centre light.

vignetteStart

number

0

Distance where the outer fade begins.

vignetteEnd

number

0.47

Distance where the swirl has faded out.

opacity

number

1

Overall opacity of the effect.

interactive

boolean

true

Drag to spin the swirl. It keeps turning after release, then eases back to its idle speed. A click gives it a small push.

spinStrength

number

1

How strongly drags and clicks spin the swirl.

friction

number

1

How quickly a spin settles back to the idle speed.

windup

number

1

How far the arms wind and unwind while the swirl spins fast.

intro

boolean

true

Fades the light in while the swirl spins up.

paused

boolean

false

Stops the motion. Reduced-motion users get a still frame.

dpr

number

2

Maximum device pixel ratio for the canvas.

width

string | number

"100%"

Width of the component.

height

string | number

"100%"

Height of the component.

ref

{ spin, replay }

-

spin(strength?) gives the swirl a push. replay() restarts the intro.

children

ReactNode

-

Content layered above the swirl.

className

string

-

Classes for the root element.

style

CSSProperties

-

Inline styles for the root element.