Thinking Orbs

Animated orb states that visualize an AI agent's work — canvas particle modes for working, searching, weaving, and more.

Particles on tilted orbits — state="working".

Loading…

Installation

CLI

npx @sonojs/ui@latest add thinking-orbs

thinking-orbs.tsx

import { ThinkingOrb } from "@/components/sonojs/thinking-orbs"

export function Example() {
  return <ThinkingOrb state="working" size={64} />
}

Prop	Type	Default	Description
state	OrbState	"working"	working · searching · solving · listening · connecting · weaving · composing · breathing · shaping
size	64 · 20	64	Tuned size presets (not a simple scale factor).
theme	"auto" · "dark" · "light"	"auto"	Ink palette; auto follows host dark/light.
speed	number	1	Speed multiplier on the preset base speed.
paused	boolean	false	Freeze on the current frame.
aria-label	string	derived	Accessible label; defaults per state.