Sinua
Getting started

Introduction

Sinua draws the small, living visuals that show what your app is doing — an orb that listens and speaks, rings that fill, a signal that follows a voice — from one engine on every platform.

Sinua is a visual engine for status and presence: the orb next to a voice agent, the progress ring on an upload, the waveform under a recording, the ping when something arrives. You pick an object and a pattern, feed it your app's state and data, and it draws the same frames on the web, iOS, Android and React Native.

voice-orb

One shape, four states: the orb above never changes pattern. Idle it rests, listening it brightens and draws in on your voice, thinking it churns quickly, speaking it swells with the agent.

How it fits together

  • Five objects, 34 patterns. The orb for voice agents and assistants, the ring for progress, the signal for sound, the core for text loading states, the beacon for status.
  • One component per object, on every platform, with the same props. Values connect your data (progress, audio level, quality); style props set the look.
  • One design file. An FX Spec describes a visual completely: pattern, colour, materials, your app's states and bindings. It renders identically everywhere.
  • Voice built in. Connect LiveKit, OpenAI Realtime, Gemini Live or ElevenLabs, or the device microphone, and the visual follows the conversation. See Voice.
  • Fast and considerate. A small Rust engine computes each frame; views pause off screen, respect reduced motion, and shed expensive finishes in low-power mode. See Performance.

Free runtime, optional Studio

The runtime packages are open source (Apache-2.0) and free to use in any app. Everything in these docs works in code alone. The Studio is an optional design tool, not open yet, for tuning a visual live and exporting it as code or an FX Spec file. See From Studio to your app.

Next

On this page