Sinua
Getting started

Your first visual in 1 minute

One component, one pattern, on screen.

Put the orb component in your view with a pattern. That's the whole integration: it animates, follows the theme, pauses off screen and respects reduced motion on its own.

orb · breathing
react.tsx
import { SinuaView } from "@sinua/web/react";

export function BreathingOrb() {
  return <SinuaView pattern="breathing" style={{ width: 160, height: 160 }} />;
}

Make it yours

  • Change the look: try another pattern from the catalog, a colour, or a material such as glow.
  • Connect your app: drive it with values, such as a ring's progress, or follow a voice agent.
  • Follow your app's flow: switch looks with states, all described in one FX Spec file.

On this page