Skip to the live Studio

System 05 Semantic motion infrastructure

# A living signal for every state of intelligence.

A procedural glyph engine by Joan Sterjo. Orby turns product intent into expressive, deterministic pixel motion. Shape one visual identity, invoke it anywhere, and keep every transition responsive, reproducible, and alive.

Try the live Studio Download the engine

25
  semantic states
12
  transition modes
68×68
  default pixel field

Foundation / 01

## Motion infrastructure, not a loading ornament.

01

### Deterministic identity

A seed preserves the character of the field while signals and interaction change its energy.

02

### Semantic states

Ready, thinking, tool use, completion, and recovery share one coherent visual language.

03

### Portable invocation

Call one state or choreograph a timed sequence, then carry the same recipe into any product surface.

Live Studio / 02

## Design the signal, then run it for real.

Stage a semantic state, tune its field and motion, and export the result as a reusable recipe. Every control below edits the live engine.

Canvas / 01

Core state

## Idle

A calm, responsive presence with a low-frequency breathing field.

Inject signal
Find a state State preset
25 states available
Recipe base Ready to customize
Recent saved presets
Live render Move · press · drop a glyph Fit fills the preview frame. 1:1 shows each engine grid cell as one CSS pixel.
Semantic progress 48%
Quick states

FPS
  —
Pixels
  —
State
  ai.idle

Field lab / 02

## Shape the signal

Hover or focus a control to learn what it changes.

Deterministic
Field composition Noise field Recipe Spatial activation texture
Transition Recipe State-to-state topology
Pixel behavior Pixel geometry Carries Rendered cell silhouette
Switch system Recipe Activation and persistence logic
Orb boundary Carries How the circular edge is perceived Defined Gestalt
Orb background None Optional color behind the orb pixels None Orb background rendering
NONE
Non-error palette

Override any color channel across AI and status states. Error keeps its authored danger palette.

Recipe
Background #070708 Inactive #1F2022 Primary #F2F1EE Accent #C9C8C4
Glow Color #8B8D90
Motion envelope Recipe Resolution 68×68 Velocity 1× Density 1
Reproducibility Seed Shareable, stable output

Every choice serializes into one portable recipe. Interaction changes energy, never identity.

Integration / 03

## From a blank canvas to a product signal.

Create one long-lived glyph, drive it with product state, and carry the same deterministic recipe wherever the interface needs presence.

1. 01

   ### Install and create

   Download the kit, install the extracted folder, and mount one long-lived glyph.

       npm install ./joan-procedural-glyph-engine-5.0.0

       import { createGlyph } from "@joan/procedural-glyph-engine";

       const glyph = createGlyph("#ai-glyph", {
         sprite: "ai.idle",
         seed: "product-session",
         gridSize: 68
       });

2. 02

   ### Invoke intent

   Move directly to a state or play a timed sequence as product work unfolds.

       import { playStateSequence } from "@joan/procedural-glyph-engine/state-sequence";

       await glyph.transitionTo("ai.thinking");

       const playback = playStateSequence(glyph, [
         { sprite: "ai.idle", holdMs: 5_000 },
         { sprite: "status.success" }
       ]);

       await playback.finished;

3. 03

   ### Export or embed

   Keep the live canvas in your UI, or package its current identity for delivery.

       const recipe = glyph.exportConfig();
       const svg = glyph.toSVG();

       await glyph.downloadPNG("ai-state.png");

State atlas / 04

## A complete language for AI presence.

Twenty-five semantic sprites cover attention, ambient presence, latency, tool work, transfer, completion, and recovery.

25 motion recipes Select any state to stage it above

Local collection

### Saved presets

Reopen your tuned states here. Presets are stored locally in this browser and do not sync between devices.

0 presets

No presets saved yet. Tune a state, then choose Save current. It will stay available locally in this browser.

Preset deleted.

API / 05

## From intent to pixels through one small runtime.

Ship the same state language across copilots, agents, system trays, notifications, and ambient interfaces. The runtime is dependency-free and keeps every parameter inspectable. Named sequences can be saved as data or invoked inline with explicit timing.

Runtime
  Canvas 2D · ESM
Control
  Sequences · signals · progress
Output
  PNG · SVG · JSON recipe

glyph-sequence.js

    import { createGlyph } from "@joan/procedural-glyph-engine";
    import { playStateSequence } from "@joan/procedural-glyph-engine/state-sequence";

    const glyph = createGlyph("#ai-glyph", {
      sprite: "ai.idle",
      seed: "world-class-ai",
      gridSize: 68
    });

    const playback = playStateSequence(glyph, [
      { sprite: "ai.idle", holdMs: 5_000 },
      { sprite: "status.success", transition: "path-draw" }
    ]);

    await playback.finished;

Self service / 06

## Everything you need to run Orby.

Take a versioned integration kit with the native ESM runtime, TypeScript declarations, complete integration documentation, runnable examples, and the offline Studio.

- Native dependency-free runtime modules
- TypeScript declarations for every export
- Complete API and integration reference
- Canvas, web component, and sequence examples
- Single-file offline Studio
- License and attribution notices (LICENSE and NOTICE)

Distribution status: SOURCE AVAILABLE. Orby is licensed under Apache License 2.0 subject to Commons Clause 1.0. You may use, copy, modify, and redistribute Orby, but may not sell Orby or a product or service whose value derives entirely or substantially from Orby's functionality.

Complete integration kit

Recommended

### Integration kit

Install from the extracted folder or import the source directly. Checksums make the complete package independently verifiable.

v5.0.0 ZIP Documentation included SHA-256 verified

Download v5.0.0 kit Checksum Release manifest

No setup

HTML

### Standalone Studio

Open one self-contained HTML file to explore, tune, and export glyphs without installing anything.

Download standalone HTML

Full reference

Markdown

### Documentation

API, web component, states, signals, sequences, exports, accessibility, performance, and testing guidance.

Download documentation

### Output preview

Export uses the fitted composition, independently of the Fit or 1:1 inspection view.

Format
Output size
Filename Include background

Dimensions
  512×512 px
Composition
  Fit · full frame
Motion
  Current frame
Background
  Included