Bubble-bg NPM | npm.io

Bubble BG

Bubble BG is a web component based on bubbly-bg library. It allows add background with animated bubbles to your site.

First, install the library in your project by npm:

$ npm install bubble-bg

Or Yarn:

$ yarn add bubble-bg

Connect libary with project using script tag in HTML:

<script type="module" src="/path/to/bubble-bg.js"></script>

ES6 import:

import 'bubble-bg';

Name	Type	Default	Description	Available options
animateBubbles	boolean	`true`	Enable or disable bubbles animation	`true` - enable, `false` - disable
shadowBlur	number	`4`	Canvas shadowBlur value	e.g: `1`
bubblesCount	number	`20`	Number of bubbles	e.g: `63`
colors	string[]	`["#2ae", "#17b"]`	Background gradient stops colors	e.g: `["#4287f5", "#4248f5" ,"#f542a7"]`
compose	string	`lighter`	Canvas compose value	`lighter` or
shadowColor	string	`#fff`		e.g: `rgb()`, `#f0f0f0`
gradientAngle	number	`45`	Background gradient angle direction	values between `0` and `360`

With default props:

<body>
  <bubble-bg></bubble-bg>
</body>

With custom props:

<body>
  <bubble-bg
    shadowColor="#fefefe"
    bubblesCount="34"
  ></bubble-bg>
</body>

6 years ago

6 years ago