Rubber Fluid
Rubbery fluid distortion shader
Customize
Props
28| 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 | numberContainer width
"100%"heightstring | numberContainer height
"100%"classNamestringAdditional CSS classes for styling
""childrenReactNodeContent rendered above the effect
undefinedspeednumberAnimation speed multiplier (0.01–3.0)
1zoomnumberZoom level of the pattern field (1–20)
7.5iterationsnumberNumber of warp iterations (1–20)
10iterationStepnumberStep size between iterations (0.1–2.0)
0.77seedFactornumberFractional seed factor per iteration (0.1–5.0)
1warpPowernumberWarp distortion strength exponent (0.1–5.0)
1.5channelOffset1numberColor offset channel 1 (0–6.28)
3channelOffset2numberColor offset channel 2 (0–6.28)
3channelOffset3numberColor offset channel 3 (0–6.28)
2driftnumberTranslation per iteration (0–10)
3rotationRatenumberRotation multiplier per iteration (0–10)
2compressionnumberCompression curve applied before shading (0.0001–0.1)
0.001thresholdnumberBrightness threshold subtracted before power curve (0–1)
0.3contrastnumberContrast exponent for final shading (1–15)
5preBrightnessnumberPre-shade brightness multiplier (0.5–5.0)
2.1preOffsetnumberPre-shade offset (0–2)
0.9tintRnumberTint color red channel (0–1)
1tintGnumberTint color green channel (0–1)
0.07tintBnumberTint color blue channel (0–1)
1glowIntensitynumberRadial glow intensity from center (0–3)
0.8backgroundColorstringBackground color in hex
"#000000"opacitynumberMaster opacity (0–1)
1cursorInteractionbooleanEnable cursor interaction to intensify warp distortion near pointer
falsecursorIntensitynumberCursor effect strength multiplier (0–3)
1