Strands

Flowing ribbons of light with a multi-color gradient

Props

  • speed

    Overall animation speed

    Type
    number
    Default
    0.5

  • amplitude

    How far the strands wave away from their resting line

    Type
    number
    Default
    2

  • frequency

    How many waves run along each strand

    Type
    number
    Default
    0.3

  • lineCount

    Number of strands

    Type
    number
    Default
    8

  • lineWidth

    Thickness of each strand’s solid core

    Type
    number
    Default
    0.05

  • softness

    Softness of each strand’s edge (0 is crisp, higher is feathered)

    Type
    number
    Default
    0.05

  • spread

    How far the strands fan out across the field

    Type
    number
    Default
    0.2

  • pinEdges

    Pin the strands so they converge to the start and end points

    Type
    boolean
    Default
    false

  • stops

    Multi-stop gradient colors (overrides Color A / Color B when set)

    Type
    object
    Default
    [{"color":"#00e5ff","position":0},{"color":"#5b8cff","position":0.34},{"color":"#b06bff","position":0.67},{"color":"#ff5fa2","position":1}]

  • colorSpace

    Color space used to blend the gradient

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

  • colorScale

    How many times the gradient repeats along the strands

    Type
    number
    Default
    1

  • colorVariance

    At 0 every strand shares the same color; at 1 the strands spread across the full gradient

    Type
    number
    Default
    1

  • colorSpeed

    Speed at which the colors flow along the strands (loops)

    Type
    number
    Default
    1

  • start

    Starting point of the strands

    Type
    {x: number, y: number}
    Default
    {"x":0,"y":0.5}

  • end

    Ending point of the strands

    Type
    {x: number, y: number}
    Default
    {"x":1,"y":0.5}

Usage

<Shader>
  <Strands />
</Shader>