Interactive Blurry Background In Vanilla JavaScript – Brusher

Brusher is a fancy vanilla JavaScript library to create an interactive background that allows you to reveal the blurred background image with a brush effect.

How to use it:

Installation & download.

# Yarn
$ yarn add brusher
# NPM
$ npm install brusher --save

Import the brusher.

import Brusher from 'brusher';

Or import the compiled version of the Brusher library into the document.

<script src="//unpkg.com/brusher/dist/brusher.min.js"></script>

Create a new Brush instance and specify an image to blur.

const brusher = new Brusher({
      image: 'bg.png'
});

Initialize the Brush library and done.

brusher.init();

All possible options to customize the interactive background.

const brusher = new Brusher({
      // Put the blur back after user has cleared it
      keepCleared: true,     
      // Stroke size for the brush
      stroke: 80,            
      // Brush style (round, square, butt)
      lineStyle: 'round',    
      // Brusher will use the provided image for the blurry background
      autoBlur: false,       
      // Blur strength in pixels
      autoBlurValue: 15
        
});