FallingLines
Directional falling lines with a leading-to-trailing color fade
Directional falling lines with a leading-to-trailing color fade
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| colorA | color | #ffffff | Color at the leading edge of each line |
| colorB | color | #ffffff00 | Color at the trailing edge (transparent by default) |
| colorSpace | "linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch" | linear | Color space for interpolation between lead and trail colors |
| angle | range | 90 | Direction of movement in degrees (90=down, 270=up, 0=right, 180=left) |
| speed | range | 0.5 | Movement speed |
| speedVariance | range | 0.3 | Per-line speed variance (0=uniform, 1=high variance) |
| density | range | 15 | Number of line columns across the canvas |
| trailLength | range | 0.35 | Streak length relative to spacing (0=point, 1=continuous) |
| balance | range | 0.5 | Color mix midpoint (0.5=linear, 0=all trailing/colorB, 1=all leading/colorA) |
| strokeWidth | range | 0.15 | Line thickness as fraction of column width (0=hairline, 1=full width) |
| rounding | range | 1 | Rounds the leading edge (0=flat/square, 1=fully rounded cap) |
Usage
vue
<Shader>
<FallingLines />
</Shader>