---
name: Thinking Orbs
slug: thinking-orbs
url: "https://dontmakeitugly.com/resources/thinking-orbs"
website: "https://orbs.jakubantalik.com"
github: "https://github.com/Jakubantalik/Libraries"
npm: "https://www.npmjs.com/package/thinking-orbs"
type: package
categories:
  - components
  - motion
tags:
  - ai
  - loading
  - states
  - orb
  - react
  - swiftui
  - react-native
  - microinteractions
frameworks:
  - react
  - nextjs
pricing: free
agentFriendly: excellent
agentAccessMethods:
  - npm
  - github
  - public_web
installCommand: npm install thinking-orbs
difficulty: beginner
staffPick: true
dateAdded: "2026-09-03"
---

# Thinking Orbs

An animated orb that shows what your AI is doing: listening, thinking, searching, working.

- Type: Package
- Categories: Components, Motion
- Pricing: Free
- Works with: React, Next.js, SwiftUI, React Native

## What it is

Thinking Orbs is a small component by Jakub Antalik and Alex Brinza for the states an AI feature passes through: listening, working, searching, solving, composing and more, each with its own motion. Available for React (npm install thinking-orbs), SwiftUI and React Native, with a playground to set size and speed.

## Why it's here

Most agent-powered apps show a spinner or three dots while the model works. This is a better answer, and a rare example of motion designed for AI products rather than bolted on. Use one state per moment and keep the size modest.

## Best for

- AI assistant states
- loading and progress moments
- agent-powered apps

## Links

- Website: https://orbs.jakubantalik.com
- GitHub: https://github.com/Jakubantalik/Libraries
- npm: https://www.npmjs.com/package/thinking-orbs

## Can my agent use this?

Yes. The site shows the full usage snippet and the package installs from npm. Tell your agent which states map to which parts of your flow.

Agent friendliness: Excellent. Public docs, public source or an installable package. An agent can read, install and implement this directly.
Access methods: npm, GitHub, Public website.
Install: `npm install thinking-orbs`

## Prompt to hand your agent

```text
Use Thinking Orbs as a design and implementation reference for this project.

What it is: An animated orb that shows what your AI is doing: listening, thinking, searching, working.

Website: https://orbs.jakubantalik.com
GitHub: https://github.com/Jakubantalik/Libraries
npm: https://www.npmjs.com/package/thinking-orbs
Install: npm install thinking-orbs

Use it specifically for:
- AI assistant states
- loading and progress moments
- agent-powered apps

How you can access it: npm, GitHub, Public website.
Works with: React, Next.js.

Read the documentation before writing code, and use the current version's API. Install it properly rather than re-implementing it. Adapt the defaults to this project's existing design tokens, typography, spacing and accessibility requirements. Do not blindly copy the entire resource.
```

## Related

- [NumberFlow](https://dontmakeitugly.com/resources/number-flow.md): Animated number transitions that make counters, prices and stats feel expensive.
- [Aceternity UI](https://dontmakeitugly.com/resources/aceternity-ui.md): Showy, copy-paste React components for landing pages that need a moment.
- [Magic UI](https://dontmakeitugly.com/resources/magic-ui.md): Animated React components and effects for landing pages, built to sit alongside shadcn/ui.
- [React Three Fiber](https://dontmakeitugly.com/resources/react-three-fiber.md): Three.js as React components, with a huge helper ecosystem.

## In collections

- [Beautiful open-source React components](https://dontmakeitugly.com/collections/beautiful-open-source-components.md)
- [Motion resources worth knowing](https://dontmakeitugly.com/collections/motion-worth-knowing.md)

Thinking Orbs is an independent resource listed by Don't Make It Ugly. We link to it; we aren't affiliated with it. Pricing and licence details are as understood at the time of listing; check the official site.