Thinking orbs
Thought-orb loading indicators for AI interfaces, with nine hand-tuned animated states.
Installation
npm install thinking-orbs
Usage
import { ThinkingOrb } from 'thinking-orbs';
<ThinkingOrb state="searching" size={64} />
Installation
thinking-orbs-native is not on npm yet — it lives in this repo at packages/thinking-orbs/ports/react-native/thinking-orbs-native. Expo needs expo run:ios / run:android (native modules).
npm install thinking-orbs-native @shopify/react-native-skia react-native-reanimated
Usage
import { ThinkingOrb } from 'thinking-orbs-native';
<ThinkingOrb state="searching" size={64} />
Installation
// Package.swift — or Xcode: File › Add Package Dependencies… › Add Local… .package(path: "packages/thinking-orbs/ports/ios/ThinkingOrbsKit")
Usage
import ThinkingOrbsKit ThinkingOrb(state: .searching, size: .px64)
Add the Orb effect from Libraries.dev to my React app.
Install:
npm install thinking-orbs
Usage:
import { ThinkingOrb } from 'thinking-orbs';
<ThinkingOrb state="searching" size={64} />
Props:
- state: "working" | "searching" | "solving" | "listening" | "connecting" | "weaving" | "composing" | "breathing" | "shaping"
- size: 64 (chat-avatar scale) or 20 (inline-text scale) — each is separately tuned
- speed: multiplies the animation clock, default 1
- dark: boolean, picks the light or dark tuning
- paused: boolean, freezes the animation
Orb replaces the spinner in an AI "thinking" state with nine hand-tuned animated
states. It ships zero runtime dependencies and needs React 18 or newer.
Docs: https://libraries.dev/orbs.html
