# Thinking Orbs: estados visuales para interfaces de agentes

> Muestra si tu agente busca, escucha o trabaja con indicadores React basados en canvas. Incluye tema automático, dos tamaños y una imagen estática cuando el usuario reduce el movimiento.

Verificado el 26 oct 2026.

## Qué es

Thinking Orbs es una biblioteca React de indicadores para aplicaciones de IA. Dibuja esferas de puntos con distintas animaciones según la actividad que tu aplicación le indique. Es una pieza de interfaz: no ejecuta tareas ni deduce por sí sola el estado del agente.

## Para qué te sirve

- Cuando una búsqueda tarda y quieres distinguirla de la generación de una respuesta.
- Cuando una interfaz de voz necesita mostrar que está escuchando.
- Cuando buscas un indicador pequeño para una línea de chat y otro mayor para un avatar.

## Cómo funciona

El componente `ThinkingOrb` recibe un estado, como `working`, `searching` o `listening`, y pinta el resultado con canvas 2D. El README documenta nueve estados y dos tamaños preparados por separado: 64 y 20. La aplicación es responsable de conectar esos valores con los eventos reales del agente.

El tema automático consulta primero atributos o clases de los elementos antecesores y después la preferencia del sistema. El canvas se pinta en el cliente, tras resolver el tema. Las instancias pausadas por quedar fuera de pantalla o por ocultarse la pestaña comparten un reloj para retomar la animación.

## Antes de empezar

Necesitas una aplicación React ≥18 y su gestor de paquetes; la ruta de los pasos usa npm. La instalación usa el paquete `thinking-orbs`; el README incluye un ejemplo TSX mínimo. La biblioteca tiene licencia MIT y no necesita una clave de modelos ni un servicio de inferencia para dibujar los indicadores.

## Límites y alternativas

Los colores son monocromos, con variantes para fondos claros y oscuros. Si necesitas ilustraciones de marca o una visualización del progreso numérico, tendrás que diseñarlas aparte. El soporte de movimiento reducido muestra un fotograma representativo y el componente incluye una etiqueta accesible; aun así, acompaña el indicador con información clara sobre la tarea cuando el usuario la necesite.

## Recursos

- [Repo en GitHub](https://github.com/Jakubantalik/thinking-orbs) - 3867 estrellas, licencia MIT.
- [Licencia](https://github.com/Jakubantalik/thinking-orbs/blob/main/LICENSE) - condiciones del código.
- [README](https://github.com/Jakubantalik/thinking-orbs#quick-start) - API y ejemplos TSX.

Datos comprobados con GitHub el 26 oct 2026. Último commit en la rama predeterminada: 2026-08-16.