Script tag

Copy dist/smooth-background.min.js to your project:

<script src="smooth-background.min.js"></script>
<script>
new SmoothBackground('.hero', { colors: ['#D4E66A', '#B6CEDD', '#2A3240'] });
</script>

The browser build exposes window.SmoothBackground and automatically initialises every element that has a data-sbg attribute (see Data attributes).

ES module

import SmoothBackground from './smooth-background.esm.js';

Bundlers (CommonJS / ESM)

Put the package folder into your project (or publish it to your private registry) and import it:

import SmoothBackground from 'vlt-smooth-background';
// or
const SmoothBackground = require('vlt-smooth-background');

File	Format
dist/smooth-background.min.js	Browser, minified, auto-init
dist/smooth-background.js	Browser, readable, auto-init
dist/smooth-background.esm.js	ES module
dist/smooth-background.cjs	CommonJS
dist/smooth-background.d.ts	TypeScript definitions