TiltShift2

An alternate tilt-shift implementation with direct control over the blurred band's start/end points and blur direction, instead of a single centered focus-area size. For the simpler, centered version, see TiltShift.

import { TiltShift2 } from '@react-three/postprocessing'
import { BlendFunction } from 'postprocessing'

return (
  <TiltShift2
    blendFunction={BlendFunction.NORMAL} // the blend function of this effect
    blur={0.15} // the blur intensity, [0, 1] (can go beyond 1)
    taper={0.5} // the size of the sharp/in-focus area, [0, 1] (can go beyond 1)
    start={[0.5, 0.0]} // start point of the blur band, in screen-space percent [0, 1]
    end={[0.5, 1.0]} // end point of the blur band, in screen-space percent [0, 1]
    samples={10} // number of blur samples
    direction={[1, 1]} // direction of the blur
  />
)

Props
NameTypeDefaultDescription
blendFunctionBlendFunctionBlendFunction.NORMALThe blend function of this effect.
blurNumber0.15The blur intensity. Range [0, 1] (can exceed 1 for extra).
taperNumber0.5The size of the sharp/in-focus area. Range [0, 1] (can exceed 1).
start[Number, Number][0.5, 0.0]Start point of the blur band, in screen-space percent.
end[Number, Number][0.5, 1.0]End point of the blur band, in screen-space percent.
samplesNumber10The number of blur samples.
direction[Number, Number][1, 1]The direction of the blur.

Edit this page