React

Import the component for your object and render it. It draws into a canvas, sizes itself to its box (DPR capped at 2), pauses when off screen or in a hidden tab, and never runs the engine during server rendering.

import { SinuaView } from "@sinua/web/react";
import voiceOrb from "../spec/voice-orb.fxspec.json";

// A pattern on its own: size the box with CSS, the canvas follows it.
export function Breathing() {
  return <SinuaView pattern="breathing" style={{ width: 160, height: 160 }} />;
}

// A spec from the Studio: `state` picks its lifecycle state, `inputs` feeds its bindings.
export function Assistant({ state, muted }: { state: "idle" | "listening" | "thinking" | "speaking"; muted: boolean }) {
  return <SinuaView spec={voiceOrb} state={state} inputs={{ micMuted: muted ? 1 : 0 }} style={{ width: 160, height: 160 }} />;
}

React has both: SinuaView for a pattern or a spec, and the typed components — SinuaOrb, SinuaRing, SinuaSignal, SinuaCore, SinuaBeacon — from @sinua/web/components, which take each pattern's own props by name.

Typed components take the same props on every platform: pattern (or spec), values, style, state, voice, theme, paused, reducedMotion, maxFps, lowPower and an accessibility label. The catalog lists every prop per pattern.

The visual's background is transparent; give the component a size with CSS.