<%= require('html-loader!./partials/header.html') %>

brusher

A tiny little library to add interactive backgrounds to webpages

Star

Background of this page has been auto created by brusher. Move your mouse around to see it in action.

All you need is an image. Below code shows how the current page has been initialized

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

  brusher.init();
  

There are several options that you can use to modify the result. Have a look at the section below.

Available Options

Here is the list of options that you may use

const brusher = new Brusher({
    image: 'abstract.png', // Path of the image to be used as a brush
    keepBlur: true, // Grow the cleared blurry section again after user has cleared it
    stroke: 80, // Stroke size for the brush
    lineStyle: 'round', // Brush style (round, square, butt)
    autoBlur: false, // Brusher will use the provided image for the blurry background
    autoBlurValue: 15, // Blur strength in pixels
  });

  brusher.init();
  

If you have any questions, feel free to reach out

Examples

Find some of the examples demonstrating some of the options in use through the buttons below.

Non Sticky Blur Background Less Demo Sticky Blur Demo Different Line Style
<%= require('html-loader!./partials/footer.html') %>