thinking-orbs

# thinking-orbs Indicateurs de chargement en forme d'orbes pointillés pour les interfaces IA et agents. Neuf états animés réglés à la main, chacun fourni en deux tailles adaptées, rendus sur un canvas 2D simple — pas de WebGL, pas de filtres, fonctionne à l'identique dans Chrome, Safari et Firefox. [Démo en direct](https://orbs.jakubantalik.com) · [Dépôt](https://github.com/Jakubantalik/thinking-orbs) · [Signaler un problème](https://github.com/Jakubantalik/thinking-orbs/issues) ## Installation ```bash npm install thinking-orbs ``` ## Démarrage rapide ```tsx import { ThinkingOrb } from 'thinking-orbs'; function Status() { return <ThinkingOrb state="searching" size={64} />; } ``` ## États Neuf verbes qu'un agent peut effectuer, chacun avec une animation distincte : ```tsx <ThinkingOrb state="working" /> {/* particules sur orbites inclinées */} <ThinkingOrb state="searching" /> {/* un méridien de balayage parcourt un globe pointillé */} <ThinkingOrb state="solving" /> {/* les bandes se brouillent, puis se réassemblent */} <ThinkingOrb state="listening" /> {/* une forme d'onde défile à travers les anneaux */} <ThinkingOrb state="connecting" /> {/* une constellation se connecte */} <ThinkingOrb state="weaving" /> {/* trois brins se tressent autour de la sphère */} <ThinkingOrb state="composing" /> {/* une écharpe ondulante à plusieurs bandes */} <ThinkingOrb state="breathing" /> {/* un anneau qui se transforme lentement */} <ThinkingOrb state="shaping" /> {/* contour pointillé : cercle → triangle → carré */} ``` ## Tailles Deux préréglages réglés — des designs distincts, pas un facteur d'échelle. `64` pour l'échelle avatar de chat, `20` pour l'échelle texte en ligne. Chacun a son propre nombre de points, taille de points et réglage de vitesse : ```tsx <ThinkingOrb state="working" size={64} /> <ThinkingOrb state="working" size={20} /> ``` ## Thème Strictement monochrome — encre claire pour fonds sombres, encre sombre pour fonds clairs — avec le mode choisi automatiquement depuis le projet hôte : ```tsx <ThinkingOrb theme="auto" /> {/* défaut — détecte depuis le projet */} <ThinkingOrb theme="dark" /> {/* fixe : points clairs pour fonds sombres */} <ThinkingOrb theme="light" /> {/* fixe : points sombres pour fonds clairs */} ``` `auto` se résout en trois couches et se met à jour en direct quand l'une d'elles change : 1. un attribut `data-theme="dark|light"` ancêtre ou une classe `dark`/`light` (la convention Tailwind / shadcn), surveillé via `MutationObserver` ; 2. sinon `prefers-color-scheme`, abonné pour les changements de thème système en direct ; 3. sûr pour SSR — le canvas ne peint que côté client, après que le thème soit résolu. ## Autres props ```tsx <ThinkingOrb state="solving" size={20} speed={1.5} // multiplicateur sur la vitesse intégrée du préréglage paused={false} // geler sur l'image actuelle aria-label="Analyse du dépôt…" // remplace le défaut par état /> ``` Toutes les autres props `<canvas>` (`className`, `style`, `data-*`, …) sont transmises. ## Accessibilité et performance - `role="img"` avec un `aria-label` par état par défaut. - `prefers-reduced-motion: reduce` affiche une image représentative statique — pas d'animation — et suit toujours le thème en direct. - Chaque instance se met en pause automatiquement quand elle est hors écran (`IntersectionObserver`) ou quand l'onglet est masqué, et reprend en phase — toutes les instances partagent une horloge commune. - Uniquement des arcs de canvas 2D : pas de `ctx.filter`, pas de filtres SVG, pas de WebGL — les mêmes pixels partout, économique sur les appareils bas de gamme. Le ratio de pixels de l'appareil est plafonné à 2. ## Licence MIT © Jakub Antalik