Watercolor

Animated watercolor noise shader with two-color blend

watercolor-tw

Customize

Speed

0.60

Scale

0.6

Drift Speed

0.04

Warp Speed

0.08

Opacity

1.00

Cursor Interaction

Cursor Intensity

1.0

Octaves

Persistence

0.60

Lacunarity

2.4

Color Gain

1.00

Color 1

Color 2

Saturation

0.00

Brightness

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 | number

Container width

Default"100%"

heightstring | number

Container height

Default"100%"

classNamestring

Additional CSS classes

Defaultundefined

childrenReactNode

Content rendered above the effect

Defaultundefined

speednumber

Animation speed multiplier (0.01–3.0)

Default0.6

scalenumber

Pattern scale / zoom (0.5–5.0)

Default0.6

octavesnumber

Number of noise octaves (1–8)

Default6

persistencenumber

Amplitude decay per octave (0.1–1.0)

Default0.6

lacunaritynumber

Frequency multiplier per octave (1.0–4.0)

Default2.4

driftSpeednumber

Primary flow drift speed (0–0.5)

Default0.04

warpSpeednumber

Secondary warp drift speed (0–0.5)

Default0.08

color1string

First color hex

Default"#0a0a0a"

color2string

Second color hex

Default"#e0e0e0"

colorGainnumber

Color intensity multiplier (0.1–3.0)

Default1

saturationnumber

Saturation adjustment (0–2.0)

Default0

brightnessnumber

Brightness offset (-0.5–0.5)

Default0.15

opacitynumber

Master opacity (0–1)

Default1

cursorInteractionboolean

Enable cursor interaction to intensify warp and contrast near pointer

Defaultfalse

cursorIntensitynumber

Cursor effect strength multiplier (0–3)

Default1