Thinking Orbs

React canvas loading orb with nine agent states, two sizes and automatic dark/light

Tier A · StrongComponent LibraryAnimation Librarygithub.com

A single React component that renders a dotted orb on a 2D canvas as the busy indicator for an AI or agent interface. It ships nine tuned states — working, searching, solving, listening, connecting, weaving, composing, breathing and shaping — at two sizes, 64px for avatar scale and 20px inline with text. Props are state, size, speed, paused, aria-label and theme (auto/dark/light). It has no dependencies beyond React, uses no WebGL or CSS filters, honours prefers-reduced-motion, and pauses itself off-screen via IntersectionObserver.

Install

npm install thinking-orbs

For an agent

Swap this in wherever you would otherwise ship a generic spinner in a chat or agent UI — the win is that the nine states are semantically distinct, so you can bind state to the actual phase of the run (searching during retrieval, solving during tool execution, listening during voice capture) and the user reads progress without text. It is canvas, not DOM, so it will not inherit currentColor or Tailwind classes; drive appearance through the theme prop and give it an explicit box. Always pass aria-label, because a canvas is invisible to a screen reader otherwise, and keep the 20px size for inline use only — the dot pattern turns to mush below that.

Why it is here. Agent UIs have converged on the ambient orb as the signal that a model is thinking, and this is the tightest open implementation of it — dependency-free, reduced-motion-aware, and with states that map to real agent phases.

Install command, framework, licence and component list.

Facts

License: MIT
Pricing: Free, Open source
Framework: React
Styling: Not applicable
Distribution: npm package, GitHub repository
Platform: Web
Content type: Code
Agent readiness: Readable open source, CLI installable, Structured documentation
Accessibility: Honors reduced motion, Accessible
Maturity: Actively maintained
GitHub stars: 2,468
Package: thinking-orbs

Components it ships

1 total

Spinner Status Indicator Typing Indicator

Helps you build

AI Chat Panel Agent Run History AI Action Approval

Notable for

nine semantic agent states
2D canvas, no WebGL
respects prefers-reduced-motion
IntersectionObserver pausing
zero runtime dependencies

Provenance

Verified 2026-08-15. HTTP 200. https://github.com/Jakubantalik/thinking-orbs, https://api.github.com/repos/Jakubantalik/thinking-orbs, https://registry.npmjs.org/thinking-orbs

Also in AI Interface Kits

github.comTier A