Strands

Flowing ribbons of light with a multi-color gradient

Props

speednumber

Default:0.5

Overall animation speed

speed

numberDefault: 0.5

Overall animation speed

amplitudenumber

Default:2

How far the strands wave away from their resting line

amplitude

numberDefault: 2

How far the strands wave away from their resting line

frequencynumber

Default:0.3

How many waves run along each strand

frequency

numberDefault: 0.3

How many waves run along each strand

lineCountnumber

Default:8

Number of strands

lineCount

numberDefault: 8

Number of strands

lineWidthnumber

Default:0.05

Thickness of each strand’s solid core

lineWidth

numberDefault: 0.05

Thickness of each strand’s solid core

softnessnumber

Default:0.05

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

softness

numberDefault: 0.05

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

spreadnumber

Default:0.2

How far the strands fan out across the field

spread

numberDefault: 0.2

How far the strands fan out across the field

pinEdgesboolean

Default:false

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

pinEdges

booleanDefault: false

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

stopsobject

Default:

[{"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)

stops

objectDefault:

[{"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"

Default:oklab

Color space used to blend the gradient

colorSpace

Color space used to blend the gradient

colorScalenumber

Default:1

How many times the gradient repeats along the strands

colorScale

numberDefault: 1

How many times the gradient repeats along the strands

colorVariancenumber

Default:1

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

colorVariance

numberDefault: 1

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

colorSpeednumber

Default:1

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

colorSpeed

numberDefault: 1

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

start{x: number, y: number}

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

Starting point of the strands

start

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

Starting point of the strands

end{x: number, y: number}

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

Ending point of the strands

end

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

Ending point of the strands

Usage

<Shader>
  <Strands />
</Shader>

<Shader>
  <Strands />
</Shader>

<Shader>
  <Strands />
</Shader>

<Shader>
  <Strands />
</Shader>

import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'Strands', props: {} }
  ]
})

Stone

Stretch