TiltShift

Selective focus blur mimicking tilt-shift photography

Props

intensitynumber

Default:50

Maximum blur intensity at edges

intensity

numberDefault: 50

Maximum blur intensity at edges

widthnumber

Default:0.3

Width of the sharp focus area

width

numberDefault: 0.3

Width of the sharp focus area

falloffnumber

Default:0.3

Distance over which blur transitions to full strength

falloff

numberDefault: 0.3

Distance over which blur transitions to full strength

anglenumber

Default:0

Rotation angle of the focus line (in degrees)

angle

numberDefault: 0

Rotation angle of the focus line (in degrees)

center{x: number, y: number}

Default:{"x":0.5,"y":0.5}

Center point of the focus line

center

{x: number, y: number}Default: {"x":0.5,"y":0.5}

Center point of the focus line

Usage

<Shader>
  <TiltShift
    :intensity="50"
  >
    <Circle />
  </TiltShift>
</Shader>

<Shader>
  <TiltShift
    intensity={50}
  >
    <Circle />
  </TiltShift>
</Shader>

<Shader>
  <TiltShift
    intensity={50}
  >
    <Circle />
  </TiltShift>
</Shader>

<Shader>
  <TiltShift
    intensity={50}
  >
    <Circle />
  </TiltShift>
</Shader>

import { createShader } from 'shaders/js'

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

Swirl

Tint

Documentation

TiltShift

Props

Usage