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.

Using a coding agent? Copy one prompt with the install line, this design as an FX Spec file and the code that loads it on each platform, and paste it into Claude Code, Cursor or Codex.

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.