https://github.com/kamranahmedse/brusher

Create beautiful webpage backgrounds
https://github.com/kamranahmedse/brusher

Last synced: 2 days ago
JSON representation

Create beautiful webpage backgrounds

• Host: GitHub
• URL: https://github.com/kamranahmedse/brusher
• Owner: kamranahmedse
• License: mit
• Created: 2018-05-06T19:44:30.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2020-03-04T08:30:13.000Z (over 4 years ago)
• Last Synced: 2024-10-02T11:37:58.376Z (about 1 month ago)
• Language: JavaScript
• Homepage: http://kamranahmed.info/brusher
• Size: 21.3 MB
• Stars: 748
• Watchers: 17
• Forks: 46
• Open Issues: 4
• Metadata Files:
  • Readme: readme.md
  • License: license

Awesome Lists containing this project

README

        
![](https://i.imgur.com/Tq7TBnA.png)

> Little vanilla JS library to add interactive backgrounds to your webpages - [View Demo](http://kamranahmed.info/brusher)

## Installation

Install it using yarn or npm

```bash

yarn add brusher

```

Or you may use unpkg

```

http://unpkg.com/brusher/dist/brusher.min.js

```

## Usage

For the basic usage, all you need to do is create an instance of `Brusher` and provide an image

```javascript

import Brusher from 'brusher';

const brusher = new Brusher({

  image: 'abstract.png'

});

brusher.init();

```

## Available Options

Here is the list of options that you may use

```javascript

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)

  autoBlur: false,       // Brusher will use the provided image for the blurry background

  autoBlurValue: 15,     // Blur strength in pixels

});

brusher.init();

```

A note on blurry background: although brusher is capable of generating blurry background by itself, it is recommended that you [blur the image yourself](http://pinetools.com/blur-image) and apply it to the body for improved performance. Brusher relies on CSS blur for the background. And rendering performance for the pre-provided blurred image would be of-course much better than that applied using CSS. Here is the sample CSS that you may use for the background

```css

body {

  background-size: cover;

  background-position: 0 0;

  background-attachment: fixed;

  background-image: url(path/to/blurred/image.jpg);

}

```

## License

MIT © [Kamran Ahmed](https://twitter.com/kamranahmedse)