bubble-bg

Create background with animated bubbles

Usage no npm install needed!

<script type="module">
  import bubbleBg from 'https://cdn.skypack.dev/bubble-bg';
</script>

README

Bubble BG

About

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

How to Install

First, install the library in your project by npm:

$ npm install bubble-bg

Or Yarn:

$ yarn add bubble-bg

Getting Started

Connect libary with project using script tag in HTML:

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

ES6 import:

import 'bubble-bg';

Props

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

Example

With default props:

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

With custom props:

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

License

This project is licensed under the GPL 3.0 License © 2019-present Jakub Biesiada