Liquid Lines
Flowing liquid line animation effect
liquid-lines-tw
Customize
Animation
0.4
3
Wave Settings
49
0.05
0.6
Line Appearance
0.009
Background
Visual 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 |