react-brusher v1.0.0

Brusher

Demo: masonwang025.github.io/brusher

See brusher.js for code. Little vanilla JS library to add interactive backgrounds to your webpages.

(View Demo)

You can target any DOM node and create multiple instances of Brusher.

Usage

Download the brusher.js file. For the basic usage, all you need to do is create an instance of Brusher and provide an image.

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

brusher.init();

This is the image that will be shown when brusher hovers over. To provide the original image, set a CSS background. For example, use a blurred background or a black and white one (like the demo).

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
  keepCleared: true, // Put the blur back after user has cleared it
  stroke: 80, // Stroke size for the brush
  lineStyle: "round", // Brush style (round, square, butt)
  removeStepsTime: 120, // how long old steps should last (does not matter for keepCleared: true, may lag if too large)
});

brusher.init();

A note on blurry background: blur the image yourself and apply it to the body for improved performance. Here is the sample CSS that you may use for the background

body {
  background-size: cover;
  background-position: 0 0;
  background-attachment: fixed;
  background-image: url(path/to/blurred/image.jpg);
}

License

This was modified from Kamran Ahmed's original source code: MIT © Kamran Ahmed