wtf is thinking-orbs?

Thinking Orbs is a small React component library that gives you animated loading indicators shaped like dotted orbs, made specifically for AI and agent interfaces. Instead of a generic spinner, you get nine different hand tuned animations, each meant to represent a different thing an agent might be doing, such as working, searching, solving, listening, connecting, weaving, composing, breathing, or shaping. Each animation is drawn on a plain 2D canvas rather than WebGL or filters, so it renders the same way in Chrome, Safari, and Firefox. You install it with npm and use it as a single component, passing in a state prop to pick which animation to show. It comes in two separate sizes rather than one design scaled up or down: a larger size meant for chat avatar style placement, and a smaller size meant for inline text, each with its own dot count, dot size, and speed tuned specifically for that size. The component is strictly monochrome, using light dots on dark backgrounds and dark dots on light backgrounds, and it can automatically detect which theme to use. It checks for a dark or light attribute or class on an ancestor element first, following the convention used by tools like Tailwind and shadcn, then falls back to the operating system's color scheme setting, and updates live if either changes. You can also pin the theme manually instead of relying on automatic detection. Other props let you adjust the animation speed, pause it on the current frame, and override the accessibility label. For accessibility and performance, each orb includes a sensible label out of the box, respects a user's reduced motion setting by showing a static frame instead of animating, and automatically pauses when scrolled off screen or when the browser tab is hidden. All orb instances on a page share a single animation clock so they resume in sync. The project is released under the MIT license.