Thinking Orbs: las animaciones de orbe de las apps de IA, gratis y open source

Esas animaciones de orbe que ves en las apps de IA mientras «piensan» ya tienen código libre. Se llama Thinking Orbs: nueve orbes animados, uno para cada cosa que puede estar haciendo tu producto. Gratis, de código abierto y con licencia MIT.

Aquí tienes qué es, los 9 estados, cómo instalarlo, por qué es ligero y accesible, qué permite la licencia y un prompt para que Claude lo meta en tu app.

Qué es Thinking Orbs

Thinking Orbs es una librería de indicadores de carga para interfaces de IA y agentes. En vez del círculo que gira de siempre, muestra un orbe hecho de puntos que se mueve de forma distinta según lo que está pasando.

• Es de Jakub Antalik, diseñador, y tiene más de 3.600 estrellas en GitHub.
• Es un componente de React (React 18 o superior), publicado en npm como thinking-orbs.
• Viene en dos tamaños afinados a mano: 64 px para el avatar de un chat y 20 px para ir junto a un texto. No es el mismo dibujo escalado: cada tamaño tiene su propio número de puntos y su velocidad.
• Es monocromo y se adapta solo al modo oscuro o claro de tu web.
• Tiene demo en vivo en orbs.jakubantalik.com, donde puedes ver los nueve antes de instalar nada.

Los 9 estados (y cuándo usar cada uno)

Cada estado es un verbo, algo que tu IA puede estar haciendo. La descripción de la animación es la del propio README; la columna de uso es una idea para empezar.

Por qué cambiar el spinner de siempre

Un spinner solo dice «espera». No dice si la IA está buscando, pensando o escribiendo, y una espera sin información se hace más larga.

Con Thinking Orbs, el indicador de carga cuenta lo que está pasando de verdad. Si además le pones al lado un texto corto («Buscando en tus documentos…»), el usuario entiende en qué punto está su petición sin leer nada más.

Cómo instalarlo y usarlo en React

1. Instala el paquete:

npm install thinking-orbs

2. Úsalo donde tengas un indicador de carga (ejemplo del README):

import { ThinkingOrb } from 'thinking-orbs';

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

3. Ajusta lo que necesites con sus props:

El resto de props de un <canvas> (className, style, data-*…) se pasan tal cual. La versión de npm (0.3.2) añade además un tamaño intermedio de 32 px para avatares compactos.

Si usas Next.js (App Router)

El componente usa hooks de React y el paquete no lleva la directiva "use client". Ponlo dentro de un componente de cliente:

"use client";

import { ThinkingOrb } from "thinking-orbs";

export function EstadoAgente({ buscando }: { buscando: boolean }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
      <ThinkingOrb state={buscando ? "searching" : "composing"} size={20} />
      <span>{buscando ? "Buscando en tus documentos…" : "Escribiendo la respuesta…"}</span>
    </div>
  );
}

Ligero de verdad: canvas 2D, sin WebGL

• Solo arcos en un canvas 2D: nada de WebGL, ni ctx.filter, ni filtros SVG. Los mismos píxeles en Chrome, Safari y Firefox.
• Sin dependencias propias: solo pide React.
• Se pausa solo cuando sale de la pantalla o cuando la pestaña está oculta, y retoma la animación donde iba. Todos los orbes comparten un único reloj.
• Densidad de píxeles limitada a 2×, para no gastar de más en pantallas muy densas.

Accesible: respeta «reducir movimiento»

Hay personas que activan «reducir movimiento» en su sistema porque las animaciones les marean o les distraen. Thinking Orbs lo respeta:

• Con prefers-reduced-motion: reduce, muestra un fotograma fijo representativo, sin animación, y sigue el tema claro u oscuro.
• Cada orbe lleva role="img" y un aria-label razonable para cada estado. Puedes cambiarlo por uno en español con la prop aria-label.

Licencia MIT: puedes usarlo en un producto de pago

La licencia MIT es de las más abiertas que existen. En la práctica:

• Puedes usarlo gratis, también en productos comerciales y de pago.
• Puedes modificarlo y adaptarlo a tu marca.
• No tienes que pedir permiso ni publicar tu código.
• Tu única obligación: conservar el aviso de copyright (MIT © Jakub Antalik) y el texto de la licencia en las copias del software. Lo normal es incluirlo en el archivo de licencias de terceros de tu app.

Prompt para que Claude lo integre en tu app

Abre Claude Code en la carpeta de tu proyecto y pega esto:

Quiero sustituir los indicadores de carga de mi app por Thinking Orbs (paquete npm thinking-orbs, repositorio github.com/Jakubantalik/thinking-orbs, licencia MIT). 1) Lee el README del repositorio y usa solo la API documentada: el componente ThinkingOrb con las props state, size, theme, speed, paused y aria-label. No inventes props. 2) Busca en mi proyecto todos los spinners e indicadores de carga y dime qué está pasando en cada uno. 3) Asigna a cada uno el estado que mejor encaje (working, searching, solving, listening, connecting, weaving, composing, breathing o shaping) y enséñame la tabla antes de tocar nada. 4) Cuando la apruebe, instala thinking-orbs y haz el cambio: size 64 en avatares de chat y 20 junto a texto, con un texto corto al lado que diga qué pasa («Buscando…») y un aria-label en español. 5) Si el proyecto usa Next.js con App Router, pon el orbe dentro de componentes con "use client". 6) Cambia solo la parte visual: no toques la lógica de carga. 7) Añade el aviso de licencia MIT de Jakub Antalik al archivo de licencias de terceros del proyecto (créalo si no existe). Al final, dime qué archivos has cambiado.

Créditos

Thinking Orbs es un proyecto de Jakub Antalik, publicado con licencia MIT. Tienes la demo en orbs.jakubantalik.com y el código en GitHub. El paquete de npm se publica desde su colección Libraries.dev. Si te sirve, dale una estrella al repositorio.