Static backgrounds / ASSET REFERENCE
Midnight atmosphere
A uniform midnight color that pairs with Developer Wave.
/v1/assets/wave-backdrop.js
Before you start
A browser ES module, with the renderer and required textures included. No npm install, ZIP or import map is required. Keep rendering code in a client component when using a server-rendered framework.
Usage
A complete HTML example with custom settings. Remove the settings argument to use the authored defaults.
<div id="hero-art" style="width:100%;height:460px"></div>
<script type="module">
import { mount } from
'https://motion.pictographic.ai/v1/assets/wave-backdrop.js';
const art = await mount('#hero-art', {
"color": "#9b87ff"
});
// art.pause(); art.play(); art.seek(0);
// When removing the component: art.destroy();
</script>Configuration and defaults
These are the standalone asset defaults. Pass settings to mount(target, settings, options) or update them with art.configure(settings). Colors use six-digit #rrggbb strings.
art.configure({
"color": "#9b87ff"
});| Setting / type | Default | What it does |
|---|---|---|
namestring | "Midnight atmosphere" | A label for this layer in the scene snapshot; it does not draw page text. Up to 60 Unicode characters; excess content is trimmed. |
visibleboolean | true | Show or hide this layer. |
opacitynumber | 1 | Layer opacity. 0 is transparent; 1 is fully opaque. Suggested: 0 to 1. Finite values outside this range are retained. |
colorstring | "#0f1738" | Primary color. |
Runtime options
Pass these separately from artwork settings. Asset modules use mount(target, settings, options); mix modules use mount(target, options). A target can be a CSS selector or an HTML element.
| Setting / type | Default | What it does |
|---|---|---|
autoplayboolean | "system preference" | Omit to respect prefers-reduced-motion. true starts the instance playing; false starts it paused. Layers with playing: false still need that setting changed. |
backgroundhex color | false | false | Canvas clear color. false keeps otherwise empty areas transparent. Existing opaque background layers still cover the clear color. |
onWarningfunction | "console.warn" | Receives advisory messages when configure() gets numeric values outside suggested ranges. |
onErrorfunction | "not set" | Receives renderer errors. Also catch the promise returned by mount() for setup errors. |
pauseWhenOffscreenboolean | true | Suspend automatic animation frames and timeline advancement when the container leaves the viewport. Playback resumes on return. false allows off-screen playback; hidden browser tabs always suspend automatic rendering. |
maxFpsnumber | 0 | Optional rendering frame-rate cap. 0 uses the browser refresh rate. Any finite nonnegative number is accepted; lower values reduce rendering work. This does not change the configured animation speed. |
pixelRationumber | "automatic" | Optional drawing-buffer resolution multiplier. Omit for the authored detail policy; 1 uses one rendered pixel per CSS pixel. Any positive finite number is accepted. High values increase GPU work. |
preserveDrawingBufferboolean | true | Keep the rendered canvas available for pixel reads or toDataURL(). Set false for a live display that does not need canvas readback. |
Playback, resizing and cleanup
Wait for mount() before using the instance. It resolves after required textures are ready. The container must have a height or aspect ratio; its size drives the canvas. Resizing is automatic. Keep HTML headings and buttons outside the artwork canvas.
art.configure({ opacity: 0.8 }); // All layers; optional second argument targets a layer ID
art.pause();
art.play();
art.seek(4); // Timeline seconds, multiplied by each layer's speed
art.resize(); // Optional manual resize
console.log(art.time, art.playing, art.scene); // scene is a copy
await art.setScene({ layers: [{ asset: 'solid', color: '#10182c' }] });
art.destroy(); // Call when removing the component; releases the canvas and GPU resourcesNumerical ranges are suggestions, not clamps. Use finite JavaScript numbers; NaN and Infinity are rejected. Large counts or extreme values can slow rendering or move artwork out of view. Enum choices and text/color formats still apply. Unknown setting names are ignored. Each instance is independent.