Complete mixes / MIX REFERENCE

Neon transit

A connected, transparent neon object with blue, cyan, magenta and red trails, recreated from the supplied concept art.

/v1/mixes/neon-transit.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/neon-transit.js';

  const art = await mount('#hero-art');
  // Configure layer 2: Neon transit
  art.configure({
    "color": "#9b87ff",
    "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: Black backdrop solid

Configure this layer

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

Setting / type	Default	What it does
`name`string	`"Black backdrop"`	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	`"#000000"`	Primary color.

Layer 2: Neon transit neon-transit

Configure this layer

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

Setting / type	Default	What it does
`name`string	`"Neon transit"`	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	`"#1000ff"`	Upper ribbons.
`color2`string	`"#ff0800"`	Lower ribbons.
`color3`string	`"#ff00ce"`	Middle ribbons.
`color4`string	`"#00dcff"`	Cyan rails.
`trailLength`number	`3`	Extent of the neon trails beyond the join. Suggested: 1 to 8. Finite values outside this range are retained.
`spread`number	`0.56`	Fan spread. Suggested: 0 to 1. Finite values outside this range are retained.
`joinWidth`number	`0.022`	Width of the central join. Suggested: 0.003 to 0.08. Finite values outside this range are retained.
`centerGap`number	`0`	Fade around the center join. Suggested: 0 to 0.65. Finite values outside this range are retained.
`curvature`number	`2.55`	Curvature of the neon trails. Suggested: 1 to 4. Finite values outside this range are retained.
`size`number	`1`	Trail width multiplier. Suggested: 0.4 to 2. Finite values outside this range are retained.
`glow`number	`1`	Glow or highlight strength. Suggested: 0 to 2. Finite values outside this range are retained.
`intensity`number	`0.7`	Traveling light strength. Suggested: 0 to 1.5. Finite values outside this range are retained.
`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": "Neon transit",
  "aspect": 1.7777777777777777,
  "layers": [
    {
      "id": "layer-1",
      "asset": "solid",
      "name": "Black backdrop",
      "visible": true,
      "opacity": 1,
      "color": "#000000"
    },
    {
      "id": "layer-2",
      "asset": "neon-transit",
      "name": "Neon transit",
      "visible": true,
      "opacity": 1,
      "color": "#1000ff",
      "color2": "#ff0800",
      "color3": "#ff00ce",
      "color4": "#00dcff",
      "trailLength": 3,
      "spread": 0.56,
      "joinWidth": 0.022,
      "centerGap": 0,
      "curvature": 2.55,
      "size": 1,
      "glow": 1,
      "intensity": 0.7,
      "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 ↗