Your first visual in 1 minute

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.

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.