Swirl Blend

Colorful iterative swirl shader with palette controls

swirl-blend-tw

Customize

Speed

0.50

Scale

7.0

Iterations

Output Scale

10.0

Opacity

1.00

Cursor Interaction

Cursor Intensity

1.0

Cos Frequency

3.0

Cos Amplitude

0.25

Sin Amplitude

0.35

Modulation Rate

0.10

Modulation Depth

2.0

Base R

0.75

Base G

0.10

Base B

0.55

Amp R

0.30

Amp G

0.35

Amp B

0.10

Phase R

0.30

Phase G

0.15

Phase B

0.20

Background

Props

Name	Type	Default	Description
`width`	string \| number	`"100%"`	Container width
`height`	string \| number	`"100%"`	Container height
`className`	string	`""`	Additional CSS classes
`children`	ReactNode	`undefined`	Content rendered above the effect
`speed`	number	`0.5`	Animation speed multiplier (0.01–3.0)
`scale`	number	`7`	Pattern tile scale (1–20)
`iterations`	number	`5`	Number of distortion iterations (1–10)
`cosFrequency`	number	`3`	Cosine warp frequency (0.1–10)
`cosAmplitude`	number	`0.25`	Cosine warp amplitude (0–2)
`sinAmplitude`	number	`0.35`	Sine warp amplitude (0–2)
`modulationRate`	number	`0.1`	Secondary sine modulation rate (0–2)
`modulationDepth`	number	`2`	Secondary sine modulation depth (0–5)
`paletteBaseR`	number	`0.75`	Palette base red channel (0–1)
`paletteBaseG`	number	`0.1`	Palette base green channel (0–1)
`paletteBaseB`	number	`0.55`	Palette base blue channel (0–1)
`paletteAmpR`	number	`0.3`	Palette amplitude red channel (0–1)
`paletteAmpG`	number	`0.35`	Palette amplitude green channel (0–1)
`paletteAmpB`	number	`0.1`	Palette amplitude blue channel (0–1)
`palettePhaseR`	number	`0.3`	Palette phase red channel (0–1)
`palettePhaseG`	number	`0.15`	Palette phase green channel (0–1)
`palettePhaseB`	number	`0.2`	Palette phase blue channel (0–1)
`outputScale`	number	`10`	Output divisor controlling final brightness (1–30)
`backgroundColor`	string	`"#000000"`	Background color (hex)
`opacity`	number	`1`	Master opacity (0–1)
`cursorInteraction`	boolean	`false`	Enable cursor interaction to intensify distortion 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

Default""

childrenReactNode

Content rendered above the effect

Defaultundefined

speednumber

Animation speed multiplier (0.01–3.0)

Default0.5

scalenumber

Pattern tile scale (1–20)

Default7

iterationsnumber

Number of distortion iterations (1–10)

Default5

cosFrequencynumber

Cosine warp frequency (0.1–10)

Default3

cosAmplitudenumber

Cosine warp amplitude (0–2)

Default0.25

sinAmplitudenumber

Sine warp amplitude (0–2)

Default0.35

modulationRatenumber

Secondary sine modulation rate (0–2)

Default0.1

modulationDepthnumber

Secondary sine modulation depth (0–5)

Default2

paletteBaseRnumber

Palette base red channel (0–1)

Default0.75

paletteBaseGnumber

Palette base green channel (0–1)

Default0.1

paletteBaseBnumber

Palette base blue channel (0–1)

Default0.55

paletteAmpRnumber

Palette amplitude red channel (0–1)

Default0.3

paletteAmpGnumber

Palette amplitude green channel (0–1)

Default0.35

paletteAmpBnumber

Palette amplitude blue channel (0–1)

Default0.1

palettePhaseRnumber

Palette phase red channel (0–1)

Default0.3

palettePhaseGnumber

Palette phase green channel (0–1)

Default0.15

palettePhaseBnumber

Palette phase blue channel (0–1)

Default0.2

outputScalenumber

Output divisor controlling final brightness (1–30)

Default10

backgroundColorstring

Background color (hex)

Default"#000000"

opacitynumber

Master opacity (0–1)

Default1

cursorInteractionboolean

Enable cursor interaction to intensify distortion near pointer

Defaultfalse

cursorIntensitynumber

Cursor effect strength multiplier (0–3)

Default1