Complete mixes / MIX REFERENCE
Orbital lens
An AI-generated keyframe translated into 36 parametric filaments, a hollow orbital form, drifting lights, and a teal atmosphere. Switch to Concept frame to compare the art direction with the live reconstruction.
/v1/mixes/orbital.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.
The settings for each layer are documented below. Click an asset reference for its specific behavior and controls.
Usage
A complete HTML example with custom settings. Remove the settings patch 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/mixes/orbital.js';
const art = await mount('#hero-art');
// Configure layer 3: Orbital lens
art.configure({
"palette": 1,
"speed": 0.7
}, art.scene.layers[2].id);
// art.pause(); art.play(); art.seek(0);
// When removing the component: art.destroy();
</script>Configuration and defaults
This mix has 3 layers. Values below are the mix’s authored settings, which may differ from standalone asset defaults. Runtime layer IDs are generated; read them from art.scene.layers. Omitting a layer ID from configure() changes every layer.
- Teal atmosphere — filament-atmosphere asset reference
- Star field — stars asset reference
- Orbital lens — orbital asset reference
Layer 1: Teal atmosphere filament-atmosphere
const layerId = art.scene.layers[0].id;
art.configure({
"palette": 1,
"speed": 0.7
}, layerId);| Setting / type | Default | What it does |
|---|---|---|
namestring | "Teal 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. |
paletteenum | 0 | Authored palette: 0 is original and 1 is alternate. For Global Flow and Blue Horizon, 0 is daytime and 1 is nighttime. Accepted values: |
paletteColorsstring[] | null | null | Three hex colors that remap authored hues while retaining shading. null restores the authored palette. Set after palette, or include both in the same patch: setting palette alone clears this override. |
xnumber | 0 | Horizontal placement. For objects, scene units; for backgrounds, pattern offset. Suggested: -12 to 12. Finite values outside this range are retained. |
ynumber | 0 | Vertical placement. For objects, scene units; for backgrounds, pattern offset. Suggested: -8 to 8. Finite values outside this range are retained. |
rotationnumber | 0 | Rotation in the canvas plane, in degrees. Suggested: -180 to 180. Finite values outside this range are retained. |
scalenumber | 1 | Uniform scale multiplier. 1 is the authored size. Suggested: 0.1 to 3. Finite values outside this range are retained. |
playingboolean | true | Whether this layer advances when the instance is playing. art.play() does not override a layer set to false. |
speednumber | 1 | Timeline multiplier: 1 is normal, 0 freezes time, negative values rewind. Introductory effects may stop at the start of their timeline. Suggested: 0 to 3. Finite values outside this range are retained. |
Layer 2: Star field stars
const layerId = art.scene.layers[1].id;
art.configure({
"color": "#9b87ff",
"speed": 0.7
}, layerId);| Setting / type | Default | What it does |
|---|---|---|
namestring | "Star field" | 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 | 0.45 | Layer opacity. 0 is transparent; 1 is fully opaque. Suggested: 0 to 1. Finite values outside this range are retained. |
colorstring | "#b5ccff" | Primary color. |
glownumber | 1.2 | Glow or highlight strength. Suggested: 0 to 2. Finite values outside this range are retained. |
xnumber | 0 | Horizontal placement. For objects, scene units; for backgrounds, pattern offset. Suggested: -12 to 12. Finite values outside this range are retained. |
ynumber | 0 | Vertical placement. For objects, scene units; for backgrounds, pattern offset. Suggested: -8 to 8. Finite values outside this range are retained. |
rotationnumber | 0 | Rotation in the canvas plane, in degrees. Suggested: -180 to 180. Finite values outside this range are retained. |
scalenumber | 1 | Uniform scale multiplier. 1 is the authored size. Suggested: 0.1 to 3. Finite values outside this range are retained. |
playingboolean | true | Whether this layer advances when the instance is playing. art.play() does not override a layer set to false. |
speednumber | 1 | Timeline multiplier: 1 is normal, 0 freezes time, negative values rewind. Introductory effects may stop at the start of their timeline. Suggested: 0 to 3. Finite values outside this range are retained. |
Layer 3: Orbital lens orbital
const layerId = art.scene.layers[2].id;
art.configure({
"palette": 1,
"speed": 0.7
}, layerId);| Setting / type | Default | What it does |
|---|---|---|
namestring | "Orbital lens" | 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. |
paletteenum | 0 | Authored palette: 0 is original and 1 is alternate. For Global Flow and Blue Horizon, 0 is daytime and 1 is nighttime. Accepted values: |
paletteColorsstring[] | null | null | Three hex colors that remap authored hues while retaining shading. null restores the authored palette. Set after palette, or include both in the same patch: setting palette alone clears this override. |
xnumber | 2.5 | Horizontal placement. For objects, scene units; for backgrounds, pattern offset. Suggested: -12 to 12. Finite values outside this range are retained. |
ynumber | 0 | Vertical placement. For objects, scene units; for backgrounds, pattern offset. Suggested: -8 to 8. Finite values outside this range are retained. |
znumber | 0 | Depth in scene units. The camera looks toward the scene from positive Z. Suggested: -8 to 8. Finite values outside this range are retained. |
rxnumber | 0 | Tilt around the X axis, in degrees. Suggested: -180 to 180. Finite values outside this range are retained. |
rynumber | 0 | Tilt around the Y axis, in degrees. Suggested: -180 to 180. Finite values outside this range are retained. |
rotationnumber | 0 | Rotation in the canvas plane, in degrees. Suggested: -180 to 180. Finite values outside this range are retained. |
scalenumber | 1.15 | Uniform scale multiplier. 1 is the authored size. Suggested: 0.1 to 3. Finite values outside this range are retained. |
mobileobject | {} | Portrait overrides when container width / height < 1. x, y and rotation add to the base transform; scale multiplies it. Example: {x: 0, y: -1, scale: 0.8, rotation: 0}. |
playingboolean | true | Whether this layer advances when the instance is playing. art.play() does not override a layer set to false. |
speednumber | 1 | Timeline multiplier: 1 is normal, 0 freezes time, negative values rewind. Introductory effects may stop at the start of their timeline. Suggested: 0 to 3. Finite values outside this range are retained. |
Full composition recipe
Use this with mountScene() to edit the composition before mounting. These explicit layer IDs are stable in your own recipe. Presets contain artwork; page text and buttons belong in your HTML.
import { mountScene } from 'https://motion.pictographic.ai/v1/library.js';
const art = await mountScene('#hero-art', {
"version": 1,
"name": "Orbital lens",
"aspect": 1.7777777777777777,
"layers": [
{
"id": "layer-1",
"asset": "filament-atmosphere",
"name": "Teal atmosphere",
"visible": true,
"opacity": 1,
"palette": 0,
"paletteColors": null,
"x": 0,
"y": 0,
"rotation": 0,
"scale": 1,
"playing": true,
"speed": 1
},
{
"id": "layer-2",
"asset": "stars",
"name": "Star field",
"visible": true,
"opacity": 0.45,
"color": "#b5ccff",
"glow": 1.2,
"x": 0,
"y": 0,
"rotation": 0,
"scale": 1,
"playing": true,
"speed": 1
},
{
"id": "layer-3",
"asset": "orbital",
"name": "Orbital lens",
"visible": true,
"opacity": 1,
"palette": 0,
"paletteColors": null,
"x": 2.5,
"y": 0,
"z": 0,
"rx": 0,
"ry": 0,
"rotation": 0,
"scale": 1.15,
"mobile": {},
"playing": true,
"speed": 1
}
]
});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.