Watercolor

Two colors blending like watercolor

watercolor-tw

pro.reactbits.dev

ComponentsBlocksTemplatesPricing

Get Pro

Painted in motion

Premium animated components and blocks, crafted to make your next launch feel alive.

Get startedBrowse library

9:41

Painted in motion

Premium animated components and blocks, crafted to make your next launch feel alive.

Get startedBrowse library

Painted in motion

Premium animated components and blocks, crafted to make your next launch feel alive.

Get startedLearn more

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

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)