Strands
Procedural wavy strands with layered animation
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| speed | range | 0.5 | Overall animation speed |
| amplitude | range | 2 | How far the strands wave away from their resting line |
| frequency | range | 0.3 | How many waves run along each strand |
| lineCount | range | 8 | Number of strands |
| lineWidth | range | 0.05 | Thickness of each strand’s solid core |
| softness | range | 0.05 | Softness of each strand’s edge (0 is crisp, higher is feathered) |
| spread | range | 0.2 | How far the strands fan out across the field |
| pinEdges | checkbox | false | Pin the strands so they converge to the start and end points |
| stops | gradient-stops | [{"color":"#00e5ff","position":0},{"color":"#5b8cff","position":0.34},{"color":"#b06bff","position":0.67},{"color":"#ff5fa2","position":1}] | Multi-stop gradient colors (overrides Color A / Color B when set) |
| colorSpace | "linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch" | oklab | Color space used to blend the gradient |
| colorScale | range | 1 | How many times the gradient repeats along the strands |
| colorVariance | range | 1 | At 0 every strand shares the same color; at 1 the strands spread across the full gradient |
| colorSpeed | range | 1 | Speed at which the colors flow along the strands (loops) |
| start | position | {"x":0,"y":0.5} | Starting point of the strands |
| end | position | {"x":1,"y":0.5} | Ending point of the strands |
Usage
vue
<Shader>
<Strands />
</Shader>