Mets les orbes de réflexion dans ton interface.

Une orbe par état

Comment ça marche.

Quand une IA réfléchit, ton utilisateur attend. Une orbe montre que ça travaille, et laquelle montre quoi : chercher, écrire, écouter. Thinking Orbs en donne 9, prêtes à poser dans une app React.

Elles sont faites pour rester légères, d'après leur README :

• un simple canvas 2D, sans WebGL ni filtres ;
• elles se mettent en pause hors de l'écran et quand l'onglet est caché ;
• une seule horloge pour toutes les orbes de la page ;
• une image fixe pour les personnes qui ont demandé moins d'animations à leur système.

libraries.dev/orbs

Choisir la bonne

Les 9 états.

Le nom de chaque état dit l'idée. Choisis celui qui raconte ce que ton app fait vraiment :

• searching pendant une recherche, listening pendant une dictée, composing pendant que la réponse s'écrit ;
• working, solving, connecting, weaving, breathing, shaping pour le reste : regarde-les tourner sur la démo et prends celle qui colle.

Deux tailles, dessinées chacune à part (pas un simple zoom) : 64 pour une zone d'attente, 20 dans une ligne de texte.

Dans une app React

Étape par étape.

1. 1

   Installe le paquet.

   npm install thinking-orbs

   Copier
2. 2

   Pose ta première orbe.

   import { ThinkingOrb } from "thinking-orbs";
   
   <ThinkingOrb state="searching" size={64} />

   Copier

   Tu dois voir l'orbe qui tourne à l'endroit où tu l'as posée.

3. 3

   Branche-la sur ta vraie attente.

   Elle s'affiche quand la requête part, elle disparaît quand la réponse arrive. L'exemple complet est dans les fichiers plus bas.

   Piège

   Une orbe qui tourne alors que rien ne charge, c'est pire que pas d'orbe. Pense aussi au cas d'erreur : l'orbe doit disparaître et un message doit la remplacer.
4. 4

   Règle le thème et le texte lu.

   theme vaut "auto" par défaut (sinon "dark" ou "light"). Ajoute un aria-label : c'est ce qu'entend une personne qui utilise un lecteur d'écran.

L'intégration

À donner à Claude.

Je veux ajouter les orbes de réflexion « Thinking Orbs » (paquet npm thinking-orbs, licence MIT) dans mon application.

1. Installe le paquet (npm install thinking-orbs), puis lis son README dans node_modules/thinking-orbs avant d'écrire quoi que ce soit.
2. Cherche dans mon code tous les endroits où l'utilisateur attend : réponse d'une IA, recherche, envoi d'un formulaire, chargement d'une page de données.
3. Rends-moi un tableau, sans rien modifier : endroit (fichier et composant), ce qui s'affiche aujourd'hui, l'état d'orbe que tu proposes (working, searching, solving, listening, connecting, weaving, composing, breathing ou shaping) et la taille (64 pour une grande zone d'attente, 20 dans une ligne de texte).
4. Attends mon accord, puis intègre les orbes que j'ai validées :
   - l'orbe s'affiche seulement pendant la vraie attente, et disparaît quand la réponse arrive ou en cas d'erreur ;

import { ThinkingOrb } from "thinking-orbs";

// L'orbe ne s'affiche que pendant l'attente, et dit ce qui se passe aux lecteurs d'écran.
export function Attente({ enCours }: { enCours: boolean }) {
  if (!enCours) return null;
  return <ThinkingOrb state="composing" size={20} aria-label="L'IA écrit sa réponse" />;
}

FAQ

Questions.