~/biblioteca-ia/thinking-orbs
componentesInterfaz y motionpendiente
Thinking Orbs
Seis estados animados de pensando para agentes, en canvas 2D y sin dependencias.
Para qué reto sirve
El estado de espera de un agente. Un spinner genérico dice "espera" y nada más; estos seis dicen qué está pasando: working, searching, solving, listening, composing y shaping. Cuando la operación tarda, saber que está buscando y no atascado cambia la percepción de la espera sin escribir una línea de copy.
Qué es
Indicadores de carga en forma de orbe punteado para interfaces de agentes. Seis estados animados a mano, cada uno en dos tamaños que son diseños distintos y no el mismo escalado. Se dibujan en canvas 2D plano —sin WebGL, sin filtros— así que se ven igual en Chrome, Safari y Firefox. Un solo componente React con props.
Cuándo no usarla
Es React y solo React. Para Expo hay un paquete aparte, y para Vue o Svelte no hay nada. Es estrictamente monocromo: tinta clara sobre fondo oscuro o al revés, sin opción de color, así que si tu marca necesita el acento aquí no encaja. Y es un proyecto muy joven —16 estrellas, 7 commits, un solo mantenedor—: para producción cuenta con mantenerlo tú. Es MIT y son unos pocos archivos, así que copiarlo a tu repo es una salida razonable.
Mi veredicto
Sin probar. Lo que quiero verificar es si los seis estados se distinguen de verdad a 20px, que es el tamaño donde lo usaría: en línea, junto al texto. A 64px cualquier animación se lee; a 20 se decide si esto vale o es decoración.
Los seis estados
Cada uno es una animación distinta, no una variación de color.
working— partículas en órbitas inclinadassearching— un meridiano de escaneo barre un globo punteadosolving— las bandas se revuelven y encajan de golpelistening— una onda recorre los anilloscomposing— una banda ondulante de varias franjasshaping— el contorno punteado pasa de círculo a triángulo a cuadrado
Los dos tamaños
64 para escala de avatar en un chat y 20 para escala en línea con el texto. No es un factor de escala: cada preset lleva su propio número de puntos, tamaño de punto y ajuste de velocidad.
Lo que hace bien sin que se lo pidas
Es la parte que me hizo guardarlo. Trae role="img" con un aria-label sensato por estado. Con prefers-reduced-motion: reduce pinta un fotograma estático representativo en vez de desactivarse. Cada instancia se pausa sola al salir de pantalla o al ocultarse la pestaña, y vuelve en fase porque todas comparten un reloj. El tema auto se resuelve en tres capas —atributo data-theme de un ancestro vigilado con MutationObserver, luego prefers-color-scheme, y a prueba de SSR— y reacciona en vivo si cambian.