thinking-orbs
A small React component library of nine hand-tuned, animated dotted loading indicators for AI and agent chat interfaces, rendered on a plain 2D canvas with automatic dark and light theming.
thinking-orbs is a component library of dotted thought-orb loading indicators for AI and agent user interfaces. It ships nine hand-tuned animated states, each representing a different verb an agent can be doing, at two purpose-tuned sizes, rendered on a plain 2D canvas with no WebGL and no filters, so it renders identically in Chrome, Safari and Firefox.
Its theme resolves automatically in three layers: an ancestor element's data-theme attribute or dark/light class, then the operating system's prefers-color-scheme setting, then a safe default for server-side rendering, and it updates live if any of these change. Each instance carries a role and an appropriate aria-label for accessibility, renders a static frame when the user prefers reduced motion, and pauses automatically when scrolled offscreen or when its browser tab is hidden, with all instances sharing one animation clock.
It installs from npm, is written in TypeScript, and is released under the MIT license.