React

Installation

npm install thinking-orbs

Usage

import { ThinkingOrb } from 'thinking-orbs';

<ThinkingOrb state="searching" size={64} />

React Native

Installation

npm install thinking-orbs-native @shopify/react-native-skia react-native-reanimated

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).

Usage

import { ThinkingOrb } from 'thinking-orbs-native';

<ThinkingOrb state="searching" size={64} />

SwiftUI

Installation

// Package.swift — or Xcode: File › Add Package Dependencies… › paste the URL (Branch: main)
.package(url: "https://github.com/Jakubantalik/Libraries.dev", branch: "main")
// …and in your target's dependencies:
.product(name: "ThinkingOrbsKit", package: "Libraries.dev")

Usage

import ThinkingOrbsKit

ThinkingOrb(state: .searching, size: .px64)

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.

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