Liquid Bars

Animated liquid bar effect with smooth wave motion

liquid-bars-tw

Customize

Color

Bar Count

Speed

1.0

Scale

0.4

Opacity

1.00

Complexity

Amplitude

0.6

Reflection Freq

Streak Intensity

0.25

Metallic Contrast

2.0

Highlight Warmth

0.50

Strength

5.0

Edge Width

0.30

Edge Softness

0.04

Fresnel Intensity

0.20

Edge Highlight

0.10

Gap Darkness

0.20

Wave Speed

1.4

Wave Frequency

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

widthnumber | string

Width of the component in pixels or CSS value

Default"100%"

heightnumber | string

Height of the component in pixels or CSS value

Default"100%"

speednumber

Animation speed multiplier (0.1-5)

Default1

colorstring

Base color in hex format

Default"#a855f7"

barCountnumber

Number of vertical bars

Default6

scalenumber

Scale of the wave pattern (0.1-10) - higher = larger waves

Default0.4

waveComplexitynumber

Wave complexity - number of noise layers (1-5)

Default1

waveAmplitudenumber

Wave amplitude - intensity of wave displacement (0-2)

Default0.6

reflectionFrequencynumber

Reflection band frequency (1-20)

Default20

streakIntensitynumber

Streak intensity - brightness of highlight streaks (0-1)

Default0.25

metallicContrastnumber

Metallic contrast - difference between dark and bright areas (0-2)

Default2

highlightWarmthnumber

Highlight warmth - warm tint on highlights (0-1)

Default0.5

refractionStrengthnumber

Refraction strength at bar edges (0-5)

Default5

edgeWidthnumber

Edge width - width of refraction zone (0.01-0.5)

Default0.3

edgeSoftnessnumber

Edge softness - blur at bar boundaries (0.01-0.2)

Default0.04

fresnelIntensitynumber

Fresnel intensity - edge glow effect (0-1)

Default0.2

edgeHighlightnumber

Edge highlight brightness (0-1)

Default0.1

gapDarknessnumber

Gap darkness - how dark the gaps between bars are (0-1)

Default0.2

refractionWaveSpeednumber

Refraction wave speed - speed of wavy refraction (0-5)

Default1.4

refractionWaveFrequencynumber

Refraction wave frequency - frequency of edge waves (1-30)

Default20

opacitynumber

Master opacity (0-1)

Default1

classNamestring

Additional CSS classes

Default""

childrenReact.ReactNode

Content to render on top of the effect

Defaultundefined