Thinking-orbs provides two-size, six-state dotted loading indicators for AI UIs, rendered on a plain 2D canvas with monochrome theme handling and accessibility features.
Genuine adoption can't be confirmed from GitHub-internal signals alone (single chain). This is a popularity spike with the adoption evidence we can observe — not a claim of real usage.
What it is
Dotted thought-orb loading indicators for AI & agent UIs. Six hand-tuned animated states, each shipped at two purpose-tuned sizes, rendered on a plain 2D canvas — no WebGL, no filters, works identically in Chrome, Safari and Firefox.
How it works
Implemented as a React component that exports ThinkingOrb. Animations are canvas-based, using 2D canvas arcs with no filters. The component supports multiple states, sizes, and theme handling that auto-detects host project theme or can be forced via props. Accessibility is provided via per-state aria-labels and role="img".
Getting started
Install:
npm install thinking-orbs
Usage example:
import { ThinkingOrb } from 'thinking-orbs';
function Status() {
return <ThinkingOrb state="searching" size={64} />;
}
Recent releases
- RELEASES (latest 0): none
Traction
- stars_7d: 1058
- stars_1d: 44
- stars: 1210
License
MIT © Jakub Antalik
Configuration and props (examples)
- States: working, searching, solving, listening, composing, shaping
- Sizes: 64 and 20
- Theme options: auto, dark, light
- Other props: speed, paused, aria-label, and standard canvas props pass-through
Performance and accessibility notes
- Accessible: role="img" with per-state aria-label
- prefers-reduced-motion: reduce handled to render a static frame
- Offscreen and tab-hidden pausing via IntersectionObserver and visibility APIs
- Uses plain 2D canvas with no WebGL or SVG filters; device-pixel-ratio capped at 2