ChromaticAberration

Separate RGB channels for a prismatic distortion effect

Props

strengthnumber

Default:0.2

Overall strength of the chromatic aberration effect

strength

numberDefault: 0.2

Overall strength of the chromatic aberration effect

anglenumber

Default:0

Direction of the chromatic aberration in degrees

angle

numberDefault: 0

Direction of the chromatic aberration in degrees

redOffsetnumber

Default:-1

Red channel offset multiplier

redOffset

numberDefault: -1

Red channel offset multiplier

greenOffsetnumber

Default:0

Green channel offset multiplier

greenOffset

numberDefault: 0

Green channel offset multiplier

blueOffsetnumber

Default:1

Blue channel offset multiplier

blueOffset

numberDefault: 1

Blue channel offset multiplier

Usage

<Shader>
  <ChromaticAberration>
    <Circle />
  </ChromaticAberration>
</Shader>

<Shader>
  <ChromaticAberration>
    <Circle />
  </ChromaticAberration>
</Shader>

<Shader>
  <ChromaticAberration>
    <Circle />
  </ChromaticAberration>
</Shader>

<Shader>
  <ChromaticAberration>
    <Circle />
  </ChromaticAberration>
</Shader>

import { createShader } from 'shaders/js'

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

ChromaFlow

Circle

Documentation

ChromaticAberration

Props

Usage