Rubber Fluid

Rubbery fluid distortion shader

rubber-fluid-tw

Customize

Tweak the props live

Animation

Speed1

Zoom7.5

Iterations10

Opacity1

Warp

Iteration Step0.77

Seed Factor1

Warp Power1.5

Drift3

Rotation Rate2

Channels

Channel 13

Channel 23

Channel 32

Shading

Compression0.001

Threshold0.3

Contrast5

Pre Brightness2.1

Pre Offset0.9

Tint

Tint R1

Tint G0.07

Tint B1

Glow Intensity0.8

Background

#FFFFFF

Cursor Interaction

Cursor Intensity1

Props

Name	Type	Default	Description
`width`	string \| number	`"100%"`	Container width
`height`	string \| number	`"100%"`	Container height
`className`	string	`""`	Additional CSS classes for styling
`children`	ReactNode	`undefined`	Content rendered above the effect
`speed`	number	`1`	Animation speed multiplier (0.01–3.0)
`zoom`	number	`7.5`	Zoom level of the pattern field (1–20)
`iterations`	number	`10`	Number of warp iterations (1–20)
`iterationStep`	number	`0.77`	Step size between iterations (0.1–2.0)
`seedFactor`	number	`1`	Fractional seed factor per iteration (0.1–5.0)
`warpPower`	number	`1.5`	Warp distortion strength exponent (0.1–5.0)
`channelOffset1`	number	`3`	Color offset channel 1 (0–6.28)
`channelOffset2`	number	`3`	Color offset channel 2 (0–6.28)
`channelOffset3`	number	`2`	Color offset channel 3 (0–6.28)
`drift`	number	`3`	Translation per iteration (0–10)
`rotationRate`	number	`2`	Rotation multiplier per iteration (0–10)
`compression`	number	`0.001`	Compression curve applied before shading (0.0001–0.1)
`threshold`	number	`0.3`	Brightness threshold subtracted before power curve (0–1)
`contrast`	number	`5`	Contrast exponent for final shading (1–15)
`preBrightness`	number	`2.1`	Pre-shade brightness multiplier (0.5–5.0)
`preOffset`	number	`0.9`	Pre-shade offset (0–2)
`tintR`	number	`1`	Tint color red channel (0–1)
`tintG`	number	`0.07`	Tint color green channel (0–1)
`tintB`	number	`1`	Tint color blue channel (0–1)
`glowIntensity`	number	`0.8`	Radial glow intensity from center (0–3)
`backgroundColor`	string	`"#000000"`	Background color in hex
`opacity`	number	`1`	Master opacity (0–1)
`cursorInteraction`	boolean	`false`	Enable cursor interaction to intensify warp distortion 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 for styling

Default:""

childrenReactNode

Content rendered above the effect

Default:undefined

speednumber

Animation speed multiplier (0.01–3.0)

Default:1

zoomnumber

Zoom level of the pattern field (1–20)

Default:7.5

iterationsnumber

Number of warp iterations (1–20)

Default:10

iterationStepnumber

Step size between iterations (0.1–2.0)

Default:0.77

seedFactornumber

Fractional seed factor per iteration (0.1–5.0)

Default:1

warpPowernumber

Warp distortion strength exponent (0.1–5.0)

Default:1.5

channelOffset1number

Color offset channel 1 (0–6.28)

Default:3

channelOffset2number

Color offset channel 2 (0–6.28)

Default:3

channelOffset3number

Color offset channel 3 (0–6.28)

Default:2

driftnumber

Translation per iteration (0–10)

Default:3

rotationRatenumber

Rotation multiplier per iteration (0–10)

Default:2

compressionnumber

Compression curve applied before shading (0.0001–0.1)

Default:0.001

thresholdnumber

Brightness threshold subtracted before power curve (0–1)

Default:0.3

contrastnumber

Contrast exponent for final shading (1–15)

Default:5

preBrightnessnumber

Pre-shade brightness multiplier (0.5–5.0)

Default:2.1

preOffsetnumber

Pre-shade offset (0–2)

Default:0.9

tintRnumber

Tint color red channel (0–1)

Default:1

tintGnumber

Tint color green channel (0–1)

Default:0.07

tintBnumber

Tint color blue channel (0–1)

Default:1

glowIntensitynumber

Radial glow intensity from center (0–3)

Default:0.8

backgroundColorstring

Background color in hex

Default:"#000000"

opacitynumber

Master opacity (0–1)

Default:1

cursorInteractionboolean

Enable cursor interaction to intensify warp distortion near pointer

Default:false

cursorIntensitynumber

Cursor effect strength multiplier (0–3)

Default:1