Thinking Orbs Gives Your AI App a Face (Without the Spinning Loader)

Thinking Orbs just shipped: a small, open React component library that gives your AI app a visual way to communicate what its agent is actually doing, whether that is reasoning, working, or simply waiting. If you have ever slapped a spinning circle on your vibe-coded app and thought "this tells the user nothing" this is built for exactly that moment.

Why a Spinner Is Not Good Enough Anymore

A generic loader made sense when software was just fetching data. It had one job: "wait a second." AI agents have many jobs happening in sequence, and users have no idea which one is running. Are they waiting two seconds or twenty? Is the model thinking hard, or did it stall? That uncertainty erodes trust fast, especially for apps where the AI is doing something that feels weighty, like writing, planning, or reasoning through a problem.

Thinking Orbs introduces the concept of a state-aware status indicator. You pass it a state prop (the current thing your agent is doing), and the orb animates differently to match. That is a meaningful shift in how AI interfaces can communicate with the people using them.

What the Component Actually Does

The core idea is simple: one Orb component, one state prop. The states map to what an AI agent is commonly doing at any given moment. Beyond state, you get a handful of props that let you tune the feel without touching any animation code yourself.

• size controls how big the orb renders, in pixels.
• speed lets you dial the animation up or down with a multiplier.
• variant gives you alternative visual flavours of each state.
• paused freezes the animation entirely, useful for edge cases or testing.
• label adds a screen-reader-friendly name, which is a small but important accessibility detail that most devs skip.
• className lets you tint the orb using standard text colour classes, so it can match your app's colour system without extra CSS.

There are also opt-in shapes and render styles. The default ships a single shape and a single drawing method to keep your app's file size small. If you want something like a cube shape or a halftone render style, you import those separately and only what you use ends up in your bundle. A playground on the site lets you try every combination before committing to one.

How a Designer-Builder Could Actually Use This

Say you are building a simple AI writing assistant with a tool like Cursor, Bolt, or Replit. Your app sends a prompt, waits for the model to respond, and streams back text. Right now you probably have a loading state that just... sits there.

Here is how Thinking Orbs fits in without needing to go deep on code:

1. Drop it into your loading state. Wherever your app currently shows a spinner or a skeleton placeholder, swap in the Orb component with the appropriate state. If your AI is actively generating, use state="working". If it is doing multi-step reasoning before it writes anything, use state="reasoning".

2. Use the playground first. Before touching your actual project, go to the playground at thinkingorbs.com and find the size, shape, and speed that fits your app's visual weight. Screenshot it, share it with a collaborator, get a feel for it. This is a design decision, not just a dev one.

3. Tint it to your palette. Because the orb responds to text colour classes, you can make it match your brand in seconds. No custom CSS required.

4. Add the label prop. It takes thirty seconds and makes your app meaningfully more accessible. Worth doing from day one.

The site also ships an llms.txt file, which is a convention for giving AI coding assistants structured context about a library. In practice this means if you paste a question about Thinking Orbs into Cursor or Claude, the assistant is more likely to give you accurate, up-to-date usage instructions rather than hallucinating props that do not exist.

What to Keep in Mind

Thinking Orbs is a React library, so it works best in React-based projects. If you are building with a different framework, it is not directly usable yet. The library also handles the visual side of status communication only. You still need to wire up your own logic to know which state your agent is in at any moment, the orb just displays it. That wiring is the part that requires some basic understanding of how your app manages state.

The bigger open question is how many distinct states the library will eventually support. Right now the set is focused and practical. As AI agents get more complex, covering things like tool-calling, memory retrieval, or multi-agent handoffs, it will be interesting to see whether the component grows to match.

For now, Thinking Orbs is a tidy, well-considered tool that addresses a real UX gap. If your AI app currently tells users nothing while it thinks, this is a fast and low-risk way to change that.