✳ Pictographic Motion

IMPORT GUIDE

Your page.
Your composition.

The library renders artwork in your browser. Use a single background or object, a preset mix, or your own layers.

One library, every asset

Give the container a height or aspect ratio. These are browser ES-module imports, for use in a module script or a client component.

import { mountAsset, mountMix, mountScene, catalog }
  from 'https://motion.pictographic.ai/v1/library.js';

// Static background
const background = await mountAsset('#background', 'solid', {
  color: '#19203b'
});

// Animated background
const glow = await mountAsset('#glow', 'platform-glow', {
  speed: 0.5, playing: true
});

// An object over your own HTML background
const object = await mountAsset('#object', 'agentic-ring');

// A complete preset composition
const mix = await mountMix('#hero', 'creative-flow');

Import an individual item

Each asset and mix also has its own module. They share the same cached library.

import { mount } from
  'https://motion.pictographic.ai/v1/assets/aurora.js';
const art = await mount('#hero', { speed: 2 });

// Mix modules: /v1/mixes/developer-wave.js
// Full listing: /v1/catalog.json

Compose your own layers

Studio's “Use on your website” panel can copy the current layer or the whole mix, including edited values.

const art = await mountScene('#hero', {
  name: 'My composition',
  layers: [
    { id: 'backdrop', asset: 'solid', color: '#10182c' },
    { id: 'lights', asset: 'stars', opacity: 0.4 },
    { id: 'shape', asset: 'developer-wave', speed: 1.5 }
  ]
});

art.configure({ speed: -2 }); // All layers
art.configure({ color: '#ff99cc' }, 'shape'); // One layer
art.pause();
art.play();
art.seek(4); // Timeline seconds, including layer speed
console.log(art.scene); // A copy of the current scene
await art.setScene({ layers: [{ asset: 'aurora' }] });
art.destroy(); // Call when your component unmounts

Options and behavior

mountAsset(target, id, settings, options), mountMix(target, id, options), and mountScene(target, scene, options) accept a CSS selector or an HTML element. Each resolves when required textures are ready.

Options: autoplay, background (hex color or false), onWarning(message), and onError(error). Reduced-motion preferences start playback paused unless explicitly overridden. Container resizing is automatic. Automatic rendering and timeline advancement suspend off-screen and in hidden tabs, then resume when visible. Set pauseWhenOffscreen: false to allow off-screen playback. Optional maxFps (0 for browser refresh rate), pixelRatio (a positive number), and preserveDrawingBuffer (true by default) let you control rendering cost. The gallery uses balanced preview settings; imports retain the authored detail defaults. Negative speeds reverse the timeline. Values outside suggested ranges are retained, with advisory warnings.

Object canvases have transparent surroundings; preset mixes include their authored backgrounds. Presets contain artwork, so add your own headings and buttons in HTML. Existing /v1/developer-wave.js imports remain compatible.