Liquid Bars

Animated liquid bar effect with smooth wave motion

liquid-bars-tw

Customize

Tweak the props live

Basic

Color

#a855f7

Bar Count6

Speed1

Scale0.4

Opacity1

Wave

Complexity1

Amplitude0.6

Reflection Freq20

Streak Intensity0.25

Metallic Contrast2

Highlight Warmth0.5

Refraction

Strength5

Edge Width0.3

Edge Softness0.04

Fresnel Intensity0.2

Edge Highlight0.1

Gap Darkness0.2

Wave Speed1.4

Wave Frequency20

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)

Default:1

colorstring

Base color in hex format

Default:"#a855f7"

barCountnumber

Number of vertical bars

Default:6

scalenumber

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

Default:0.4

waveComplexitynumber

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

Default:1

waveAmplitudenumber

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

Default:0.6

reflectionFrequencynumber

Reflection band frequency (1-20)

Default:20

streakIntensitynumber

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

Default:0.25

metallicContrastnumber

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

Default:2

highlightWarmthnumber

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

Default:0.5

refractionStrengthnumber

Refraction strength at bar edges (0-5)

Default:5

edgeWidthnumber

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

Default:0.3

edgeSoftnessnumber

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

Default:0.04

fresnelIntensitynumber

Fresnel intensity - edge glow effect (0-1)

Default:0.2

edgeHighlightnumber

Edge highlight brightness (0-1)

Default:0.1

gapDarknessnumber

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

Default:0.2

refractionWaveSpeednumber

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

Default:1.4

refractionWaveFrequencynumber

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

Default:20

opacitynumber

Master opacity (0-1)

Default:1

classNamestring

Additional CSS classes

Default:""

childrenReact.ReactNode

Content to render on top of the effect

Default:undefined