react-tiltshift

React component to create images tiltshift.

Usage

import TiltShift from 'react-tiltshift'

<TiltShift src="../images/sf.jpg" position="38" width="600" />

You just need to pass the src prop. You can pass any attribute you'd normally pass to a img html tag. You can pass the following props to configure the effect:

• aperture (0-100): the amount of area that is in focus. 10 would mean one tenth of the image is sharp.
• blur (0-10): the blur radius in pixels. Something between 1 or 2 usually gives the best results.
• direction (“horizontal”, “vertical”, or 0-360): the direction of the effect with zero at right.
• position (0-100): defines the point of focus. 50 would be the image middle.
• smoothness (0-100): the amount of area between complete focus and complete blur. The higher the value, the “smoother" the blur.

Demo

Before:

After:

Inspiration & Base

• jQuery tiltShift.js