+ 
+
+ A procedural glyph engine by Joan Sterjo.
+ Design one visual identity, invoke semantic states from product code, and keep
+ every transition responsive, reproducible, and alive.
+
+ Open the live Studio + · + Download v5.0.0 + · + Quick-start guide + · + Runnable examples +
+ +
+ 
+ Live Studio + · + Download kit + · + Back to top +
diff --git a/web/vendor/SHA256SUMS.txt b/web/vendor/SHA256SUMS.txt new file mode 100644 index 0000000..a2aa1a0 --- /dev/null +++ b/web/vendor/SHA256SUMS.txt @@ -0,0 +1,36 @@ +6dea5372df18fef1b3056ad6423552c7785a8a17e2f9fec705463f6028439b28 docs/assets/readme-hero.svg +99b15d457eeba4e7414bc210d7040019a54f9fa838291bde1d3875c1bbca78e9 docs/QUICKSTART.md +01b1bc8b37a39be3d8ae3be7da71668f0bcdfa0bcb07f847f91a59950ecebbc2 examples/canvas.html +cc08f683e352db9566b5839bc918302b0e681937cdc035aadcfc7bcae588c291 examples/example.css +0c46216df56ce372cafd26033a925f0462b47f510a014f1bc66a8b706b75d410 examples/README.md +c0b22bf741c75cc025ab7717a6db44dbc5fd93fb28396767d369c2003a9d83af examples/state-sequence.html +6802fde51637fe054cf870eb2c5f9a49907c474bc5ff347ea71cee7b3d636541 examples/web-component.html +cd26e4164fa1fac69c93c45723a4412f68bd667be2c94337d99877a374a71418 joan-engine-v5.standalone.html +31763c5e3583d9a5ad610f17456ad1e68f4fb2b73b7f53a735e418c3e1a7e81e LICENSE +7a9441bdc68f23ada12bc4782fc3f7962d795f3738735638b754c195fdd6c21d manifest.json +55cf377b8808993288f9aadfa309965eb0aaef8df3896fb487cc94c4f65c03b4 NOTICE +77fc5e0a77ee82154d3a328827b4cc3e530729bdda8bc18db656f1aa1d916909 package.json +a85a9d9b7f723672b630882d54a3c7e82675afb6d14ebcedf63f0e66e16f4bcd README.md +324f45dfca15074ab65508e433cc20aa2124a196dad09d98d0a1ed7c27e7c503 src/config.js +2bb9921205babd2204bdc03abc8a1bd2c916fa4ce4c203d8822e18289dd6f15d src/control-help.js +547603442b1db4739f047833a3da8ea6ed518c49753260e2d488417004340fae src/fields.js +a36015cbe69f7ce3b5c218189a4250a6baef7afe814492ed051643312bd34bf5 src/glyphs.js +a759eaad654030e5b143f02641a2a4c41f997641e0add34ba03ee217861d2dc0 src/joan-engine.js +1237112f05e55f46341e2b10e12f4b372d39cd7c34e05e62af8bb7ceb894250b src/preview-layout.js +75c0be5f862135dac7b598974f99fb91e1b3a925c28d69815f374d4ff17ef86b src/preview-thumbnails.js +c69b77f9c9592a0f9e417ee7be17f430139713945120d01478d43b7de587390d src/sprites.js +175a7172707611fe456db159182350d0967665f673c231f443e69660ae09038c src/state-director.js +ea45c075e503ee0dd4545556f61bbceff309dea722ceda96d5eb7baafa4f4e67 src/state-sequence.js +55f4d43cf50928aed47d9233653ab971593995923005154f926814acecb43129 src/studio.js +4372628fbca51ab2a19e4fbb0d2fd21bb0ef852fe17a61876188f1cacdab6aea src/styles.css +7b61ac0803413c4c766db4f03c049dc24ee47688086abb85e7ddfdc9db0250b7 src/web-component-register.js +4952d2ccdfdf98cc778840b464521983ac6e8ab215f90b1d865680258f808ac6 src/web-component.js +f1d8fe2141b766da1b4bba4b88306a436f0f1971fce8caf26f18a562e0e65abb types/config.d.ts +5d0c433ecf5356ed46a3edd318612ab76e818df1b4497a6c195b4c0c1f4c7cb5 types/fields.d.ts +59aa75e1149319de9b191c44feddeeef8e1a12ce4e662b057c2ecc31a7ca6e3a types/glyphs.d.ts +a62e4a17927b318a05580863141610b0767a00ee87031e17090e3597019572a3 types/index.d.ts +99309aab1f114260456db816072039a7f1d65a8ec5bf3fb5d3d0ec4c4fcd5536 types/sprites.d.ts +22a56518acd9626699d5bb39bb63a29aa285ef825b0b08bc4ec6bb6111cf4fb2 types/state-director.d.ts +3a6bc92f0e3e774d8bbabac49b6b35209ff6995cde04d5f9e37b8cc7c4b4f5db types/state-sequence.d.ts +59f77bee8bfe215a88d248f8ca06362905362154026f4868bbab58e733271a25 types/web-component-register.d.ts +127ee9b7678fb4090207a4d8784643ab52f5ec5db2567bf61dd0fefee40c8b50 types/web-component.d.ts diff --git a/web/vendor/docs/QUICKSTART.md b/web/vendor/docs/QUICKSTART.md new file mode 100644 index 0000000..95781e7 --- /dev/null +++ b/web/vendor/docs/QUICKSTART.md @@ -0,0 +1,112 @@ +# Orby — quick start + +**A procedural glyph engine by Joan Sterjo.** + +The download kit is self-contained. Start with the path that matches how you +want to use the engine; no registry download or third-party runtime dependency +is required. + +## 1. Open the standalone Studio + +Open `joan-engine-v5.standalone.html` in a modern browser. It contains the +Studio, engine modules, and styles in one file, so it works without a build +step or local server. Use this path to explore states, tune a recipe, and export +PNG, SVG, animated SVG, or `.joan.json` output. + +## 2. Import the native ES modules + +Serve the extracted folder from a local HTTP server: + +```sh +cd joan-procedural-glyph-engine-5.0.0 +python3 -m http.server 4173 +``` + +Then import the engine directly from the included source: + +```html + + +``` + +Open `examples/canvas.html` for a complete interactive version. + +## 3. Install the extracted folder locally + +From an application beside the extracted kit: + +```sh +npm install ./joan-procedural-glyph-engine-5.0.0 +``` + +Use the package and its TypeScript declarations through the included exports: + +```js +import { createGlyph } from "@joan/procedural-glyph-engine"; +import { playStateSequence } from + "@joan/procedural-glyph-engine/state-sequence"; + +const glyph = createGlyph("#ai-glyph", { + sprite: "ai.ambient-idle", + seed: "conversation-42", + gridSize: 68, +}); + +const playback = playStateSequence(glyph, [ + { sprite: "ai.ambient-idle", holdMs: 5_000 }, + { sprite: "ai.progress", transition: "contour-trace" }, + { sprite: "status.success", transition: "path-draw" }, +]); + +await playback.finished; +``` + +## Web component + +Import `src/web-component-register.js`, then use `+ One long-lived engine instance moves between semantic states while + preserving its seeded visual identity. +
+Current state: ai.idle
++ Define a product-owned timeline, then pause, resume, stop, or replay it + through one controller. +
+Sequence ready
++ Drop the dependency-free custom element into a page, then drive its + attributes or call the forwarded engine methods. +
+Current state: ai.ambient-thinking
+System 05 Semantic motion infrastructure
++ 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. +
+ +Foundation / 01
++ A seed preserves the character of the field while signals and interaction + change its energy. +
++ Ready, thinking, tool use, completion, and recovery share one coherent + visual language. +
++ Call one state or choreograph a timed sequence, then carry the same recipe + into any product surface. +
+Live Studio / 02
++ 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
++ A calm, responsive presence with a low-frequency breathing field. +
+Integration / 03
++ Create one long-lived glyph, drive it with product state, and carry the + same deterministic recipe wherever the interface needs presence. +
+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
+});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;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
++ Twenty-five semantic sprites cover attention, ambient presence, + latency, tool work, transfer, completion, and recovery. +
+Local collection
++ Reopen your tuned states here. Presets are stored locally in this + browser and do not sync between devices. +
++ No presets saved yet. Tune a state, then choose Save current. It will stay + available locally in this browser. +
+ +API / 05
++ 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. +
+ +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
++ Take a versioned integration kit with the native ESM runtime, + TypeScript declarations, complete integration documentation, runnable + examples, and the offline Studio. +
+ ++ 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. +
+