DiffuseBlur

Grain-like pixel displacement at random

Props

intensity
Intensity of the diffuse blur effect
Type
number
Default
30
edges
How to handle edges when distortion pushes content out of bounds
Type
"stretch" | "transparent" | "mirror" | "wrap"
Default
stretch

Usage

<Shader>
  <DiffuseBlur
    :intensity="30"
  >
    <Circle />
  </DiffuseBlur>
</Shader>

<Shader>
  <DiffuseBlur
    intensity={30}
  >
    <Circle />
  </DiffuseBlur>
</Shader>

<Shader>
  <DiffuseBlur
    intensity={30}
  >
    <Circle />
  </DiffuseBlur>
</Shader>

<Shader>
  <DiffuseBlur
    intensity={30}
  >
    <Circle />
  </DiffuseBlur>
</Shader>

import { createShader } from 'shaders/js'

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