Install Orbsona

Add the live renderer to your React application

React renderer

@accidental-revenue/orbsona

The public package contains the versioned identity contract, TypeScript types, and layered canvas renderer. Orbsona’s nature presets are maintained here; the restored legacy motion collection is used under its MIT license and credited in the package notices.

npm install @accidental-revenue/orbsona

Open source · MIT

Use, modify, and ship the renderer under the MIT License. Orbsona has no account requirement, hosted identity store, telemetry, or vendor lock-in.

Runtime: Browser canvas
Framework: React 18+
Module format: ESM
Storage: Your application

Render the identity

Import the downloaded file and drive the generic state contract from your own application.

import { AgentAvatar } from "@accidental-revenue/orbsona/react";
import type { AgentState } from "@accidental-revenue/orbsona";
import aster from "./aster.orbsona.json";

type AgentPresenceProps = {
  state: AgentState;
  inputLevel?: number;
  outputLevel?: number;
};

export function AgentPresence({
  state,
  inputLevel,
  outputLevel,
}: AgentPresenceProps) {
  return (
    <AgentAvatar
      identity={aster.identity}
      state={state}
      inputLevel={inputLevel}
      outputLevel={outputLevel}
      size={64}
    />
  );
}

What ships

React canvas renderer and TypeScript props
Versioned identity types, parser, and serializer
Eight provider-neutral runtime states
Reduced-motion and bounded rendering behavior

Run the repository

View source

For contributors who want to build and test the repository locally.

npm install
npm run test:package
npm run dev

Provider-neutral by design

Orbsona stays independent from voice and agent providers. Your application maps connection, audio, and tool events to the small AgentState contract, so the same identity can move between runtimes without changing its visual language.