Complete mixes / MIX REFERENCE

Chromatic silk

A broad silk fan curls around a gold fold into a narrow stem. Two connected faces flex together under continuous noise motion, with fine surface fibers and soft grain. Reconstructed from measured Stripe reference geometry and a sampled color map; eight editable colors and a separate backdrop remain available.

/v1/mixes/ribbon.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.

Paste into an HTML page

<div id="hero-art" style="width:100%;height:460px"></div>
<script type="module">
  import { mount } from
    'https://motion.pictographic.ai/v1/mixes/ribbon.js';

  const art = await mount('#hero-art');
  // Configure layer 2: Folded silk
  art.configure({
    "colors": [
      "#9076ff",
      "#bd87f5",
      "#e8a5eb",
      "#fac2cd",
      "#ffb78d",
      "#ffd588",
      "#e8b6f0",
      "#b895ff"
    ],
    "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.

Layer 1: Solid color solid

Configure this layer

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

Setting / type	Default	What it does
`name`string	`"Solid color"`	A label for this layer in the scene snapshot; it does not draw page text. Up to 60 Unicode characters; excess content is trimmed.
`visible`boolean	`true`	Show or hide this layer.
`opacity`number	`1`	Layer opacity. 0 is transparent; 1 is fully opaque. Suggested: 0 to 1. Finite values outside this range are retained.
`color`string	`"#fdfdfb"`	Primary color.

Layer 2: Folded silk silk

Configure this layer

const layerId = art.scene.layers[1].id;
art.configure({
  "colors": [
    "#9076ff",
    "#bd87f5",
    "#e8a5eb",
    "#fac2cd",
    "#ffb78d",
    "#ffd588",
    "#e8b6f0",
    "#b895ff"
  ],
  "speed": 0.7
}, layerId);

Setting / type	Default	What it does
`name`string	`"Folded silk"`	A label for this layer in the scene snapshot; it does not draw page text. Up to 60 Unicode characters; excess content is trimmed.
`visible`boolean	`true`	Show or hide this layer.
`opacity`number	`1`	Layer opacity. 0 is transparent; 1 is fully opaque. Suggested: 0 to 1. Finite values outside this range are retained.
`colors`string[]	`["#e7f4ff","#b8b8ff","#d88ce9","#ffb900","#ff8409","#ff8c79","#f68be9","#8074ef"]`	Eight ordered hex colors across the silk surface. Use eight identical values for a single-color surface. Missing or invalid entries fall back to the original palette.
`x`number	`0`	Horizontal placement. For objects, scene units; for backgrounds, pattern offset. Suggested: -12 to 12. Finite values outside this range are retained.
`y`number	`0`	Vertical placement. For objects, scene units; for backgrounds, pattern offset. Suggested: -8 to 8. Finite values outside this range are retained.
`z`number	`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.
`rx`number	`0`	Tilt around the X axis, in degrees. Suggested: -180 to 180. Finite values outside this range are retained.
`ry`number	`0`	Tilt around the Y axis, in degrees. Suggested: -180 to 180. Finite values outside this range are retained.
`rotation`number	`0`	Rotation in the canvas plane, in degrees. Suggested: -180 to 180. Finite values outside this range are retained.
`scale`number	`1`	Uniform scale multiplier. 1 is the authored size. Suggested: 0.1 to 3. Finite values outside this range are retained.
`mobile`object	`{}`	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}.
`playing`boolean	`true`	Whether this layer advances when the instance is playing. art.play() does not override a layer set to false.
`speed`number	`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.

Rebuild this mix with explicit layers

import { mountScene } from 'https://motion.pictographic.ai/v1/library.js';
const art = await mountScene('#hero-art', {
  "version": 1,
  "name": "Chromatic silk",
  "aspect": 1.7777777777777777,
  "layers": [
    {
      "id": "layer-1",
      "asset": "solid",
      "name": "Solid color",
      "visible": true,
      "opacity": 1,
      "color": "#fdfdfb"
    },
    {
      "id": "layer-2",
      "asset": "silk",
      "name": "Folded silk",
      "visible": true,
      "opacity": 1,
      "colors": [
        "#e7f4ff",
        "#b8b8ff",
        "#d88ce9",
        "#ffb900",
        "#ff8409",
        "#ff8c79",
        "#f68be9",
        "#8074ef"
      ],
      "x": 0,
      "y": 0,
      "z": 0,
      "rx": 0,
      "ry": 0,
      "rotation": 0,
      "scale": 1,
      "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
`autoplay`boolean	`"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.
`background`hex color \| false	`false`	Canvas clear color. false keeps otherwise empty areas transparent. Existing opaque background layers still cover the clear color.
`onWarning`function	`"console.warn"`	Receives advisory messages when configure() gets numeric values outside suggested ranges.
`onError`function	`"not set"`	Receives renderer errors. Also catch the promise returned by mount() for setup errors.
`pauseWhenOffscreen`boolean	`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.
`maxFps`number	`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.
`pixelRatio`number	`"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.
`preserveDrawingBuffer`boolean	`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.

Instance methods

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.

MAKE SOMETHING NEW

Start with a component.

Explore the collection ↗