Aura

Living colour, rendered in real time.

Build atmospheric WebGL surfaces as small, reusable recipes. Shape the colour, motion and material in Mosa Labs; mount the result on any canvas.

Design a surface · See Aura

Colour should not sit still

Aura turns a short recipe into a live GPU-rendered field. No video loop. No image sequence. No framework contract. Just a canvas and the parts that give a surface its character:

• Palette — colour, balance and the space between stops.
• Field — waves, interference and directional flow.
• Material — light, grain, glow, fringe and depth.
• Form — a plane, sphere, torus, cylinder or ribbon.

Recipes are immutable. Make one, branch it into variants, mount it more than once, or tune a live instance without rebuilding its WebGL context.

Install

yarn add @mosanic/aura

@mosanic/aura is initially distributed as a restricted Mosanic package. The npm account installing it must have access to the @mosanic scope.

Make an Aura

import { createAura } from "@mosanic/aura";

const nightEmission = createAura()
  .colors("#12091C", "#A21CAF", "#7C00FF", "#FF7A00")
  .palette({ blend: 0.72, chroma: 0.9 })
  .motion({ rate: 0.32, direction: 0.2 })
  .wave({ amount: 0.44, scale: { x: 0.52, y: 0.31 } })
  .flow({ bend: 0.4, detail: 0.62, scale: 0.55, pull: 0.28 })
  .grain({ amount: 0.08, size: 0.35, scatter: 0.62 })
  .glow({ amount: 0.2, threshold: 0.65 })
  .plane({ bend: 0.08 });

const aura = nightEmission.mount(document.querySelector("#aura")!);

<canvas id="aura" aria-hidden="true"></canvas>

#aura {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

The canvas owns layout. Aura owns its pixels.

Recipes branch

Every feature call returns a new recipe. The original stays untouched:

const base = createAura()
  .colors("#DB5DFF", "#6E38FF", "#1018B8")
  .motion({ rate: 0.28 })
  .wave({ amount: 0.5, scale: { x: 0.45, y: 0.35 } });

const hero = base
  .flow({ bend: 0.3, detail: 0.5 })
  .plane({ bend: 0.06 });

const product = base
  .rim({ amount: 0.4, falloff: 2.2, color: "#EAE5FF" })
  .sphere({ radius: 15, edgeFade: 0.2 });

That makes recipes safe to share across packages, themes and components. Call order does not secretly become rendering order: calling a feature again replaces that feature on the derived recipe.

Tune the live field

const aura = hero.mount(canvas);

aura.tune((current) =>
  current
    .motion({ rate: 0.5 })
    .glow({ amount: 0.34, threshold: 0.58 }),
);

aura.pause();
aura.resume();
aura.replace(product);
aura.destroy();

tune applies a new recipe to the existing renderer. It does not create a new canvas or WebGL context.

React

Aura has no React-specific runtime. A ref and an effect are enough:

import { useEffect, useRef } from "react";
import { createAura } from "@mosanic/aura";

const surface = createAura()
  .colors("#F472B6", "#A855F7", "#2563EB")
  .motion({ rate: 0.25 })
  .wave({ amount: 0.45, scale: { x: 0.5, y: 0.38 } })
  .plane();

export function AuraSurface() {
  const canvas = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    if (!canvas.current) return;
    const aura = surface.mount(canvas.current);
    return () => aura.destroy();
  }, []);

  return <canvas ref={canvas} className="aura" aria-hidden="true" />;
}

The same lifecycle maps directly to Vue onMounted/onUnmounted, Svelte onMount, or a custom element's connected callbacks.

Form follows field

Only one form is active on a recipe. Choosing another replaces it:

const object = createAura()
  .colors("#1B0B33", "#6D28D9", "#F472B6")
  .motion({ rate: 0.2 })
  .wave({ amount: 0.35, scale: { x: 0.6, y: 0.4 } })
  .sheen({ amount: 0.28, rate: 0.2 })
  .torus({ radius: 15, tube: 5, edgeFade: 0.18 });

Available forms are plane, sphere, torus, cylinder and ribbon.

Performance is authored too

const card = hero.quality({ mesh: 0.65, pixels: 0.75 });
const aura = card.mount(canvas, { pixelRatio: "device", antialias: false });

mesh controls geometric density. pixels controls drawing-buffer density. They are separate because a small card should not pay what a full-screen hero pays.

Pause surfaces that are out of view. Destroy them when their canvas leaves the page. Aura also parks static recipes and wakes when a live recipe changes.

Motion and accessibility

Respect the viewer's motion preference at the application boundary:

const reduceMotion = matchMedia("(prefers-reduced-motion: reduce)").matches;

const accessible = reduceMotion
  ? hero.motion({ rate: 0 })
  : hero;

accessible.mount(canvas);

Decorative canvases should use aria-hidden="true". Keep readable content in the DOM above the surface; a canvas should be atmosphere, never the only carrier of meaning.

Made in Labs

labs.mosa.sh/surfaces
        │
        │  design · preview · generate
        ▼
   createAura() recipe
        │
        │  import from any package
        ▼
    @mosanic/aura
        │
        │  mount live
        ▼
 canvas · hero · card · screen · object

The studio holds editor state. The generated recipe holds the design. Aura holds the renderer. None of those layers needs to leak into the next.

Browser support and package size

Aura targets modern browsers with WebGL support. Exact browser coverage and compressed package size are measured from the release tarball and published only after the hardened build passes its external-consumer suite.

License

Aura is proprietary software. See LICENSE for the terms that apply to this package.

Make the colour move. Keep the recipe yours.

aura.mosa.sh