Thinking Orbs

Thinking Orbs is an MIT-licensed component library by Yogesh that provides animated status indicators for AI interfaces. It ships as the npm package @yogesharc/thinking-orbs and, per the homepage, has no dependencies and weighs 3.8 KB gzipped.

What It Is

Thinking Orbs gives AI chat and agent interfaces a small animated orb that shows what the agent is currently doing. You import the Orb component, set a state, and optionally pick a variant. The React orb needs only React, and a plain JS version needs no dependencies at all.

States, Variants, and Customization

The orb covers states such as working, reasoning, searching, background tasks, retrying, compacting, waiting, and base. Several states have named variants, such as Lighthouse, Gyro, Twins, Spiral, Squeeze, Fuse, and Surge. Props control size, speed, dot density, dot size, tilt angle, paused state, a screen-reader label, and text-color tinting via className. Extra shapes (for example a cube) and renders (for example halftone) are opt-in imports, so only what you import lands in your bundle. A playground page lets you try the combinations.

Setup Path

Install from npm, pnpm, yarn, or bun, or copy the React component into a project with shadcn. The site also offers a copyable prompt and an llms.txt file.