Radial Liquid
Radial shader waves with distortion and various effects
radial-liquid-tw
Customize
Colors & Basic
0.7x
4
1
Distortion & Wave
5
0
1.1
0.2
0
Refraction
25
0.5
1.5
10
0.5
0.5
Props
| Name | Type | Default | Description |
|---|---|---|---|
| width | number | string | "100%" | Width of the component in pixels or CSS value |
| height | number | string | "100%" | Height of the component in pixels or CSS value |
| speed | number | 0.7 | Animation speed multiplier |
| color1 | string | "#ffffff" | First color in hex format |
| color2 | string | "#000000" | Second color in hex format |
| color3 | string | "#000000" | Third color in hex format |
| backgroundColor | string | "#ffffff" | Background color in hex format |
| iterations | number | 4 | Number of circle layers to render (1-5) |
| position | "center" | "top" | "bottom" | "left" | "right" | "bottom" | Position of the effect |
| overallOpacity | number | 1.0 | Master opacity control (0-1) |
| waveSize | number | 5.0 | Size of the wave distortion (0.1-5) |
| edgeSoftness | number | 0.0 | Blur/soften ring edges (0-1) |
| scale | number | 1.1 | Overall scale/zoom (0.1-5) |
| quality | "low" | "medium" | "high" | "high" | Rendering quality |
| distortionType | "lava" | "plasma" | "plasma" | Type of distortion |
| distortionScale | number | 0.2 | Scale of distortion pattern (0.1-10) |
| chromaShift | number | 0.0 | RGB color separation effect (0-1) |
| enableCursorInteraction | boolean | true | Enable cursor interaction for liquid movement |
| refractionStrength | number | 25.0 | Refraction strength at ring edges (0-25) |
| refractionEdgeWidth | number | 0.5 | Width of the refraction zone at ring edges (0.01-0.5) |
| refractionWaveSpeed | number | 1.5 | Speed of wavy refraction animation (0-5) |
| refractionWaveFrequency | number | 10.0 | Frequency of refraction waves (1-30) |
| fresnelIntensity | number | 0.5 | Fresnel intensity - edge glow effect (0-1) |
| edgeHighlight | number | 0.5 | Edge highlight brightness (0-1) |
| className | string | "" | Additional CSS classes |
| children | React.ReactNode | undefined | Content to render on top of the effect |