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
chromatic
Scatters red and blue separately for a sparkly color grain
Type
number
Default
0

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