🌫 Soften

For all one of your blurry image needs. Demo

Install

yarn add soften

Use

const soften = require('soften')
 
soften({ filePath: 'path to image' })
  .then(data => /* do stuff with data */)
  .catch(e => console.error(e))

If using with Gatsby Image

<Img
  placeholderStyle={{ filter: 'blur(20px)' }}
  imgStyle={{ transition: 'opacity .3s' }}
  fluid={{
    ...data // data from soften()
    src: 'url to real image'
  }}
  critical={true}
/>