Quiet topography

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/terrain.js';

  const art = await mount('#hero-art');
  // Configure layer 2: Contour terrain
  art.configure({
    "palette": 1,
    "speed": 0.7
  }, art.scene.layers[1].id);
  // art.pause(); art.play(); art.seek(0);
  // When removing the component: art.destroy();
</script>

Configuration and defaults

This mix has 2 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.

1. Solid color — solid asset reference
2. Contour terrain — terrain asset reference

const layerId = art.scene.layers[0].id;
art.configure({
  "color": "#9b87ff"
}, layerId);

const layerId = art.scene.layers[1].id;
art.configure({
  "palette": 1,
  "speed": 0.7
}, layerId);

import { mountScene } from 'https://motion.pictographic.ai/v1/library.js';
const art = await mountScene('#hero-art', {
  "version": 1,
  "name": "Quiet topography",
  "aspect": 1.7777777777777777,
  "layers": [
    {
      "id": "layer-1",
      "asset": "solid",
      "name": "Solid color",
      "visible": true,
      "opacity": 1,
      "color": "#171619"
    },
    {
      "id": "layer-2",
      "asset": "terrain",
      "name": "Contour terrain",
      "visible": true,
      "opacity": 1,
      "palette": 0,
      "paletteColors": null,
      "x": 3.5,
      "y": -0.5,
      "z": 0,
      "rx": 0,
      "ry": 0,
      "rotation": 0,
      "scale": 1.43,
      "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.

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 resources

Numerical 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.