thinking-orbs

# thinking-orbs Indicadores de carga de orbes punteados para UIs de IA y agentes. Nueve estados animados ajustados a mano, cada uno disponible en dos tamaños optimizados para propósitos específicos, renderizados en un lienzo 2D simple — sin WebGL, sin filtros, funciona de manera idéntica en Chrome, Safari y Firefox. [Demo en vivo](https://orbs.jakubantalik.com) · [Repositorio](https://github.com/Jakubantalik/thinking-orbs) · [Reportar un problema](https://github.com/Jakubantalik/thinking-orbs/issues) ## Instalación ```bash npm install thinking-orbs ``` ## Inicio rápido ```tsx import { ThinkingOrb } from 'thinking-orbs'; function Status() { return <ThinkingOrb state="searching" size={64} />; } ``` ## Estados Nueve verbos que un agente puede estar realizando, cada uno con una animación distinta: ```tsx <ThinkingOrb state="working" /> {/* partículas en órbitas inclinadas */} <ThinkingOrb state="searching" /> {/* un meridiano de escaneo barre un globo punteado */} <ThinkingOrb state="solving" /> {/* las bandas se mezclan y luego encajan resueltas */} <ThinkingOrb state="listening" /> {/* una forma de onda recorre los anillos */} <ThinkingOrb state="connecting" /> {/* una constelación se conecta */} <ThinkingOrb state="weaving" /> {/* tres hebras se trenzan alrededor de la esfera */} <ThinkingOrb state="composing" /> {/* una banda multibanda ondulante */} <ThinkingOrb state="breathing" /> {/* un anillo que se transforma lentamente */} <ThinkingOrb state="shaping" /> {/* contorno punteado: círculo → triángulo → cuadrado */} ``` ## Tamaños Dos ajustes predefinidos — diseños separados, no un factor de escala. `64` para escala de avatar de chat, `20` para escala de texto en línea. Cada uno tiene su propia cantidad de puntos, tamaño de punto y ajuste de velocidad: ```tsx <ThinkingOrb state="working" size={64} /> <ThinkingOrb state="working" size={20} /> ``` ## Tema Estrictamente monocromático — tinta clara para fondos oscuros, tinta oscura para fondos claros — con el modo seleccionado automáticamente desde el proyecto anfitrión: ```tsx <ThinkingOrb theme="auto" /> {/* predeterminado — detecta desde el proyecto */} <ThinkingOrb theme="dark" /> {/* fijar: puntos claros para fondos oscuros */} <ThinkingOrb theme="light" /> {/* fijar: puntos oscuros para fondos claros */} ``` `auto` se resuelve en tres capas y se actualiza en vivo cuando cualquiera de ellas cambia: 1. un atributo `data-theme="dark|light"` de un ancestro o una clase `dark`/`light` (la convención de Tailwind / shadcn), observado mediante `MutationObserver`; 2. de lo contrario, `prefers-color-scheme`, suscrito para cambios de tema del sistema operativo en vivo; 3. seguro para SSR — el lienzo solo se pinta en el cliente, después de que el tema se haya resuelto. ## Otras propiedades ```tsx <ThinkingOrb state="solving" size={20} speed={1.5} // multiplicador de la velocidad incorporada del ajuste paused={false} // congelar en el fotograma actual aria-label="Analizando repositorio…" // anula el valor predeterminado por estado /> ``` Todas las demás propiedades de `<canvas>` (`className`, `style`, `data-*`, …) se transmiten. ## Accesibilidad y rendimiento - `role="img"` con un `aria-label` sensato por estado incluido de fábrica. - `prefers-reduced-motion: reduce` renderiza un fotograma representativo estático — sin animación — y aún sigue el tema en vivo. - Cada instancia se pausa automáticamente cuando se desplaza fuera de la pantalla (`IntersectionObserver`) o cuando la pestaña está oculta, y se reanuda en fase — todas las instancias comparten un reloj. - Solo arcos de lienzo 2D simples: sin `ctx.filter`, sin filtros SVG, sin WebGL — los mismos píxeles en todas partes, económico en dispositivos de gama baja. Relación de píxeles del dispositivo limitada a 2. ## Licencia MIT © Jakub Antalik