Strands

Procedural wavy strands with layered animation

Props

speednumber

Default:0.5

Overall animation speed

speed

numberDefault: 0.5

Overall animation speed

amplitudenumber

Default:1

Wave height amplitude

amplitude

numberDefault: 1

Wave height amplitude

frequencynumber

Default:1

Wave frequency

frequency

numberDefault: 1

Wave frequency

lineCountnumber

Default:12

Number of wave lines

lineCount

numberDefault: 12

Number of wave lines

lineWidthnumber

Default:0.1

Width of wave lines

lineWidth

numberDefault: 0.1

Width of wave lines

waveColorstring

Default:#f1c907

Color of the waves

waveColor

stringDefault: #f1c907

Color of the waves

pinEdgesboolean

Default:true

Pin waves at edges (fade effect)

pinEdges

booleanDefault: true

Pin waves at edges (fade effect)

start{x: number, y: number}

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

Starting point of the waves

start

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

Starting point of the waves

end{x: number, y: number}

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

Ending point of the waves

end

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

Ending point of the waves

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: {} }
  ]
})

Star

Stretch

Documentation

Strands

Props

Usage