Liquid Bars
Animated liquid bar effect with smooth wave motion
liquid-bars-tw
Customize
Basic
6
1
0.4
1
Wave
1
0.6
20
0.25
2
0.5
Refraction
5
0.3
0.04
0.2
0.1
0.2
1.4
20
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 | 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 |