Thinking Orb

A dotted thought-orb with nine hand-tuned Skia states and a global Dynamic Island toast for showing what an agent is doing.

SkiaReanimatedHapticsSource

Prerequisites

The orb draws on Skia, the Island is Reanimated-driven, and the toggle press gets a haptic.


npx expo install @shopify/react-native-skia expo-haptics expo-status-bar react-native-reanimated react-native-safe-area-context

Install


npx @rslab/cli add orb

The primary way to use this component is as a global toast: mount DynamicIslandProvider once, beside your root navigator, then call useDynamicIslandToast() from any screen to present, update, or dismiss it.

import { NavigationContainer } from '@react-navigation/native';
import { DynamicIslandProvider } from '@/components/ui/orb';

export default function App() {
  return (
    <DynamicIslandProvider defaults={{ islandGlow: 0.3, duration: 4_000 }}>
      <NavigationContainer>{/* Stack / Tabs */}</NavigationContainer>
    </DynamicIslandProvider>
  );
}

import { useDynamicIslandToast } from '@/components/ui/orb';

export function SearchButton() {
  const island = useDynamicIslandToast();

  return (
    <Button
      title="Search"
      onPress={() =>
        island.show({
          state: 'searching',
          text: 'Searching your workspace',
          orbSpeed: 1.25,
          orbGlow: 0.55,
          islandGlow: 0.25,
          duration: 5_000,
        })
      }
    />
  );
}

show(options) presents or replaces the current notification, update(options) changes an open Island without replaying its entrance, and hide() dismisses it. Set duration: 0 to keep it open until hide() is called. By default, pressing the Island dismisses it; set dismissOnPress: false to keep it visible. For Expo Router, wrap the root Stack or Slot in app/_layout.tsx the same way.

The orb itself also works standalone, without the Island, wherever you'd drop any other loading indicator:

import { ThinkingOrb } from '@/components/ui/orb';

<ThinkingOrb state="working" size={64} glow={0.3} />;

Props

`useDynamicIslandToast()`

PropTypeDefault

show(options)?

DynamicIslandToastOptions

-

Presents the Island, replacing any current notification.

update(options)?

Partial<DynamicIslandToastOptions>

-

Patches the open Island in place, no re-entrance.

hide()?

() => void

-

Dismisses the active notification.

visible?

boolean

-

Whether the global Island is currently expanded.

`DynamicIslandToastOptions`

PropTypeDefault

state?

'working''searching''solving''listening''connecting''weaving''composing''breathing''shaping'

'working'

Which of the nine hand-tuned orb animations to play.

text?

string

-

Overrides the per-state default shimmer line, e.g. 'Agent is working'.

orbSpeed?

number

1

Orb animation speed multiplier.

orbGlow?

number

0.35

Soft halo intensity around the orb, from 0 to 1.

islandGlow?

number

0.35

Ambient white glow behind the always-black Island shell, from 0 to 1.

hideStatusBar?

boolean

true

Hides the system status bar while expanded, like a real Island take-over.

duration?

number

4000

Auto-dismiss delay in ms. Use 0 to keep it open until hide() is called.

onPress?

() => void

-

Called when the expanded Island is pressed.

dismissOnPress?

boolean

true

Dismisses the Island after onPress runs.

`ThinkingOrb`

PropTypeDefault

state?

OrbState

'working'

Which animation to show — see the state list above.

size?

6420

64

Tuned size preset. Each size has its own dot count, dot size and speed — not a scale factor.

theme?

'auto''dark''light'

'auto'

auto resolves from useColorScheme() and live-updates with it. dark draws light ink for dark backgrounds, light draws dark ink.

speed?

number

1

Speed multiplier on top of the preset's baked speed.

glow?

number

0

Soft halo intensity around the rendered dots, from 0 (off) to 1.

paused?

boolean

false

Freezes the animation on the current frame.

aria-label?

string

-

Accessibility label; defaults to a per-state description.

`DynamicIsland`

The lower-level piece the provider wraps, useful if you want to drive expand/collapse yourself instead of the toast API.

PropTypeDefault

expanded

boolean

-

Drives the open/close animation.

onToggle?

() => void

-

Called on press.

state, text, orbSpeed, orbGlow, islandGlow, hideStatusBar?

—

-

Same as DynamicIslandToastOptions above.

How it works

The orb is procedural, not a video or Lottie. Every dot is computed per frame from trigonometric/3D-projection math and drawn into a Skia SkPicture via createPicture, on a plain JS-thread requestAnimationFrame loop rather than a Reanimated worklet — that's what lets nine very different states (orbits, a scanning beacon, a resolving knot, cardioid echoes, a constellation, a braid, a ribbon, a ring, a five-armed bloom) share one small set of ported drawing primitives.
Only two sizes exist on purpose. 64 and 20 are separate hand-tuned designs (dot count, dot size, speed), not one design scaled by a factor — arbitrary sizes aren't accepted by the type.
The Island sits at the real hardware position. It's pinned 11pt from the top edge, not insets.top + 11, since on Island-equipped devices the safe-area inset already accounts for the island itself. At rest the simulated shell is fully transparent, so what you actually see is the real Dynamic Island; it only becomes opaque once it has grown past the real island's silhouette.
A richer preset, scaled down. The Island renders the orb at its denser 64-dot preset, then visually shrinks it to 40pt with a transform: scale plus compensating negative margins, rather than using the sparser 20-dot preset at native size.
Two-phase open animation. A single progress value drives a shell phase (width/height/opacity of the pill) followed by a content phase (the orb and shimmer text fading in) once the shell has made enough room, plus a small elastic overshoot on the pill's lower edge only, so the top edge stays pinned to the real island throughout.
The shimmer is a moving clip window, not a gradient shader. Three layered slices of the highlighted text, each a different width/opacity, sweep across a fixed-width text box, giving a soft-to-sharp highlight sweep with no extra shader or dependency.
searching, solving, listening, and shaping are original designs. The remaining five states (working, connecting, weaving, composing, breathing) are a faithful React Native/Skia port of thinking-orbs by Jakub Antalik (MIT), which this component carries forward.
Respects reduced motion. Both the orb and the Island fall back to a static frame / instant transition when useReducedMotion() is on.

Tuning

orbSpeed / orbGlow / islandGlow on show() or update() — no need to touch the source for per-call tuning.
ORB_SOURCE / ORB_DISPLAY in DynamicIsland.tsx — the render-large-then-scale-down ratio for the orb inside the pill.
SHELL_END — where the shell-growth phase ends and the content-reveal phase begins, as a fraction of progress.
OPEN_DURATION / CLOSE_DURATION — closing is intentionally faster than opening.
SWEEP_WIDTH / PAUSE in ShimmerText.tsx — the width of the highlight sweep and the pause before it loops.

See exactly how this works with an RSLAB subscription.

Get Pro

Thinking Orb

Prerequisites

Install

Usage

Props

`useDynamicIslandToast()`

`DynamicIslandToastOptions`

`ThinkingOrb`

`DynamicIsland`

How it works

Tuning

On this page