lab
Esc

Prueba con

↑↓ para moverte · Enter para abrir · también en /buscar?q= para agentes

herramienta intermedio reactcanvasinterfacesagentesaccesibilidad

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

Instrucciones para tu agente

Esto es lo que se copia. Pégaselo a tu agente y te lo monta paso a paso.

O ábrelo directamente en ClaudeChatGPT

Pega este texto a tu agente (Claude Code, Codex, OpenCode, Hermes o el que uses) y dile «ayúdame a montarlo». Son los pasos para ponerlo en marcha; el porqué de cada pieza está en la guía completa.

Para el agente: cómo acompañar al usuario

  1. Pregunta primero para qué lo quiere. Si su objetivo no necesita algún paso, sáltalo.
  2. Antes de instalar, comprueba lo que ya tiene (versiones, claves, sistema operativo).
  3. Avanza un paso cada vez: explica en una frase qué vas a hacer y deja que el usuario lo ejecute o lo apruebe.
  4. Tras cada paso, comprueba que funcionó antes de seguir. Si falla, para y explica el error.
  5. No inventes comandos ni opciones: si la documentación del proyecto contradice estos pasos, manda la documentación.
  6. Al terminar, haz una prueba real con el objetivo del usuario y dile dónde profundizar.

Pasos de configuración

Preparación

Comprueba React ≥18, como exige peerDependencies del paquete, y Node.js/npm compatibles con tu aplicación. Abre la raíz de la app React con su configuración TSX preparada antes de instalar.

Paso 1: instala el paquete en una app React

Comando del README:

npm install thinking-orbs

Paso 2: añade el ejemplo mínimo

import { ThinkingOrb } from 'thinking-orbs';

function Status() {
  return <ThinkingOrb state="searching" size={64} />;
}

Paso 3: conecta el estado real

Consulta los estados admitidos en el README. Actualiza la propiedad desde el estado de tu aplicación; no dejes searching fijo cuando termine la búsqueda. Para un indicador junto al texto, el tamaño documentado alternativo es 20.

Comprobación

Comprueba la visibilidad en fondos claros y oscuros y activa la preferencia de movimiento reducido del sistema: debe aparecer un fotograma estático. Revisa que el texto accesible describa la actividad que estás mostrando.

Si algo falla

Confirma que el componente se monta en el cliente: el README indica que el canvas espera a resolver el tema. Si los colores no encajan, revisa las clases dark/light o el atributo data-theme heredado y las opciones theme del README.

ver en .md ¿Prefieres el recurso entero?

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

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