Swirl Blend

Colorful iterative swirl shader with palette controls

swirl-blend-tw

Customize

Tweak the props live

Animation

Speed0.5

Scale7

Iterations5

Output Scale10

Opacity1

Cursor Interaction

Cursor Intensity1

Distortion

Cos Frequency3

Cos Amplitude0.25

Sin Amplitude0.35

Modulation Rate0.1

Modulation Depth2

Palette Base

Base R0.75

Base G0.1

Base B0.55

Palette Amplitude

Amp R0.3

Amp G0.35

Amp B0.1

Palette Phase

Phase R0.3

Phase G0.15

Phase B0.2

Color

Background

#FFFFFF

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

Default:undefined

speednumber

Animation speed multiplier (0.01–3.0)

Default:0.5

scalenumber

Pattern tile scale (1–20)

Default:7

iterationsnumber

Number of distortion iterations (1–10)

Default:5

cosFrequencynumber

Cosine warp frequency (0.1–10)

Default:3

cosAmplitudenumber

Cosine warp amplitude (0–2)

Default:0.25

sinAmplitudenumber

Sine warp amplitude (0–2)

Default:0.35

modulationRatenumber

Secondary sine modulation rate (0–2)

Default:0.1

modulationDepthnumber

Secondary sine modulation depth (0–5)

Default:2

paletteBaseRnumber

Palette base red channel (0–1)

Default:0.75

paletteBaseGnumber

Palette base green channel (0–1)

Default:0.1

paletteBaseBnumber

Palette base blue channel (0–1)

Default:0.55

paletteAmpRnumber

Palette amplitude red channel (0–1)

Default:0.3

paletteAmpGnumber

Palette amplitude green channel (0–1)

Default:0.35

paletteAmpBnumber

Palette amplitude blue channel (0–1)

Default:0.1

palettePhaseRnumber

Palette phase red channel (0–1)

Default:0.3

palettePhaseGnumber

Palette phase green channel (0–1)

Default:0.15

palettePhaseBnumber

Palette phase blue channel (0–1)

Default:0.2

outputScalenumber

Output divisor controlling final brightness (1–30)

Default:10

backgroundColorstring

Background color (hex)

Default:"#000000"

opacitynumber

Master opacity (0–1)

Default:1

cursorInteractionboolean

Enable cursor interaction to intensify distortion near pointer

Default:false

cursorIntensitynumber

Cursor effect strength multiplier (0–3)

Default:1