Thinking Orbs
Yogesh (yogesharc) · Coding
Thinking Orbs ist eine Open-Source-Bibliothek mit React-Komponenten, deren animierte Orbs zeigen, was ein KI-Agent in jedem Moment tut.
Über Thinking Orbs
About
Was ist Thinking Orbs
Thinking Orbs ist eine React-Bibliothek, die animierte Orbs für Oberflächen von KI-Agenten zeichnet. Jeder Orb ist eine Kugel aus Punkten, und jeder Zustand verändert die Bewegung dieser Punkte. Während der Assistent nachdenkt, wandert ein Funke über die Oberfläche. Sucht er im Web, springt eine Linse von Stelle zu Stelle. Versucht er es nach einem Fehler erneut, dreht sich der Orb und rollt sich zurück.
Die Bibliothek gibt es, weil Agenten-Oberflächen viel Zeit in einem unbestimmten Arbeitszustand verbringen. Ein Spinner sagt nichts darüber, was das Modell tut, und Nutzer können eine langsame Antwort nicht von einer hängenden Anfrage unterscheiden. Dieser animierte Orb macht aus der Leerlaufzeit ein lesbares Signal, in einer Größe, die neben eine Textzeile passt.
Yogesh veröffentlicht das Paket als Open Source unter der MIT-Lizenz. Der React-Orb braucht nur React, die reine JavaScript-Version braucht gar nichts, und das SwiftUI-Paket deckt iOS 17 und macOS 14 ab. Formen und Renderer jenseits der Voreinstellung kommen als eigene Module, sodass jedes Projekt nur bündelt, was es importiert.
Die Grenzen sollten Sie vor der Installation kennen. Die Komponente animiert, verfolgt Ihren Agenten aber nicht. Sie entscheiden, welcher Zustand zu sehen ist und wann er wechselt, meist aus Ihrem eigenen Anfragezyklus heraus. Formen und Renderer bleiben vorerst dem Web vorbehalten, und die SwiftUI-Version nimmt weniger Optionen an.
Erste Schritte
- Installieren Sie das Paket mit npm, pnpm, yarn oder bun: npm i @yogesharc/thinking-orbs.
- Importieren Sie Orb und übergeben Sie einen Zustand, etwa reasoning oder searching.
- Stellen Sie size, speed, density und tilt so ein, dass der Orb zu Ihrem Text passt, und ergänzen Sie label für Screenreader.
- Importieren Sie eine Form oder einen Renderer aus den optionalen Modulen, wenn die Kugel anders aussehen soll.
- Oder kopieren Sie den Code mit dem shadcn-Befehl nach components/ und bearbeiten ihn als eigene Datei.
Produktinformationen
Ein kurzer Überblick über Preise, unterstützte Plattformen und die Leistung von Thinking Orbs.
Am besten für
Die Nutzer, Aufgaben und Szenarien, für die dieses Tool am besten passt.
Nutzer
- React-Entwickler, die einen Chat oder ein Agentenprodukt bauen
- Frontend-Entwickler in kleinen Teams ohne Designer
- Einzelentwickler mit einem Nebenprojekt
Aufgaben
- Nachdenken und Websuche in einem Streaming-Chat trennen
- Lange Arbeit im Hintergrund zeigen, etwa eine Indexierung oder eine Aufgabe im Stil eines Entwicklungsservers
- Auf einen neuen Versuch oder ein Nutzungslimit hinweisen
- Ein leeres Panel füllen, während ein Werkzeugaufruf zurückkommt
Szenarien
- Eine Chat-App, die Tokens streamt und neben der Antwortüberschrift einen Status braucht.
- Ein Coding-Agent oder ein Editor-Plugin, in dem Werkzeugaufrufe aufeinander folgen und jeder ein eigenes Signal braucht.
- Eine SwiftUI-App für iPhone oder Mac, die dieselbe Bildsprache wie die Webversion will.
Wichtigste Funktionen
Eine Statusanzeige für jede Agentenaktion
Die Bibliothek deckt neun Zustände ab, gedacht für die Schleife eines Agenten: laufende Arbeit, Nachdenken und Suche zuerst, danach Hintergrundaufgaben, Browsersteuerung, neue Versuche, Kontextverdichtung, Warten auf ein Nutzungslimit und Leerlauf. Die meisten haben benannte Varianten, gyro lässt einen Arbeits-Orb schwanken, lighthouse schwenkt einen Suchstrahl.
Props, die das Aussehen ohne CSS abstimmen
Size, speed, density, dotSize und tilt sind simple Zahlen-Props. Damit passt der Orb zu einer 14-px-Bildunterschrift oder zu einem 48-px-Block, ohne dass Sie Stile schreiben. Die Prop paused friert die Animation im aktuellen Bild ein, und className lässt den Orb die Textfarbe Ihrer Utility-Klassen übernehmen. Gezeichnet wird in currentColor, der Dunkelmodus funktioniert also ohne Zusatz.
Optionale Formen und Renderer
Der Kern liefert eine Form und einen Renderer. Vier weitere Formen (cube, octahedron, tetrahedron, torus) und sieben Renderer (dashes, squares, crosses, mesh, halftone, lines, verticalLines) liegen in eigenen Einstiegspunkten. Tree Shaking lässt weg, was Sie nicht importieren, und eine eigene Form ist eine Funktion, die Punkte innerhalb der Einheitskugel zurückgibt.
Vier Wege zur Integration
Sie können aus npm installieren, den Code über eine shadcn-URL kopieren, ihn in reinem JavaScript mit mountOrb einhängen oder das Swift-Paket in Xcode hinzufügen. Die Vanilla-Version bietet pause, play und destroy, was zu einer Seite passt, die ihren Lebenszyklus selbst verwaltet. Die SwiftUI-Version zeichnet im Vordergrundstil, ein Modifier wie foregroundStyle(.blue) färbt sie also ein.
Geringes Gewicht und Barrierefreiheit ab Werk
Der React-Build hat außer React keine Abhängigkeiten, der Vanilla-Build gar keine. Die Standardgröße von 20 px ist die Größe, für die die Formen gezeichnet wurden, die Punkte bleiben also in einer dichten Oberfläche lesbar. Die Prop label benennt den Orb für Screenreader, und bei reduzierter Bewegung im System hält die Animation an.
Open Source unter der MIT-Lizenz
Der vollständige Code liegt auf GitHub, und die MIT-Lizenz erlaubt kommerzielle Nutzung, Änderung und Weitergabe. Zahlen läuft freiwillig über Patreon und finanziert die Arbeit, ohne Funktionen freizuschalten. Für ein Team, das die Komponente forken und selbst pflegen will, bleibt der Aufwand kalkulierbar.
Vor- und Nachteile
Vorteile
- Neun Zustände mit Varianten decken fast alle Aktionen ab, die eine Agenten-Oberfläche melden muss.
- Keine Abhängigkeitskette, die Installation belastet ein React-Projekt kaum.
- Die Standardgröße von 20 px bleibt in Werkzeugleisten, Nachrichtenkopf und Seitenpanel gut lesbar.
- Reduzierte Bewegung und die Beschriftung für Screenreader stecken bereits in der Komponente.
Nachteile
- Der Orb animiert nur, Sie müssen die Ereignisse Ihres Agenten also selbst dem richtigen Zustand zuordnen.
- Formen und Renderer gibt es nur im Web, die SwiftUI-Version bleibt dadurch schmaler.
- Die Dokumentation passt auf eine Seite, für das Timing zwischen Zuständen hilft nur Ausprobieren.
Häufige Fragen
Ja. Das Paket ist Open Source unter der MIT-Lizenz, alle Zustände, Formen und Renderer sind ohne Kosten enthalten. Es gibt keine Bezahlstufe und kein Konto.
Ähnliche Inhalte
Entdecke passende Tools, Skills und Artikel zu Thinking Orbs.
Alternativen zu Thinking Orbs
Base Code
Base44 (Wix) · Coding · ProduktivitätBase Code ist eine geteilte Cloud-Entwicklungsumgebung von Base44. Das Team beschreibt Änderungen an einem bestehenden GitHub-Repository im Chat, prüft sie in der Vorschau und reicht sie als Pull Request ein.
Google EmbeddingGemma 2
Google DeepMind · Schreiben · Bilder · CodingGoogle EmbeddingGemma 2 ist ein offenes Modell mit 740 Millionen Parametern, das Text, Code, Bilder, Audio und Videobilder in Vektoren eines gemeinsamen 768-dimensionalen Raums umwandelt und auf Handys und Notebooks läuft.
GitGlow
GitGlow · Coding · ProduktivitätGitGlow ist ein Git-Client für den Desktop, der Ihren Code und die Änderungen Ihrer KI-Agenten in einer Review bündelt, damit Sie vor dem Ausliefern sehen, was die Maschine verlässt.