$npx skillfedfor your agent
REPO

Agent UIs need loading indicators that say what the model is doing, not just spinning

on: haplollc/ThinkingOrbs

Nine animated loading indicators for SwiftUI sounds like a minor convenience package. ThinkingOrbs is more deliberate than that, and the deliberateness is the point.

Each design maps to a specific agent action: a scan meridian sweeping a dotted globe for web retrieval, bands scrambling then snapping back for reasoning, a constellation wiring itself for tool calls. The vocabulary is intentional — you pick .solving when the model is doing math, .connecting when it is hitting an API, .composing when it is writing a reply. That specificity matters for agent interfaces, where a generic spinner communicates nothing about what is actually happening underneath.

The rendering approach is worth understanding. Eight of the nine designs are genuine 3D forms: rotated, depth-shaded, z-sorted, drawn entirely in grayscale dots. The monochrome constraint is not a limitation — it is what lets them sit in any interface without fighting the surrounding UI. Each orb runs inside a single Canvas with a single TimelineView, no view per dot. The heaviest design, .composing at 566 dots, costs 65 µs to compute a frame and 0.27 ms to rasterize, against an 8.3 ms budget at 120 Hz. Orbs that scroll offscreen park their timeline immediately, including ones that start below the fold and never run at all.

The fidelity story is unusually rigorous for a UI component. This is a Swift port of Jakub Antalik's original TypeScript engine, and the README describes a differential sweep that ran 725,149 frames — 213 million dots — through both engines simultaneously, with a worst-case difference of 2e-9. The test suite checks every dot and line at both sizes, at four instants each, against the web library's published geometry to 1e-4. That level of verification is rare in any category of open-source work.

The two sizes — 64 pt regular and 20 pt small — are not the same design scaled. The small variant has fewer, larger dots and its own tempo, so it stays legible inline next to text. The geometry is also fully public: you can pull a finished draw list for any design at any instant and render it yourself in SpriteKit, Metal, a watch complication, or, the README notes with a straight face, a pen plotter.

Accessibility is handled without ceremony. Reduce Motion shows a single representative frame; Increase Contrast holds shimmer text at full strength. VoiceOver labels are per-design and localizable. The recipe section shows the crossfade pattern for mapping agent state to design, which is the practical integration question most developers will actually face.

The requirements are iOS 17+, macOS 14+, tvOS 17+, watchOS 10+, visionOS 1+, Swift 6, Xcode 16+. The MIT license carries both the original designer's copyright and Haplo's.

A semantically differentiated set of agent loading indicators, backed by unusually rigorous cross-engine parity testing and a render budget that leaves plenty of headroom.

Install it

Sources & links