Loading Spinners That Tell Users What Your AI Is Actually Doing

What it does

thinking-orbs is a set of monochrome, dotted-canvas loading indicators built for AI and agent interfaces. It ships nine distinct animated states—each representing a specific agent verb like searching, solving, or weaving—at two fixed sizes tuned for chat avatars and inline text. Theme detection is automatic via MutationObserver and prefers-color-scheme, and everything renders with plain 2D canvas arcs, so the pixels match across Chrome, Safari, and Firefox without WebGL or SVG filters.

The interesting bit

Instead of scaling a single animation, the author hand-tuned separate dot counts, sizes, and speeds for the 64 px and 20 px variants. Every instance also shares one global clock, which means orbs paused by offscreen scrolling or a hidden tab resume exactly in phase rather than stuttering back to life.

Key highlights

• Nine specific agent states (working, listening, composing, etc.) that tell the user what is happening instead of just that something is happening
• Two discrete sizes with independent design tuning rather than naive scaling
• Live theme switching via Tailwind/shadcn class detection, OS preference, and SSR-safe client-side painting
• Respects prefers-reduced-motion by dropping to a static representative frame
• Performance guardrails: pauses offscreen via IntersectionObserver, caps device-pixel-ratio at 2, and avoids expensive filters entirely

Verdict

Worth a look if you’re building an AI interface and want loading states that communicate intent rather than simply killing time. Give it a pass if you need color, complex gradients, or evidence of non-React usage—the README only demonstrates TSX integration.