THINKING ORBS : neuf états animés pour remplacer le spinner des interfaces IA
⏱️ Temps de lecture estimé : 3 minutes
📌 THINKING ORBS est une bibliothèque React d’indicateurs d’attente conçue pour les interfaces d’IA : au lieu du spinner habituel, neuf états animés et réglés à la main qui montrent ce que fait le modèle pendant qu’il travaille.
Un chatbot qui « réfléchit » affiche le plus souvent trois points qui pulsent. Vous attendez, sans savoir si l’agent cherche, rédige ou a décroché. Thinking orbs remplace ce vide par un vrai vocabulaire visuel : working, searching, solving, listening, connecting, weaving, composing, breathing, shaping. Chaque état a sa propre orbe animée, en particules, et raconte quelque chose de l’activité en cours. Un détail qui change la perception de l’attente plus qu’on ne l’imagine.
Côté code, le minimalisme est assumé. npm install thinking-orbs, puis un composant ThinkingOrb qui prend une prop state et une taille. Le paquet ne tire aucune dépendance à l’exécution et demande React 18 ou plus récent. Deux tailles sont proposées, 64 pour un avatar de chat et 20 pour un usage dans le texte, et chacune est réglée séparément plutôt que simplement mise à l’échelle. Les props couvrent l’essentiel : speed pour accélérer ou ralentir l’horloge d’animation, dark pour basculer entre le réglage clair et le sombre, paused pour figer le rendu.
Je trouve l’approche plus juste qu’un gadget de démo. Donner un état nommé à l’attente rend l’agent lisible : on distingue une recherche d’une génération, et l’interface cesse de faire semblant de vivre pour commencer à informer. C’est du design d’interface au sens propre, et ça se voit.
- 🎛️ Neuf états distincts, de searching à shaping, chacun animé à la main
- 📦 Zéro dépendance à l’exécution, un seul composant à déposer dans l’arbre React
- 🌓 Réglages clair et sombre séparés, choisis avec la prop
dark - 📱 Ports React Native et SwiftUI préparés dans le dépôt, pas encore publiés
Le projet appartient à Libraries.dev, une collection de sept bibliothèques d’effets pour interfaces IA signée Jakub Antalik, avec Alexandr Brinza sur les orbs. Border beam, avatars de bots, effets gooey, glow vocal, métal liquide, loader d’images : le même mode d’emploi partout, une licence MIT, et un dépôt qui dépasse les 3 600 étoiles. Le détail le plus malin reste le bouton « Copy prompt » de chaque page : il transmet à votre agent — Claude Code, Cursor, Codex — le vocabulaire complet des paramètres et votre réglage courant. La bibliothèque est pensée pour être installée par un agent de code, pas seulement recopiée depuis un README.
Deux limites à connaître. Les ports natifs existent dans le dépôt mais ne sont pas encore publiés : pour React Native, il faut passer par le repo avec React Native Skia et Reanimated, et Expo demande un build natif. Et le Studio de réglage fin reste derrière l’abonnement Pro.
Si vous construisez une interface d’agent, remplacer le spinner vous prendra quelques minutes. Le gain, lui, se voit à chaque attente. La preview tourne en direct sur la page du projet.
Sources
