Web Components

<sinua-view> is a standard custom element, so it works in any framework, or none. Register it once with import "@sinua/web/element", then use the tag. For the typed tags — <sinua-orb>, <sinua-ring>, <sinua-signal>, <sinua-core>, <sinua-beacon>, each with its pattern's own attributes — import "@sinua/web/elements" registers all five. Properties and attributes map to the same props as everywhere else, and the element fires a fxframe event per drawn frame when you ask for frame stats.

<!-- Register <sinua-view> once, then use the tag. Scalars are attributes; objects are properties. -->
<script type="module">
  import "@sinua/web/element";
  import voiceOrb from "./voice-orb.fxspec.json" with { type: "json" };

  const orb = document.querySelector("#orb");
  orb.spec = voiceOrb;
  orb.inputs = { micMuted: 0 };
  orb.addEventListener("fxerror", (e) => console.warn(e.detail));
</script>

<sinua-view id="orb" state="listening" style="width: 160px"></sinua-view>
<sinua-view pattern="breathing" theme="dark" style="width: 64px"></sinua-view>

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.