Rubber Fluid
Rubbery fluid distortion shader
rubber-fluid-tw
Customize
Animation
1
7.5
10
1
Warp
0.77
1
1.5
3
2
Channels
3
3
2
Shading
0.001
0.3
5
2.1
0.9
Tint
1
0.07
1
0.8
1
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) |