Thinking Orbs
Yogesh (yogesharc) · Programación
Thinking Orbs es una biblioteca de componentes React de código abierto con orbes animados que muestran qué está haciendo un agente de IA en cada momento.
Acerca de Thinking Orbs
About
Qué es Thinking Orbs
Thinking Orbs es una biblioteca de componentes React que dibuja orbes animados para interfaces de agentes de IA. Cada orbe es una esfera de puntos, y cada estado cambia la forma en que esos puntos se mueven. Mientras el asistente razona, una chispa recorre la superficie. Cuando busca en la web, una lente salta de un punto a otro. Si reintenta después de un error, el orbe gira y se enrolla hacia atrás.
La biblioteca nace porque las interfaces de agentes pasan mucho tiempo en un estado de trabajo indefinido. Un spinner no dice nada sobre lo que hace el modelo, y el usuario no distingue una respuesta lenta de una petición que se quedó colgada. Este orbe animado convierte ese tiempo muerto en una señal legible, con un tamaño que cabe junto a una línea de texto.
Yogesh la publica como paquete de código abierto con licencia MIT. El orbe de React solo necesita React, la versión de JavaScript puro no necesita nada y el paquete de SwiftUI cubre iOS 17 y macOS 14. Las formas y los renders que van más allá del predeterminado llegan como módulos aparte, así que cada proyecto empaqueta solo lo que importa.
Conviene conocer los límites antes de instalar. El componente anima, pero no sigue a tu agente: tú eliges qué estado mostrar y cuándo cambiarlo, normalmente desde tu propio ciclo de peticiones. Las formas y los renders siguen siendo solo para web, y la versión de SwiftUI acepta menos opciones.
Primeros pasos
- Instala el paquete con npm, pnpm, yarn o bun: npm i @yogesharc/thinking-orbs.
- Importa Orb y pásale un estado, como reasoning o searching.
- Ajusta size, speed, density y tilt para que el orbe case con tu texto, y añade label para los lectores de pantalla.
- Importa una forma o un render de los módulos opcionales para cambiar la figura o la manera de dibujar los puntos.
- O copia el código en components/ con el comando de shadcn y edítalo como un archivo propio.
Información del producto
Un vistazo rápido a los precios, las plataformas compatibles y el rendimiento de Thinking Orbs.
Ideal para
Los usuarios, tareas y casos de uso en los que esta herramienta encaja mejor.
Usuarios
- Desarrolladores de React que construyen chats o productos de agentes
- Ingenieros de frontend en equipos pequeños sin diseñador
- Creadores independientes con un proyecto paralelo
Tareas
- Distinguir el razonamiento de la búsqueda web en un chat con streaming
- Mostrar trabajo largo en segundo plano, como una indexación o una tarea tipo servidor de desarrollo
- Avisar de un reintento o de un límite de uso
- Rellenar un panel vacío mientras vuelve una llamada de herramienta
Casos de uso
- Una app de chat que recibe tokens en streaming y necesita un estado junto a la cabecera de la respuesta.
- Un agente de código o un plugin de editor donde las llamadas a herramientas se encadenan y cada una necesita su propia señal.
- Una app de SwiftUI para iPhone o Mac que quiere el mismo lenguaje visual que la versión web.
Funciones clave
Un indicador de estado para cada acción del agente
La biblioteca cubre nueve estados, pensados para el bucle de un agente: trabajo en curso, razonamiento y búsqueda arriba, y después tareas en segundo plano, control del navegador, reintentos, compactación del contexto, espera por límite de uso e inactividad. La mayoría tiene variantes con nombre, así que gyro puede mecer un orbe de trabajo y lighthouse puede barrer con un haz de búsqueda.
Propiedades que ajustan el aspecto sin CSS
Size, speed, density, dotSize y tilt son props numéricas, de modo que puedes ajustar el orbe a un pie de foto de 14 px o a un bloque de 48 px sin escribir estilos. La prop paused congela la animación en el fotograma actual y className deja que el orbe herede el color de texto de tus clases utilitarias. Como dibuja en currentColor, el modo oscuro funciona sin configuración extra.
Formas y renders opcionales
El núcleo incluye una forma y un render. Otras cuatro formas (cube, octahedron, tetrahedron, torus) y siete renders (dashes, squares, crosses, mesh, halftone, lines, verticalLines) viven en puntos de entrada separados. El tree shaking deja fuera los que no uses, y una forma personalizada es una función que devuelve puntos dentro de la esfera unitaria.
Cuatro maneras de adoptarlo
Puedes instalar desde npm, copiar el código con una URL de shadcn, montarlo en JavaScript puro con mountOrb o añadir el paquete Swift en Xcode. La versión vanilla expone pause, play y destroy, útil en una página que gestiona su propio ciclo de vida. La versión de SwiftUI dibuja con el estilo de primer plano, así que un modificador como foregroundStyle(.blue) lo tiñe.
Poco peso y accesibilidad por defecto
La compilación de React no tiene dependencias más allá de React, y la de JavaScript puro no tiene ninguna. El tamaño predeterminado de 20 px es aquel para el que se dibujaron las formas, así que los puntos siguen legibles en una interfaz densa. La prop label nombra el orbe para los lectores de pantalla, y la animación se detiene cuando el sistema informa de movimiento reducido.
Código abierto con licencia MIT
El código completo está en GitHub, y la licencia MIT permite uso comercial, modificación y redistribución. El pago es opcional a través de Patreon y financia el trabajo, no desbloquea funciones. Para un equipo que quiera bifurcar el componente y quedárselo, el coste es predecible.
Ventajas y desventajas
Ventajas
- Nueve estados con variantes cubren casi todas las acciones que una interfaz de agente necesita comunicar.
- Sin cadena de dependencias: la instalación apenas añade peso a un proyecto de React.
- El tamaño predeterminado de 20 px se lee con claridad en barras de herramientas, cabeceras de mensaje y paneles laterales.
- El soporte de movimiento reducido y la etiqueta para lectores de pantalla vienen dentro del componente.
Desventajas
- El orbe solo dibuja, así que tienes que mapear los eventos de tu agente al estado correcto.
- Las formas y los renders son solo para web, lo que deja la versión de SwiftUI con menos opciones.
- La documentación cabe en una página, así que para afinar los tiempos entre estados toca probar.
Preguntas frecuentes
Sí. El paquete es de código abierto con licencia MIT e incluye todos los estados, formas y renders sin coste. No hay plan de pago ni cuenta que crear.
Contenido relacionado
Explora herramientas, habilidades y artículos relacionados con Thinking Orbs.
Alternativas a Thinking Orbs
Base Code
Base44 (Wix) · Programación · ProductividadBase Code es un entorno de desarrollo en la nube compartido de Base44. El equipo describe cambios sobre un repositorio de GitHub en el chat, los ve en una vista previa y los envía como pull requests.
Google EmbeddingGemma 2
Google DeepMind · Escritura · Imagen · ProgramaciónGoogle EmbeddingGemma 2 es un modelo abierto de 740 millones de parámetros que convierte texto, código, imágenes, audio y fotogramas de vídeo en vectores de un mismo espacio de 768 dimensiones, y funciona en móviles y portátiles.
GitGlow
GitGlow · Programación · ProductividadGitGlow es un cliente Git de escritorio que reúne tu código y los cambios de tus agentes de IA en una sola revisión, para que sepas qué va a salir de tu máquina antes de publicarlo.