Liquid Lines
Flowing liquid line animation effect
liquid-lines-tw
Customize
Tweak the props liveAnimation
0.4
3
Wave Settings
49
0.05
0.6
Line Appearance
#ffffff0.009
Background
#ffffff#333333Visual Adjustments
2.5
1.1
1
Position & Scale
0.3
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 | stringWidth of the component in pixels or CSS value
Default:
"100%"heightnumber | stringHeight of the component in pixels or CSS value
Default:
"100%"speednumberAnimation speed multiplier
Default:
0.4iterationsnumberNumber of iterations for detail (higher = more detailed but slower)
Default:
3waveFrequencynumberWave frequency - controls how many waves appear
Default:
49depthStepnumberDepth progression - how much depth changes per iteration
Default:
0.05lineThicknessnumberLine thickness - controls the thickness of the lines
Default:
0.009waveAmplitudenumberWave amplitude - how much the waves displace
Default:
0.6lineColorstringPrimary line color
Default:
"#ffffff"lightBackgroundstringBackground color for light mode
Default:
"#ffffff"darkBackgroundstringBackground color for dark mode
Default:
"#000000"brightnessnumberBrightness multiplier
Default:
2.5contrastnumberContrast adjustment
Default:
1.1offsetXnumberHorizontal offset
Default:
0offsetYnumberVertical offset
Default:
0scalenumberPattern scale
Default:
0.3opacitynumberAlpha/opacity of the effect
Default:
1classNamestringAdditional CSS classes
Default:
""