Thinking Orbs

React canvas loading orb with 9 named agent states and two sizes

Tier A · StrongPrimitiveAnimation LibraryComponent Libraryorbs.jakubantalik.com

(Visit orbs.jakubantalik.com ↗)(Docs)(Repository)

Preview image from orbs.jakubantalik.com

Thinking Orbs is a single React component that renders a dotted, canvas-drawn orb as a loading indicator for AI and agent UIs. It ships nine hand-tuned states, each with its own particle geometry — working (orbits), searching (globe), solving (rubik), listening (wave), connecting (web), weaving (braid), composing (ribbon), breathing (ring) and shaping (morph) — at two sizes, 64px and 20px, with per-size speed and density tuning. Props are state, size, theme ('auto' resolves light/dark from context), speed, paused and aria-label, and it listens to prefers-reduced-motion. It is MIT, one npm install, and it replaces the generic spinner in a chat or agent surface with a state that actually tells the user what the model is doing.

Install

npm install thinking-orbs

For an agent

Drop this in wherever you would otherwise reach for a spinner in an agent or chat UI, and map your real pipeline stages onto its state names — 'searching' while a tool call runs, 'composing' while tokens stream, 'listening' for voice capture — because the whole point is that the shape communicates the stage. It renders to a canvas with devicePixelRatio scaling, so it is client-only: guard it behind 'use client' in Next.js and do not try to SSR it. Two sizes only (64 and 20) are hand-tuned; scaling the CSS box to other sizes degrades the dot field, so use 20px inline in a message row and 64px as a standalone hero indicator.

Why it is here. Agent UIs badly need a vocabulary for 'what is the model doing right now', and this is a tiny MIT dependency that gives you nine legible answers instead of one anonymous spinner.

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, Client-rendered shell
Accessibility: Honors reduced motion
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

Notable for

9 named states with distinct particle geometry
64px and 20px hand-tuned sizes
prefers-reduced-motion aware
auto light/dark theme resolution
MIT, single npm install, React 18+

Provenance

Verified 2026-08-15. HTTP 200. https://orbs.jakubantalik.com/ (JS-only shell; read /assets/main-DQFaCC1-.js and /assets/ThinkingOrb-CPAX2vdL.js directly), https://github.com/Jakubantalik/thinking-orbs via gh api, https://registry.npmjs.org/thinking-orbs

Also in AI Interface Kits

orbs.jakubantalik.comTier A