Silk Waves
Smooth flowing silk-like wave animation
silk-waves-tw
Customize
Tweak the props liveBasic
1
2
1
1
Transform
0
0
0
1
1
Effects
1
1
1
Props
| Name | Type | Default | Description |
|---|---|---|---|
speed | number | 1 | Animation speed multiplier. |
scale | number | 2 | Zoom level of the wave pattern. |
distortion | number | 1 | Controls wave amplitude/swirl. |
curve | number | 1 | Controls phase shift/rotation. |
contrast | number | 1 | Controls alpha contrast/sharpness. |
colors | string[] | [...] | Array of 8 hex colors for the gradient. |
rotation | number | 0 | Rotation of the pattern in degrees. |
offsetX | number | 0 | Horizontal offset/pan of the pattern. |
offsetY | number | 0 | Vertical offset/pan of the pattern. |
brightness | number | 1 | Overall brightness multiplier. |
opacity | number | 1 | Overall opacity (0-1). |
complexity | number | 1 | Wave complexity (affects iteration count, 0.5-2). |
frequency | number | 1 | Wave stripe frequency. |
className | string | "" | Additional CSS classes. |
speednumberAnimation speed multiplier.
Default:
1scalenumberZoom level of the wave pattern.
Default:
2distortionnumberControls wave amplitude/swirl.
Default:
1curvenumberControls phase shift/rotation.
Default:
1contrastnumberControls alpha contrast/sharpness.
Default:
1colorsstring[]Array of 8 hex colors for the gradient.
Default:
[...]rotationnumberRotation of the pattern in degrees.
Default:
0offsetXnumberHorizontal offset/pan of the pattern.
Default:
0offsetYnumberVertical offset/pan of the pattern.
Default:
0brightnessnumberOverall brightness multiplier.
Default:
1opacitynumberOverall opacity (0-1).
Default:
1complexitynumberWave complexity (affects iteration count, 0.5-2).
Default:
1frequencynumberWave stripe frequency.
Default:
1classNamestringAdditional CSS classes.
Default:
""