Glossy bars of liquid color rippling in waves
| 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 | 1 | Animation speed multiplier (0.1-5) |
color | string | "#a855f7" | Base color in hex format |
barCount | number | 6 | Number of vertical bars |
scale | number | 0.4 | Scale of the wave pattern (0.1-10) - higher = larger waves |
waveComplexity | number | 1 | Wave complexity - number of noise layers (1-5) |
waveAmplitude | number | 0.6 | Wave amplitude - intensity of wave displacement (0-2) |
reflectionFrequency | number | 20 | Reflection band frequency (1-20) |
streakIntensity | number | 0.25 | Streak intensity - brightness of highlight streaks (0-1) |
metallicContrast | number | 2 | Metallic contrast - difference between dark and bright areas (0-2) |
highlightWarmth | number | 0.5 | Highlight warmth - warm tint on highlights (0-1) |
refractionStrength | number | 5 | Refraction strength at bar edges (0-5) |
edgeWidth | number | 0.3 | Edge width - width of refraction zone (0.01-0.5) |
edgeSoftness | number | 0.04 | Edge softness - blur at bar boundaries (0.01-0.2) |
fresnelIntensity | number | 0.2 | Fresnel intensity - edge glow effect (0-1) |
edgeHighlight | number | 0.1 | Edge highlight brightness (0-1) |
gapDarkness | number | 0.2 | Gap darkness - how dark the gaps between bars are (0-1) |
refractionWaveSpeed | number | 1.4 | Refraction wave speed - speed of wavy refraction (0-5) |
refractionWaveFrequency | number | 20 | Refraction wave frequency - frequency of edge waves (1-30) |
opacity | number | 1 | Master opacity (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.1-5)
1colorstringBase color in hex format
"#a855f7"barCountnumberNumber of vertical bars
6scalenumberScale of the wave pattern (0.1-10) - higher = larger waves
0.4waveComplexitynumberWave complexity - number of noise layers (1-5)
1waveAmplitudenumberWave amplitude - intensity of wave displacement (0-2)
0.6reflectionFrequencynumberReflection band frequency (1-20)
20streakIntensitynumberStreak intensity - brightness of highlight streaks (0-1)
0.25metallicContrastnumberMetallic contrast - difference between dark and bright areas (0-2)
2highlightWarmthnumberHighlight warmth - warm tint on highlights (0-1)
0.5refractionStrengthnumberRefraction strength at bar edges (0-5)
5edgeWidthnumberEdge width - width of refraction zone (0.01-0.5)
0.3edgeSoftnessnumberEdge softness - blur at bar boundaries (0.01-0.2)
0.04fresnelIntensitynumberFresnel intensity - edge glow effect (0-1)
0.2edgeHighlightnumberEdge highlight brightness (0-1)
0.1gapDarknessnumberGap darkness - how dark the gaps between bars are (0-1)
0.2refractionWaveSpeednumberRefraction wave speed - speed of wavy refraction (0-5)
1.4refractionWaveFrequencynumberRefraction wave frequency - frequency of edge waves (1-30)
20opacitynumberMaster opacity (0-1)
1classNamestringAdditional CSS classes
""childrenReact.ReactNodeContent to render on top of the effect
undefined