Deterministic identity
A seed preserves the character of the field while signals and interaction change its energy.
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.
- 25
- semantic states
- 12
- transition modes
- 68×68
- default pixel field
Foundation / 01
Motion infrastructure, not a loading ornament.
Semantic states
Ready, thinking, tool use, completion, and recovery share one coherent visual language.
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
Live render
Move · press · drop a glyph
Fit fills the preview frame. 1:1 shows each engine grid cell as one
CSS pixel.
Quick states
- FPS
- —
- Pixels
- —
- State
- ai.idle
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.
-
Install and create
Download the kit, install the extracted folder, and mount one long-lived glyph.
npm install ./joan-procedural-glyph-engine-5.0.0import { createGlyph } from "@joan/procedural-glyph-engine"; const glyph = createGlyph("#ai-glyph", { sprite: "ai.idle", seed: "product-session", gridSize: 68 }); -
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; -
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.