Thinking Orbs
Yogesh (yogesharc) · Programmation
Thinking Orbs est une bibliothèque de composants React open source dont les orbes animés montrent ce que fait un agent IA à chaque instant.
À propos de Thinking Orbs
About
Qu'est-ce que Thinking Orbs
Thinking Orbs est une bibliothèque de composants React qui dessine des orbes animés pour les interfaces d'agents IA. Chaque orbe est une sphère de points, et chaque état modifie le mouvement de ces points. Pendant que l'assistant raisonne, une étincelle parcourt la surface. Quand il cherche sur le web, une lentille saute d'un point à l'autre. S'il réessaie après une erreur, l'orbe tourne puis se rembobine.
La bibliothèque répond à un problème concret : les interfaces d'agents passent beaucoup de temps dans un état de travail flou. Un spinner ne dit rien de ce que fait le modèle, et l'utilisateur ne distingue pas une réponse lente d'une requête bloquée. Cet orbe animé transforme ce temps mort en signal lisible, dans une taille qui tient à côté d'une ligne de texte.
Yogesh le publie en open source sous licence MIT. L'orbe React n'a besoin que de React, la version JavaScript pure n'a besoin de rien et le paquet SwiftUI couvre iOS 17 et macOS 14. Les formes et les rendus qui dépassent le réglage par défaut arrivent en modules séparés, si bien que chaque projet n'embarque que ce qu'il importe.
Mieux vaut connaître les limites avant d'installer. Le composant anime, mais il ne suit pas votre agent : c'est vous qui choisissez l'état à afficher et le moment du changement, en général depuis votre propre cycle de requêtes. Les formes et les rendus restent réservés au web, et la version SwiftUI accepte moins d'options.
Premiers pas
- Installez le paquet avec npm, pnpm, yarn ou bun : npm i @yogesharc/thinking-orbs.
- Importez Orb et passez-lui un état, par exemple reasoning ou searching.
- Réglez size, speed, density et tilt pour accorder l'orbe à votre texte, puis ajoutez label pour les lecteurs d'écran.
- Importez une forme ou un rendu depuis les modules optionnels pour changer la silhouette ou la façon de dessiner les points.
- Ou copiez le code dans components/ avec la commande shadcn et modifiez-le comme votre propre fichier.
Informations sur le produit
Aperçu des tarifs, des plateformes compatibles et des performances de Thinking Orbs.
Idéal pour
Les utilisateurs, tâches et cas d'usage où cet outil convient le mieux.
Utilisateurs
- Développeurs React qui construisent un chat ou un produit à agents
- Ingénieurs frontend en petite équipe sans designer
- Créateurs indépendants sur un projet personnel
Tâches
- Distinguer le raisonnement de la recherche web dans un chat en streaming
- Montrer un travail long en arrière-plan, indexation ou tâche de type serveur de développement
- Signaler une nouvelle tentative ou une limite d'usage
- Remplir un panneau vide pendant qu'un appel d'outil revient
Cas d'usage
- Une application de chat qui reçoit des tokens en streaming et veut un état à côté de l'en-tête de réponse.
- Un agent de code ou un plugin d'éditeur où les appels d'outils s'enchaînent et chacun demande son propre signal.
- Une application SwiftUI pour iPhone ou Mac qui veut le même langage visuel que la version web.
Fonctionnalités clés
Un indicateur d'état pour chaque action de l'agent
La bibliothèque couvre neuf états pensés pour la boucle d'un agent : travail en cours, raisonnement et recherche en tête, puis tâches d'arrière-plan, pilotage du navigateur, nouvelles tentatives, compactage du contexte, attente d'une limite d'usage et inactivité. La plupart ont des variantes nommées : gyro fait osciller un orbe de travail, lighthouse balaie un faisceau de recherche.
Des props qui règlent l'allure sans CSS
Size, speed, density, dotSize et tilt sont des props numériques, de quoi caler l'orbe sur une légende de 14 px ou un bloc de 48 px sans écrire de style. La prop paused fige l'animation sur l'image courante, et className laisse l'orbe hériter de la couleur de texte de vos classes utilitaires. Le dessin utilise currentColor, donc le mode sombre fonctionne sans réglage supplémentaire.
Des formes et des rendus en option
Le cœur fournit une forme et un rendu. Quatre autres formes (cube, octahedron, tetrahedron, torus) et sept rendus (dashes, squares, crosses, mesh, halftone, lines, verticalLines) vivent dans des points d'entrée séparés. Le tree shaking écarte ce que vous n'importez pas, et une forme personnalisée est une fonction qui renvoie des points dans la sphère unité.
Quatre façons de l'adopter
Vous pouvez installer depuis npm, copier le code via une URL shadcn, le monter en JavaScript pur avec mountOrb ou ajouter le paquet Swift dans Xcode. La version vanilla expose pause, play et destroy, utile pour une page qui gère son propre cycle de vie. La version SwiftUI dessine avec le style de premier plan, donc un modificateur comme foregroundStyle(.blue) le colore.
Peu de poids et accessibilité par défaut
Le build React n'a aucune dépendance en dehors de React, et celui en JavaScript pur n'en a aucune. La taille par défaut de 20 px correspond à celle pour laquelle les formes ont été dessinées, les points restent donc lisibles dans une interface dense. La prop label nomme l'orbe pour les lecteurs d'écran, et l'animation s'arrête quand le système signale une réduction des mouvements.
Open source sous licence MIT
Le code complet est sur GitHub, et la licence MIT autorise l'usage commercial, la modification et la redistribution. Le paiement passe par Patreon, il finance le travail sans débloquer de fonction. Pour une équipe qui veut forker le composant et le maintenir, le coût reste prévisible.
Avantages et inconvénients
Avantages
- Neuf états avec variantes couvrent presque toutes les actions qu'une interface d'agent doit signaler.
- Aucune chaîne de dépendances : l'installation pèse très peu dans un projet React.
- La taille par défaut de 20 px reste nette dans une barre d'outils, un en-tête de message ou un panneau latéral.
- La réduction des mouvements et l'étiquette pour lecteurs d'écran sont intégrées au composant.
Inconvénients
- L'orbe ne fait qu'animer : c'est à vous d'associer les événements de votre agent au bon état.
- Les formes et les rendus sont réservés au web, ce qui laisse moins d'options à la version SwiftUI.
- La documentation tient sur une page, régler le rythme entre deux états demande donc des essais.
Questions fréquentes
Oui. Le paquet est open source sous licence MIT et tous les états, formes et rendus sont inclus sans frais. Il n'y a ni offre payante ni compte à créer.
Contenus associés
Découvrez des outils, des compétences et des articles liés à Thinking Orbs.
Alternatives à Thinking Orbs
Base Code
Base44 (Wix) · Programmation · ProductivitéBase Code est un environnement de développement cloud partagé signé Base44. Votre équipe décrit des modifications sur un dépôt GitHub dans le chat, les vérifie en aperçu et les renvoie sous forme de pull requests.
Google EmbeddingGemma 2
Google DeepMind · Rédaction · Image · ProgrammationGoogle EmbeddingGemma 2 est un modèle ouvert de 740 millions de paramètres qui transforme texte, code, images, audio et images vidéo en vecteurs d'un même espace de 768 dimensions, sur un téléphone ou un ordinateur portable.
GitGlow
GitGlow · Programmation · ProductivitéGitGlow est un client Git de bureau qui place votre code et les modifications de vos agents IA dans une même revue, pour savoir ce qui quitte votre machine avant de livrer.