Toggle Sidebar B
Light & dark mode D

WaveDistortion

Wave-based distortion with multiple waveform types

Wave-based distortion with multiple waveform types

Props

PropTypeDefaultDescription
strengthrange0.3Distortion intensity
frequencyrange1Number of bends/waves
speedrange1Animation speed
anglerange0Direction of wave distortion in degrees
waveType"sine" | "triangle" | "square" | "sawtooth" | "bounce"sineShape of the distortion wave
edges"stretch" | "transparent" | "mirror" | "wrap"stretchHow to handle edges when distortion pushes content out of bounds

Usage

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