What problem does it solve?
Chat, copilot, and agent interfaces need truthful, accessible loading feedback, but generic spinners fail to communicate what the AI is actually doing and often break accessibility, theming, or reduced-motion requirements.
Core Features & Use Cases
- Semantic Activity States: Map product phases to six shipped states (working, searching, solving, listening, composing, shaping) so the indicator reflects the real underlying activity.
- Accessible by Default: Built-in role and per-state ARIA labels, reduced-motion static frames, and guidance for announcing status exactly once via role="status" regions.
- Theme and Performance Handling: Auto dark/light theme resolution, DPR-capped Canvas 2D rendering, offscreen and hidden-tab pausing, and tuned 20px/64px size presets.
- Use Case: In a Next.js chat app, wrap the component in a client boundary and show
state="searching" during retrieval, state="composing" while drafting the reply, then remove the orb when the response completes.
Quick Start
Install the thinking-orbs npm package and ask your agent to add a ThinkingOrb component with an appropriate state, size, and aria-label to your React chat interface.
