WaveDistortion

Wave-based distortion with multiple waveform types

Props

strengthnumber

Default:0.3

Distortion intensity

strength

numberDefault: 0.3

Distortion intensity

frequencynumber

Default:1

Number of bends/waves

frequency

numberDefault: 1

Number of bends/waves

speednumber

Default:1

Animation speed

speed

numberDefault: 1

Animation speed

anglenumber

Default:0

Direction of wave distortion in degrees

angle

numberDefault: 0

Direction of wave distortion in degrees

waveType"sine" | "triangle" | "square" | "sawtooth" | "bounce"

Default:sine

Shape of the distortion wave

waveType

"sine" | "triangle" | "square" | "sawtooth" | "bounce"Default: sine

Shape of the distortion wave

edges"stretch" | "transparent" | "mirror" | "wrap"

Default:stretch

How to handle edges when distortion pushes content out of bounds

edges

"stretch" | "transparent" | "mirror" | "wrap"Default: stretch

How to handle edges when distortion pushes content out of bounds

Usage

<Shader>
  <WaveDistortion>
    <Circle />
  </WaveDistortion>
</Shader>

<Shader>
  <WaveDistortion>
    <Circle />
  </WaveDistortion>
</Shader>

<Shader>
  <WaveDistortion>
    <Circle />
  </WaveDistortion>
</Shader>

<Shader>
  <WaveDistortion>
    <Circle />
  </WaveDistortion>
</Shader>

import { createShader } from 'shaders/js'

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

Voronoi

Weave

Documentation

WaveDistortion

Props

Usage