Swirl Blend

Vivid colors swirling and blending like silk

swirl-blend-tw

pro.reactbits.dev

ComponentsBlocksTemplatesPricing

Get Pro

Where colors come together

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

Get startedBrowse library

9:41

Where colors come together

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

Get startedBrowse library

Where colors come together

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

Get startedLearn more

Customize

Color A

Color B

Background

Speed

0.40

Scale

7.0

Warp

1.00

Detail

5.0

Sheen

0.40

Contrast

1.00

Saturation

1.00

Grain

0.00

Drop Size

1.00

InteractiveIntroPaused

Props

Name	Type	Default	Description
`colors`	[string, string]	`["#8A1F8F", "#FF4A9E"]`	The two colours the fluid blends between. A vivid bridge tone and a quiet valley tone are derived from them.
`backgroundColor`	string	`"transparent"`	Page colour the valleys settle toward. Transparent reads the colour behind the component. Light colours switch to a light palette.
`speed`	number	`0.4`	Speed of the swirl.
`scale`	number	`7`	Size of the pattern. Higher values give smaller, denser curls.
`warp`	number	`1`	How strongly the bands curl.
`detail`	number	`5`	Warp passes, from 1 to 10. More passes fold the bands into finer curls.
`sheen`	number	`0.4`	Silk shading, with soft highlights where the bands fold.
`contrast`	number	`1`	Spread between the quiet valleys and the bright crests.
`saturation`	number	`1`	Colour intensity.
`grain`	number	`0`	Film grain over the colour.
`dropSize`	number	`1`	Size of the ink drop a click releases.
`interactive`	boolean	`true`	Click to drop ink of the next palette colour into the swirl. Moving the pointer stirs it faster for a moment.
`intro`	boolean	`true`	Inks the colour in band by band when the swirl appears.
`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`	{ drop, replay }	`-`	drop(x?, y?) releases ink at a point given from 0 to 1. 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.

colors[string, string]

The two colours the fluid blends between. A vivid bridge tone and a quiet valley tone are derived from them.

Default["#8A1F8F", "#FF4A9E"]

backgroundColorstring

Page colour the valleys settle toward. Transparent reads the colour behind the component. Light colours switch to a light palette.

Default"transparent"

speednumber

Speed of the swirl.

Default0.4

scalenumber

Size of the pattern. Higher values give smaller, denser curls.

Default7

warpnumber

How strongly the bands curl.

Default1

detailnumber

Warp passes, from 1 to 10. More passes fold the bands into finer curls.

Default5

sheennumber

Silk shading, with soft highlights where the bands fold.

Default0.4

contrastnumber

Spread between the quiet valleys and the bright crests.

Default1

saturationnumber

Colour intensity.

Default1

grainnumber

Film grain over the colour.

Default0

dropSizenumber

Size of the ink drop a click releases.

Default1

interactiveboolean

Click to drop ink of the next palette colour into the swirl. Moving the pointer stirs it faster for a moment.

Defaulttrue

introboolean

Inks the colour in band by band when the swirl appears.

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{ drop, replay }

drop(x?, y?) releases ink at a point given from 0 to 1. 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

colors

[string, string]

["#8A1F8F", "#FF4A9E"]

The two colours the fluid blends between. A vivid bridge tone and a quiet valley tone are derived from them.

backgroundColor

string

"transparent"

Page colour the valleys settle toward. Transparent reads the colour behind the component. Light colours switch to a light palette.

speed

number

0.4

Speed of the swirl.

scale

number

7

Size of the pattern. Higher values give smaller, denser curls.

warp

number

1

How strongly the bands curl.

detail

number

5

Warp passes, from 1 to 10. More passes fold the bands into finer curls.

sheen

number

0.4

Silk shading, with soft highlights where the bands fold.

contrast

number

1

Spread between the quiet valleys and the bright crests.

saturation

number

1

Colour intensity.

grain

number

0

Film grain over the colour.

dropSize

number

1

Size of the ink drop a click releases.

interactive

boolean

true

Click to drop ink of the next palette colour into the swirl. Moving the pointer stirs it faster for a moment.

intro

boolean

true

Inks the colour in band by band when the swirl appears.

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

{ drop, replay }

-

drop(x?, y?) releases ink at a point given from 0 to 1. 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.