domains / families / design / thinking-orbs

thinking-orbs

separate

Add accessible animated AI loading and agent-status indicators with the React thinking-orbs library. Use when a chat, copilot, voice, search, generation, or tool-running interface needs a semantic working, searching, solving, listening, composing, or shaping state; when replacing a generic spinner with an AI activity orb; or when implementing the library's size, theme, speed, pause, reduced-motion, and canvas behavior.

When to use

• Add accessible animated AI loading indicators
• Add agent-status indicators
• Replace generic spinner with AI activity orb
• Implement library size, theme, speed, pause, reduced-motion, and canvas behavior
• Map product lifecycle to semantic states
• Configure aria-label and live region announcements
• Use in React 18+ interfaces
• Use in Next.js App Router with client boundary

When not to use

• Use as a progress percentage or completion signal
• Use custom colors
• Use arbitrary sizes
• Stretch one preset into another
• Simulate pause with speed={0}
• Use in React versions older than 18

Skill page

Source