SineWave

Animated wave with thickness and softness

Props

color
The color of the sine wave
Type
string
Default
#ffffff
amplitude
The height/amplitude of the sine wave
Type
number
Default
0.15
frequency
The frequency/number of wave cycles
Type
number
Default
1
speed
The animation speed of the wave
Type
number
Default
1
angle
The rotation angle of the wave (in degrees)
Type
number
Default
0
position
The center position of the wave
Type
{x: number, y: number}
Default
{"x":0.5,"y":0.5}
thickness
The thickness of the wave line
Type
number
Default
0.2
softness
Edge softness of the wave line
Type
number
Default
0.4

Usage

<Shader>
  <SineWave
    color="#ffffff"
  />
</Shader>

<Shader>
  <SineWave
    color="#ffffff"
  />
</Shader>

<Shader>
  <SineWave
    color="#ffffff"
  />
</Shader>

<Shader>
  <SineWave
    color="#ffffff"
  />
</Shader>

import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'SineWave', props: { color: '#ffffff' } }
  ]
})