AI UX PlaygroundNewsletterJoin 2K+ AI designers and PMs on Substack. New teardowns, patterns, and prompts as they drop.

Jakub Antalik & Alex BrinzaComponents & kits

Thinking orbs

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.

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
  1. Pick a state from the demo that matches your loading pattern.
  2. Place at 64px in chrome or 20px inline.
  3. Map states to your product flows (listening, searching, composing).

Prompt your agent

From AI UX Playground: https://aiuxplayground.com/inspirations/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.

Tags

ReactMotionAI UXLoadingComponents