Thinking orbs
Dotted thought-orb loading indicators for AI and agent UIs: nine hand-tuned states, 64px or 20px, auto dark/light theme.
What's interesting
- Nine hand-tuned states (listening, searching, composing, and more)
- 64px or 20px sizes for chrome vs inline use
- Live demo maps each state so you can pick before you ship
Use in your project
Install
npm install thinking-orbs- Pick a state from the demo that matches your loading pattern.
- Place at 64px in chrome or 20px inline.
- Map states to your product flows (listening, searching, composing).
Prompt your agent
From AI UX Playground: https://aiuxplayground.com/playground/thinking-orbs Thinking orbs by Jakub Antalik & Alex Brinza Interactive demo and docs for the thinking-orbs npm package. Drop a ThinkingOrb into agent chrome with a state like listening, searching, or composing, plus size and speed. The playground switches nine shader states and two sizes so you can match the motion to the job. Install and usage snippets sit beside live pills (Solving, Agent listening, Agent planning) so you can lift the indicator into a product with clear starting parameters. Made by Jakub Antalik and Alex Brinza. Install thinking-orbs and add a ThinkingOrb to our agent UI. State: [listening | searching | composing]. Size: [64px | 20px]. Theme: [light | dark]. Place in [composer | sidebar | inline]. List props and layout constraints for our React app.
