Liquid ripples spreading from a center
| 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 |
widthnumber | stringWidth of the component in pixels or CSS value
"100%"heightnumber | stringHeight of the component in pixels or CSS value
"100%"speednumberAnimation speed multiplier
0.7color1stringFirst color in hex format
"#ffffff"color2stringSecond color in hex format
"#000000"color3stringThird color in hex format
"#000000"backgroundColorstringBackground color in hex format
"#ffffff"iterationsnumberNumber of circle layers to render (1-5)
4position"center" | "top" | "bottom" | "left" | "right"Position of the effect
"bottom"overallOpacitynumberMaster opacity control (0-1)
1.0waveSizenumberSize of the wave distortion (0.1-5)
5.0edgeSoftnessnumberBlur/soften ring edges (0-1)
0.0scalenumberOverall scale/zoom (0.1-5)
1.1quality"low" | "medium" | "high"Rendering quality
"high"distortionType"lava" | "plasma"Type of distortion
"plasma"distortionScalenumberScale of distortion pattern (0.1-10)
0.2chromaShiftnumberRGB color separation effect (0-1)
0.0enableCursorInteractionbooleanEnable cursor interaction for liquid movement
truerefractionStrengthnumberRefraction strength at ring edges (0-25)
25.0refractionEdgeWidthnumberWidth of the refraction zone at ring edges (0.01-0.5)
0.5refractionWaveSpeednumberSpeed of wavy refraction animation (0-5)
1.5refractionWaveFrequencynumberFrequency of refraction waves (1-30)
10.0fresnelIntensitynumberFresnel intensity - edge glow effect (0-1)
0.5edgeHighlightnumberEdge highlight brightness (0-1)
0.5classNamestringAdditional CSS classes
""childrenReact.ReactNodeContent to render on top of the effect
undefined