Swirl Blend
Colorful iterative swirl shader with palette controls
swirl-blend-tw
Customize
Animation
0.5
7
5
10
1
1
Distortion
3
0.25
0.35
0.1
2
Palette Base
0.75
0.1
0.55
Palette Amplitude
0.3
0.35
0.1
Palette Phase
0.3
0.15
0.2
Color
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) |