Watercolor
Animated watercolor noise shader with two-color blend
watercolor-tw
Customize
Animation
0.6
0.6
0.04
0.08
1
1
Noise
6
0.6
2.4
1
Color
0
0.15
Props
| Name | Type | Default | Description |
|---|---|---|---|
| width | string | number | "100%" | Container width |
| height | string | number | "100%" | Container height |
| className | string | undefined | Additional CSS classes |
| children | ReactNode | undefined | Content rendered above the effect |
| speed | number | 0.6 | Animation speed multiplier (0.01–3.0) |
| scale | number | 0.6 | Pattern scale / zoom (0.5–5.0) |
| octaves | number | 6 | Number of noise octaves (1–8) |
| persistence | number | 0.6 | Amplitude decay per octave (0.1–1.0) |
| lacunarity | number | 2.4 | Frequency multiplier per octave (1.0–4.0) |
| driftSpeed | number | 0.04 | Primary flow drift speed (0–0.5) |
| warpSpeed | number | 0.08 | Secondary warp drift speed (0–0.5) |
| color1 | string | "#0a0a0a" | First color hex |
| color2 | string | "#e0e0e0" | Second color hex |
| colorGain | number | 1 | Color intensity multiplier (0.1–3.0) |
| saturation | number | 0 | Saturation adjustment (0–2.0) |
| brightness | number | 0.15 | Brightness offset (-0.5–0.5) |
| opacity | number | 1 | Master opacity (0–1) |
| cursorInteraction | boolean | false | Enable cursor interaction to intensify warp and contrast near pointer |
| cursorIntensity | number | 1 | Cursor effect strength multiplier (0–3) |