Liquid Lines

Flowing liquid line animation effect

liquid-lines-tw

Customize

Speed

0.4

Iterations

Frequency

Depth Step

0.05

Amplitude

0.6

Line Color

Line Thickness

0.009

Light Mode

Dark Mode

Brightness

2.5

Contrast

1.1

Opacity

1.00

Scale

0.3

Offset X

0.0

Offset Y

0.0

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	`0.4`	Animation speed multiplier
`iterations`	number	`3`	Number of iterations for detail (higher = more detailed but slower)
`waveFrequency`	number	`49`	Wave frequency - controls how many waves appear
`depthStep`	number	`0.05`	Depth progression - how much depth changes per iteration
`lineThickness`	number	`0.009`	Line thickness - controls the thickness of the lines
`waveAmplitude`	number	`0.6`	Wave amplitude - how much the waves displace
`lineColor`	string	`"#ffffff"`	Primary line color
`lightBackground`	string	`"#ffffff"`	Background color for light mode
`darkBackground`	string	`"#000000"`	Background color for dark mode
`brightness`	number	`2.5`	Brightness multiplier
`contrast`	number	`1.1`	Contrast adjustment
`offsetX`	number	`0`	Horizontal offset
`offsetY`	number	`0`	Vertical offset
`scale`	number	`0.3`	Pattern scale
`opacity`	number	`1`	Alpha/opacity of the effect
`className`	string	`""`	Additional CSS classes

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

Default0.4

iterationsnumber

Number of iterations for detail (higher = more detailed but slower)

Default3

waveFrequencynumber

Wave frequency - controls how many waves appear

Default49

depthStepnumber

Depth progression - how much depth changes per iteration

Default0.05

lineThicknessnumber

Line thickness - controls the thickness of the lines

Default0.009

waveAmplitudenumber

Wave amplitude - how much the waves displace

Default0.6

lineColorstring

Primary line color

Default"#ffffff"

lightBackgroundstring

Background color for light mode

Default"#ffffff"

darkBackgroundstring

Background color for dark mode

Default"#000000"

brightnessnumber

Brightness multiplier

Default2.5

contrastnumber

Contrast adjustment

Default1.1

offsetXnumber

Horizontal offset

Default0

offsetYnumber

Vertical offset

Default0

scalenumber

Pattern scale

Default0.3

opacitynumber

Alpha/opacity of the effect

Default1

classNamestring

Additional CSS classes

Default""