Thinking Orbs
React canvas loading orb with nine agent states, two sizes and automatic dark/light
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.
npm install thinking-orbsSwap 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.
- nine semantic agent states
- 2D canvas, no WebGL
- respects prefers-reduced-motion
- IntersectionObserver pausing
- zero runtime dependencies
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
