FallingLines

Directional falling lines with a leading-to-trailing color fade

Props

  • colorA

    Color at the leading edge of each line

    Type
    string
    Default
    #ffffff

  • colorB

    Color at the trailing edge (transparent by default)

    Type
    string
    Default
    #ffffff00

  • colorSpace

    Color space for interpolation between lead and trail colors

    Type
    "linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"
    Default
    linear

  • angle

    Direction of movement in degrees (90=down, 270=up, 0=right, 180=left)

    Type
    number
    Default
    90

  • speed

    Movement speed

    Type
    number
    Default
    0.5

  • speedVariance

    Per-line speed variance (0=uniform, 1=high variance)

    Type
    number
    Default
    0.3

  • density

    Number of line columns across the canvas

    Type
    number
    Default
    15

  • trailLength

    Streak length relative to spacing (0=point, 1=continuous)

    Type
    number
    Default
    0.35

  • balance

    Color mix midpoint (0.5=linear, 0=all trailing/colorB, 1=all leading/colorA)

    Type
    number
    Default
    0.5

  • strokeWidth

    Line thickness as fraction of column width (0=hairline, 1=full width)

    Type
    number
    Default
    0.15

  • rounding

    Rounds the leading edge (0=flat/square, 1=fully rounded cap)

    Type
    number
    Default
    1

Usage

<Shader>
  <FallingLines />
</Shader>