Doc Section: Advanced
Options
Option Type Default Description animation string | { in, out } 'slide' Preset name or custom keyframes. duration number | '0.45s' | '450ms' 450 Transition length. easing string 'cubic-bezier(0.65, 0, 0.35, 1)' Any CSS easing. backText string | (parent) => string 'Back' Back button text. {parent} becomes the label of the level you return to...
Data attributes
The browser build initialises [data-sbg] elements on DOMContentLoaded. You can pass options as JSON in data-sbg, as separate data-sbg-* attributes, or both: Attribute names use kebab-case and map to options in camelCase: data-sbg-pause-offscreen="false" becomes pauseOffscreen: false. Values are parsed as JSON where possible. Colors can be a JSON array or a comma separated list. When...
Events
Every callback receives a detail object: Callback DOM event When onInit vlt-sbg:init Instance created. onChange vlt-sbg:change A new color is reached (loop), the nearest color changes (scroll), or a new section becomes active (sections). onUpdate — Every rendered frame in scroll mode. Delivered only as a callback, for performance. onComplete vlt-sbg:complete loop: all iterations are...
Methods
Creating a new instance on an element that already has one destroys the old instance first, so listeners are never duplicated. The browser build also exposes the color helpers used internally: SmoothBackground.parseColor(), mixColors(), formatColor(), cubicBezier() and easings. The ESM and CJS builds export them as named exports.
Options
Option Type Default Description mode 'loop' | 'scroll' | 'sections' 'loop' Animation mode. colors Array<string | object> 4 pastel colors Palette. See Colors. property string 'background-color' Property animated by plain string colors. duration number | '1.5s' | '300ms' 1500 Transition between two colors (loop, sections). hold time 1000 loop: how long each color stays. delay...
