Watercolor
Animated watercolor noise shader with two-color blend
watercolor-tw
Customize
Tweak the props liveAnimation
0.6
0.6
0.04
0.08
1
1
Noise
6
0.6
2.4
1
Color
#0a0a0a#e0e0e00
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) |
widthstring | numberContainer width
Default:
"100%"heightstring | numberContainer height
Default:
"100%"classNamestringAdditional CSS classes
Default:
undefinedchildrenReactNodeContent rendered above the effect
Default:
undefinedspeednumberAnimation speed multiplier (0.01–3.0)
Default:
0.6scalenumberPattern scale / zoom (0.5–5.0)
Default:
0.6octavesnumberNumber of noise octaves (1–8)
Default:
6persistencenumberAmplitude decay per octave (0.1–1.0)
Default:
0.6lacunaritynumberFrequency multiplier per octave (1.0–4.0)
Default:
2.4driftSpeednumberPrimary flow drift speed (0–0.5)
Default:
0.04warpSpeednumberSecondary warp drift speed (0–0.5)
Default:
0.08color1stringFirst color hex
Default:
"#0a0a0a"color2stringSecond color hex
Default:
"#e0e0e0"colorGainnumberColor intensity multiplier (0.1–3.0)
Default:
1saturationnumberSaturation adjustment (0–2.0)
Default:
0brightnessnumberBrightness offset (-0.5–0.5)
Default:
0.15opacitynumberMaster opacity (0–1)
Default:
1cursorInteractionbooleanEnable cursor interaction to intensify warp and contrast near pointer
Default:
falsecursorIntensitynumberCursor effect strength multiplier (0–3)
Default:
1